I want to create a keyboard as seen on image:
The keys should be span objects. I have this CSS:
span{
height:25px;
width:25px;
float:left;
margin:0 5px 5px 0;
line-height:25px;
background-color:WhiteSmoke;
text-align:center;
font-size:14px;
border-style:solid;
border-width:1px;
border-color:silver;
}
... and I get this result:
It's almost OK but I don't know how to position the spans properly?
You need to set a width and a text-align:center on the parent element, and ditch the float
Related
`.history-bar{
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:16px;
width:472px;
vertical-align:middle;
color:black;
}`
I read that line-height should be the same height of a div, to vertical-align:middle;
This div has 35px height but 16px line-height.
Is there any way to middle align this div ?
Use display: table-cell; with vertical-align: middle; to vertical align the text.
.history-bar {
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:16px;
width:472px;
color:black;
background: #eee;
display: table-cell;
vertical-align: middle;
}
JSFiddle demo
You can remove the vertical-align property from your CSS, and yes, you can change the line-height to be the same as the height, like so:
.history-bar {
padding-left:10px;
margin-top:5px;
margin-bottom:5px;
height:35px;
line-height:35px;
width:472px;
color:black;
border: 1px solid; /* added so you can see it's position */
}
Here's a JSfiddle of the code above.
If you didn't set an explicit height, then you could manage the text's position via padding in the parent container, as well as margins (say if you used a <p> that had margin-bottom applied).
I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
i want to center one button up and the other down. how can i edit my css to achieve this.here is
css-
#ContactForm .button {
margin-left:8px;
margin-left:9px;
float:right;
margin-right:2px;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px;
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
html-
<div>
send
clear
</div>
Here's a jsfiddle with what you want.... http://jsfiddle.net/xgdVM/
you can set the text-align of the container to center
and set the display property of the buttons to block..
CSS:
#form{text-align:center;}
a{display:block;}
HTML
<div id="form">
send
clear
</div>
OR if your buttons have a set witdth i.e width:70px; then you can just give them the css property margin:0 auto; and they will be centered by applying equal margins to the left and right
http://jsfiddle.net/xgdVM/2/
If you mean center horizontally:
#ContactForm .button {
margin: 0 auto; /* centers, provided there's a width set */
display: block;
font-size:20px;
font-weight:700;
color:#fff;
line-height:35px;
width:90px; /* width set */
text-align:center;
background:url(../images/button_form.gif) top repeat-x #308da2;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;behavior:url(js/PIE.htc);
position:relative;
text-decoration:none
}
I have a floated element, the whole purpose of which is to display an 'x' signifying that you can remove something:
.remove_button{
background-color:#ff3300;
color:#ffffff;
font-family:Courier New,sans-serif;
font-weight:900;
font-size:20px;
float:right;
border-radius:5px;
padding:0px 6px 0px 6px;
margin-right:15px;
}
<div class="remove_button" title="Remove">x</div>
It does display a neat little 'x' over a red background (no need to make a picture, I'm bad at that), but the problem is that when the mouse hovers over the button the title attribute shows up inside the button, and as a tooltip too:
------xRemove------ one '-' is one pixel of padding
try this,
.remove_button{
background-color:#ff3300;
color:#ffffff;
font-family:Courier New,sans-serif;
font-weight:900;
font-size:20px;
float:right;
border-radius:5px;
padding:0px 6px 0px 6px;
margin-right:15px;
position:relative;
}
.tip{
position:absolute;
display:none;
border:1px solid #aab;
background:#eef;
padding:0 3px;
left:15px;
top:25px;
}
.remove_button:hover .tip{
display:block;
}
You can look here:
http://jsfiddle.net/vsjwww/n7kk3/17/
It all works fine, but as you see, the div, which will slide down, starts slide above the other div.
It looks like a CSS problem, how can we solve it?
Thanks..
Demo
You need the dropdown div to have the following css:
#will_slideDown
{
position:absolute;
top:100%;
left:0px;
}
and #has_hover_function needs position:relative;
Absolutely position the inner element at the bottom border of the outer element:
#has_hover_function, #will_slideDown
{
position:relative;
width:150px;
height:25px;
font-family:Arial;
text-align:center;
padding-top:3px;
border:1px solid gray;
background-color:#e7e7e7;
}
#will_slideDown {
position:absolute;
top:29px; /* 1px + 3px + 25px; */
left:0;
}