I have a div with text-align:center and 3 spans with text in them. I also have mouse over event that sets padding,background color and border. But when doing it it pushes the other 2 spans. Here is a jsfiddle for better visualization.
http://jsfiddle.net/93EBu/
<div id="div">
<span class="span">Word</span>
<span class="span">Word</span>
<span class="span">Word</span>
</div>
#div {
text-align:center;
}
.span {
margin: 0px 5%;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
You can remove padding: 5px from .spanhover as well as adding border: 1px solid transparent to your span elements:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
border: 1px solid transparent;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
Also, instead of using unnecessary jQuery here, you can make use of :hover selector:
span:hover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
TRY THIS:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
padding:6px;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
DEMO HERE: http://jsfiddle.net/93EBu/1/
The reason you are having this problem is because the padding you are adding to the spanhover class is pushing the elements. So you need to have the span already have the padding as well.... but since you have added a 1px border. You need to make the span padding be 6px... Padding + Border.
Related
I have a class where I want to change a single attribute with a javascript function.
.msg_archivedropdown:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
I'm already using jQuery, so I've tried to do it with addClass:
function colorbubble(){
$("archivedropdown before").addClass("msg_archivedropdownhover before");
}
The added class looks like this, only the border color changes:
.msg_archivedropdownhover:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #DFDFDF;
}
Sadly, there's nothing changing. I've tried various kind of ways so far. I've tried to do it with:
$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');
Which got me nowhere and I also tried to loop through a getElementsbyClass which did not work either. I´m doing something wrong. Can someone please give me a hint? Thank you.
EDIT:
It's a speech-bubble where I made a triangle in the .msg_archivedropdown:before-class. On a mouseover event I want to change the color of the triangle as well. So I only want to change the color of the .msg_archivedropdown:before class.
You don't need jquery for a trivial case like this. You could just use :hover pseudo-class instead.
.msg_archivedropdown {
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: relative;
}
.msg_archivedropdown::before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
.msg_archivedropdown:hover::before {
border-right:7px solid #DFDFDF;
}
<div class="msg_archivedropdown"></div>
You want to change the pseudo :before element in Jquery and you can't do it use $('.msg_archivedropdown:before')
so your alternative is to add class with pseudo element as msg_archivedropdown and in function toggleClass then the new class apply on DOM with the boreder-color
Do it as below:
function colorbubble(){
$('.msg_archivedropdown').toggleClass('beforeClass');
}
.msg_archivedropdown:before,.beforeClass:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:3px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
background: red
}
.beforeClass:before{
border-right-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg_archivedropdown">show div</div>
<button onclick="colorbubble()">change</button>
I have created a round shaped bordered button using CSS by this:
.round-button {
display:block;
width:100px;
height:100px;
line-height:100px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
and used it in html5 by this:
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo"></font>
</a>
</div>
Now I want to create a line break inside the round button,
<div align="center">
<a href="#" class="round-button">
<font color="#29966c" id="demo">hello <br />world</font>
</a>
</div>
So, the "world" comes out of the round button.
I want both words will be at different line but they both will stay inside the round button window.
As your line-height equals to width in your css, the "world" comes out of the round button.
if you set line-height to 50px, you'll get vertically middle aligned text in the button.
As others mentioned, line-height:100px means each line of text should be 100px tall. That will work to vertically center one line of text (if the container is also 100px tall), but will not work if it is larger than 2 lines of text.
To vertically center the content regardless of how many lines it is, you can use:
display: table-cell;
vertical-align: middle;
Fiddle: http://jsfiddle.net/PDPTV/
(Note: The <font> tag is not supported in HTML5. Moving forward, you should use CSS to specify your font colors. The attribute align=center is also not supported, so you should use another technique to center your content, but that's for a whole other topic on stack overflow.)
The problem is that "line-height:100px;" is pushing the second line down 100px, try this:
.round-button{
display:block;
width:100px;
height:80px;
padding-top: 20px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
You may have to fiddle with the height and padding to get the right offset from the top. Remember that the height excludes padding, so subtract the padding from the height.
Your line-height is 100px. do this instead:
http://jsfiddle.net/VS7sJ/
.round-button {
display:block;
width:100px;
height:100px;
line-height:1em;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
span {
padding:20px 0 0;
display:block
}
line-height:1em and wrap the text with span
<div align="center"> <span><font color="#29966c" id="demo">hello <br />world</font></span>
</div>
its the line height problem.
because the height is 100px and line-height is also 100 px thats the reason it shows out the button.
.round-button {
display:block;
width:100px;
height:100px;
line-height:50px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
you can also use the given below code to keep the words in center..
.round-button {
display:block;
width:100px;
height:75px;
padding-top:25px;
line-height:25px;
border:2px solid #29966c;
border-radius: 50%;
color:#FFF;
text-align:center;
text-decoration:none;
background: #FFFFFF;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.
Here's my code:
HTML:
<div id="main">
<div class='arrowblock'>
<div class='arrowright'></div>
<div class='rectcontainer'>
<div class='rect'></div>
<div class='rect' style='background-color:green'>
</div><div class='rect'>
</div>
</div>
CSS:
.rectcontainer {
height:30px;
width:100px;
}
.arrowblock {
width:130px;
border-top: 15px solid transparent;
}
.arrowright {
float:right;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 30px solid green;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
Is there a simpler way to achieve this?
Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
How about just using a html entity or unicode symbol for your arrow:
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
FIDDLE
There are more to choose from here
To build on #josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
jsFiddle
HTML:
<div class="arrow"></div>
CSS:
.arrow {
position:relative;
width:120px;
margin:50px auto;
height:0;
border-bottom:10px solid blue;
}
.arrow::after {
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
position: absolute;
right: -10px;
top: -15px;
}
To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle
I've created this, which you can use for an arrow that points to the right.
In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDIT
I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.
http://jsfiddle.net/fqcFp/2/
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks #Josh for the starting point! I support some older browsers so this is good for me. We could use transform to rotate the arrow as we like it in more modern browsers. HTH
<div class="RightArrow">
<div class="line"></div>
<div class="point"></div>
</div>
<!-- for very short arrows reduce the width of .line -->
<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
width:90%;
position: relative;
}
.line {
margin-top:8px;
width:97%;
background:blue;
height:0.3em;
float:left;
position: absolute;
}
.point {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 37px solid blue;
float:right;
}
</style>
When it shows comment, it won't show the comment in the middle of vertical-align.
How can I make it shown in the middle of vertical-align?
This is current output. I want it right in the middle of vertical-align.
Javascript
function showComments(time){
var foundComments = findComments(time);
$.each(foundComments,function(i,comment){
$commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
setComment(comment.message);
$commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
});
};
CSS
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
}
.newsticker p{
height:100px;
float:left;
position:absolute;
}
HTML
<div class="newsticker">
</div>
If its a single line. set the line height to the height of the div.newsticker eg 100px.
For example
font: 16px/100px 'arial', sans-serif
Just update below CSS3 rule to use "table-cell" and "vertical-align" as below:
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table-cell;
vertical-align: middle;
}
Also, you need to avoid position:absolute;
.newsticker p{
height:100px;
float:left;
position:absolute;
}
Try a div with display:table and then a div within with a display: table-cell where you want the text. That should vertical align, JS Fiddle is down, so I can't show you an example.
div.newsticker{
border:1px solid #666666;
width:100%;
height:100px;
display: table;
}
.newsticker p{
padding-left:10px;
padding-right:10px;
display: table-cell;
vertical-align: middle;
}
<div>
<span class="newsticker">
</span></div>
div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}
http://jsfiddle.net/azHVv/22/
I have this setup at the moment. I would like it so that when you hover over a box the bottom border changes to the same colour as inside the hovered div. I am starting to think this cannot be done with just css, but how would you add javascript to do this?
Any guidance would be appreciated
http://jsfiddle.net/hCK3D/7/
Why don't you just remove the bottom-border on hover and instead make the element 1px bigger in height? (You do not need to add any JavaScript codes)
Like this:
http://jsfiddle.net/hCK3D/17/
UPDATE: Now also the border is not disrupted..
UPDATED CSS:
.item-container {
float:left;
margin-top:20px;
border-bottom: 1px #BCC0C3 solid;
height:100px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px #fff solid;
border-top: 1px #BCC0C3 solid;
border-bottom: 1px #BCC0C3 solid;
box-sizing: border-box;
}
.item:first-child {
border-left: 1px #BCC0C3 solid;
}
.item:last-child {
border-right: 1px #BCC0C3 solid;
}
.item:hover {
background:#ECEFF4;
border-left:1px #BDC0C5 solid;
border-right:1px #BDC0C5 solid;
border-bottom: 0;
height:101px;
}
.item:hover + .item {
border-left-width: 0;
}
Overlap div container border with item border on hover
Unlike the other answers posted, this solution will allow you to keep the border line on the bottom: http://jsfiddle.net/hCK3D/15/ and your white vertical lines will continue to appear correctly.
The idea is that the border from the bottom is now set in the item, and when the item is hovered the bottom border changes colour to match the hover colour. Also the container border is set for the purpose of the white vertical lines, but on hover the item hover border bottom appears in front of the container border.
See the JSFiddle for source
do you mean like this?
jsfiddle
.body{background:#ECEFF4;}
.item-container {
float:left;
border-top: 1px solid #BCC0C3;
margin-top:20px;
}
.item {
float:left;
background: #ccc;
width: 100px;
height: 100px;
border-left: 1px solid #fff ;
border-bottom: 1px solid #BCC0C3;
}
.item:first-child {border-left: 1px solid #BCC0C3;}
.item:last-child {border-right: 1px solid #BCC0C3;}
.item:hover {
background:#ECEFF4;
border-left:1px solid #BDC0C5;
border-right:1px solid #BDC0C5;
border-bottom: 1px solid #ECEFF4;
}
.item:hover + .item {border-left-width: 0;}