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;
}
Related
I try to put tooltips on an element, that changes based on four buttons on the same page.
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;
}
This is my tooltip. I works just fine, but I can't hide it, when I want another tooltip to be displayed.
How do I disable this tooltip and show another one, based on the buttons I clicked? Tooltip1 has to be hidden when Tooltip2 is shown and vice versa.
Dr. Google didn't help.
Image for clarification :
You can change tooltip content with
$(".tooltip-selector").tooltip("option", "content", "New Content");
and bind this to your button's click
enter code here
$(document).ready(function(){
$('.btn1').click(function(){
$('.tooltip').addClass('btn1');
$('.tooltip').removeClass('btn2');
});
$('.btn2').click(function(){
$('.tooltip').addClass('btn2');
$('.tooltip').removeClass('btn1');
});
});
a.tooltip span {
z-index:15;
position: relative;
display:none;
padding:14px 20px;
margin-top:17.5%;
margin-left:18%;
width:300px;
height:80px;
line-height:16px;
border-radius:2px;
box-shadow: 0px 0px 6px 3px #666;
opacity: 0.8;}
a.tooltip.btn1:hover span.btn1{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
a.tooltip.btn2:hover span.btn2{
display:inline;
position:absolute;
border:2px solid #666;
color:black;
background:white repeat-x 0 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" class="tooltip">1
<span class="btn1">1</span>
<span class="btn2">2</span>
</a>
<button class="btn1">1</button>
<button class="btn2">2</button>
So I've been playing around with my code for some time now, and I still am
not able to get the div elements to properly center themselves along the bottom of my canvas element. The code I have so far gets me relatively close, but it is not quite there. I've posted the relative css snippets below, if anyone can give me some direction I would be really appreciative.
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
}
Add a container div, also inline-block, and give it text-align: center. This will make sure all your inline-block divs are anchored at the center of the page.
#container {
text-align: center;
display: inline-block;
}
#shapeCanvas {
width:800px;
height:650px;
border:1px solid #000000;
display:block;
margin: 0 auto;
}
.styleDiv {
color:#FFFFFF;
font-family:"Verdana";
background-color:#36648b;
border:2px solid #000000;
border-radius:5px;
padding:5px;
display:inline-block;
width:150px;
height:25px;
text-align: center;
}
<div id="container">
<div id="shapeCanvas"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
<div class="styleDiv"></div>
</div>
i just want to make an input text field with a little x (close) button at the top right corner. please help me out how it should be done in css3 or bootstrap 3. Thank you
This is a simple demo:
html:
<input type="text"><span class="close-icon">x</span>
css:
.close-icon{
position:relative;
left: -14px;
top: -4px;
}
Check this
HTML
<div class="main-content">
X
Dummy Text will be here.. Dummy Text will be here..
</div>
css
.main-content{
border:1px solid #aaa;
height:200px;
width:50%;
position:relative;
padding:10px;
font-family: arial;
font-size:12px;
}
.close{
position: absolute;
right:5px;
top:5px;
text-decoration: none;
font-family: arial;
color:#fff;
background-color: #aaa;
padding:3px 5px
}
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.
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/