I have a menu with nested ULs. Is there a CSS-only way to have the vertical border stay the height of the tallest set of menu items? Keep in mind, this menu is dynamic so both the width and height can change.
http://jsfiddle.net/simply_simpy/Kmyjr/
You could remove the float:left rule and add in a display:table-cell rule.
jsFiddle example.
CSS:
#menu-secondary_menu > li {
border-left: 1px solid #7d7d7d;
display: table-cell;
font-size: 9px;
line-height: 16px;
text-transform: uppercase;
color: #7d7d7d;
padding: 0 10px 0;
margin: 0 10px 0;
}
Related
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>
Basically I'm making some buttons but even through I put the width as auto and set padding, the list still extends 100% of the page. I don't want to set the width in pixels, I just want to set the padding either side.
Can anyone please explain where I have gone wrong:
http://jsfiddle.net/spadez/KYdnJ/5/
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
padding: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
List items are similar to block-level elements in that their initial width value is equal to auto so by default they will span the width of their containing block if they aren't given a fixed size. You can either float or change the display value to inline-block; so that their width "shrinks to fit" its content, or you can just give the list-items a fixed width.
http://jsfiddle.net/KYdnJ/8/
You are missing display: inline-block on the list elements. By default they are rendered as block elements, which means they take up 100% of the width of their container.
If I got you right, this is what you want - display: table; on your #nav li css block.
http://jsfiddle.net/KYdnJ/13/
my 2 cents from my earlier comment about margin instead of padding:
http://jsfiddle.net/GCyrillus/KYdnJ/9/
* {
list-style: none;
}
#nav li {
color: #333;
line-height: 28px;
background-color: #F8F8F8;
border: 1px solid #D3D3D3;
margin: 0px 9px 0px 9px;
font-family: arial, sans-serif;
font-size: 11px;
width: auto;
}
#label {
}
#strong {
font-weight: bold;
}
I just need a little help with my CSS:
I As you can see in here http://jsfiddle.net/5crwu/ I have some space between span and ul elements, and I can't find how to lift ul up, closer to the span. I thought margin: 0; will do this, but looks like I'm missing something.
.app-technologies {
width: 200px;
padding-left: 10px;
border: 1px solid black;
}
.app-technologies span {
position: relative;
display: block;
left: 0;
font-size: 17px;
margin: 0;
border: 1px solid black;
}
.app-technologies ul{
list-style: circle;
padding-left: 18px;
margin-top: 0;
border: 1px solid black;
}
If you don't want to remove the <br>, you can give your and NEGATIVE margin. It would be margin:0px 0px -20px 0px;
The negative bottom margin on the span will pull it up.
I just removed the BR after the SPAN, and the "position: relative" from the span styledef. No more space-between.
I have submit buttons or normal buttons of varying width depending upon their values wrapped inside fixed divs. Now the buttons won't center inside the div even after having margin: 0 auto; and display:block; because of the missing width property. How to have them centered without explicitly setting the width for each button ?
input[type="submit"], .button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
cursor: pointer;
margin: 0 auto !important;
clear: both;
padding: 5px 7px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
Set the input[type="submit"], .button {}
to display: inline-block;. Then set the parent div to text-align: center;.
Buttons are inline elements. Is the display:block necessary for other reasons or does anything speak against generally centering all text/inline-elements within the div?
If not, you could assign text-align:center to the div instead and remove display:block from the button.
As a side note, your current style centers the button in FF12. What browser are you using? Edit: Also works in IE9 (jsfiddle).
http://jsfiddle.net/gSaBj/1/
check out this url....
see jsFiddle example here
I'm applying padding-top to an li to try to align the text nearer to the bottom. But it's just making the li bigger, even though there seems plenty of room to fit the text.
Any ideas?
<ul>
<li class="padded">x</li>
<li>x</li>
</ul>
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding: 3px 0 0 0;
text-align: center;
}
I get the same results in IE7 and Chrome, not checked any other browser.
The li.padding is growing larger because you have a height of 25px plus a padding-top of 3px.
The you should decrease the height of the li.padding if you want to increase the top-padding, yet have it remain the same height as the plain list item. So to have a 25px high block with 3px padding-top, you should set the height to 22px with a padding of 3px.
li {
width: 25px;
height: 25px;
border: solid 1px black;
display: inline;
margin: 0 2px 0 0;
float: left;
}
.padded {
padding-top: 3px;
height:22px /* original height (25px) minus padding-top (3px) */
text-align: center;
}