I want to change my css for a nav bar that currently uses the last-child selector to using the first-child to cover up a padding gap and therefore make it more cross-browser compliant. I know I should switch the coding around to change the first one instead of the last one but the problem is that the absolute positioning currently holds the position to the left, leaving the gap to the right. Any ideas?
#navigation {font:1.6em Verdana,Geneva,sans-serif; position:absolute; top:103px;}
#navigation ul {list-style:none;}
#navigation span{ position:absolute; left:-15px; top:5px; width:15px; height:100%;
background-color:#647484; background-image:url(images/navshadow.png); background-
position:right top; background-repeat:repeat-y}
ul.dropdown li{z-index:3; font-weight:normal; float:left; zoom:1; background:#647484;
padding:12px 16px; position:relative;}
ul.dropdown li:last-child{padding-right:20px;}
Add position: relative to the #wrapper div and change the ul.dropdown style to the following:
ul.dropdown {
font: 1.6em Verdana, Geneva, sans-serif;
position: absolute;
top: 77px; /*this has changed*/
list-style: none;
background-color: #647484; /*add this */
left: 0; /*add this */
right: 0; /*add this */
}
For a cleaner code, you may now want to remove the background colours from the child li elements.
JSFiddle: http://jsfiddle.net/zyKDf/4/
You could simply put a fixed width + background color on your UL:
http://jsfiddle.net/zyKDf/3/
Related
I'm using floats and trying to keep each one of three buttons in a navigation menu to ~33.3% so that it fills the screen and doesn't break when the window size shrinks, nor should it leave gaps on the ends when the browser window gets wider.
Here is a fiddle http://jsfiddle.net/xxd1vdcj/1/
<div id ="nav">
<ul>
<li id="dawn" >Tradition</li>
<li id="dusk" >Styles</li>
<li id="night">Contact</li>
</ul>
</div>
#nav ul li{
display:block;
//width:19.3%;
width: 33%;
line-height: 3em;
margin:0 auto;
padding:0;
text-align:center;
float:left;
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
color: #b0c4ff;
font-size: 18px;
margin-top: 140px;
opacity: 1;
border: 1px solid black;
}
As I've said in my comment, <a> is not a valid <ul> children.
100/3 = 33.333.. but you used 33% which on larger screen sizes encounted for the 1px (up to 6px) for your three LI widths, than once you resized your page, the remaining availiable width % was not enough to contain the fixed (1px) border width, leading to a LI breaking beneath to the nearest available space.
using box-sizing
Some box-sizing will fix your issue of borders adding up the available space.
*{margin:0; padding:0;} /* Global reset (also to remove 8px margin from Body) */
#nav ul{
display:block;
margin:10px;
margin-top: 140px;
}
#nav ul li{
box-sizing:border-box;
border: 1px solid black;
display:block;
float:left;
width: 33%;
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
http://jsfiddle.net/xxd1vdcj/5/
Now you can even go using 33.333% for your LI width.
using display:table and table-layout
Since box-sizing is not supported by older browsers you can go and use this simple solution:
*{margin:0;padding:0;}
#nav{
margin:10px;
margin-top: 140px;
}
#nav ul{
display:table; /* Table!! yey */
width:100%;
table-layout: fixed; /* To fix LI widths */
}
#nav ul li{
border: 1px solid black;
display: table-cell; /* Note */
line-height: 3em;
text-align:center;
color: #b0c4ff;
font-size: 18px;
}
which excels at what tables are born for!
http://jsfiddle.net/xxd1vdcj/7/
I want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...
Here's my fiddle
Much appreciated
If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :
Add position:relative; to .nav li
Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after
FIDDLE
You seem to be adding the :after content in two places which seems excessive.
Since you only want in on active 1i you can strip down your code as follows:
CSS
nav ul {
list-style: none;
margin-top: 1.25em;
}
nav ul li {
display: inline-block;
position: relative;
}
nav li a {
color: black;
text-transform: uppercase;
text-decoration: none;
padding: 1em 1.25em;
width: auto;
}
nav li.current a, nav li a:hover {
text-decoration: underline;
}
nav li.current:after {
background-color:black;
content: "";
height: 1em;
position: absolute;
left:0;
top: 100%;
width: 100%;
}
JSFiddle Demo
I'm trying to achieve the separator effect using border-right on my menu.
Here's my css code
ul.navigation li a {
text-decoration:none;
float:left;
width:252px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:45px;
color:#000;
position:relative;
border-right:1px solid #333;
}
ul.navigation li a:last-child {
border:none;
}
What am I doing wrong? I tried border-left and :first-child too.
I am thinking you mean to do this
ul.navigation li:first-child a
Because every a is the first child of its parent li. You mean the a inside the first li item. :)
Your CSS snippet is full of bad practices.
Below is an example of how you should style it and how you can add a separator between each list item.
.navigation { overflow: hidden; } /* Explanation 1 */
.navigation li { float: left; }
.navigation li + li { /* Explanation 2 */
border-left: 1px solid #333;
}
.navigation li a {
display: block;
width: 252px; /* Explanation 3 */
padding: 5px 0; /* Explanation 4 */
background-color:#ccc;
color:#000;
text-align:center;
}
Float containment: read this article.
Here I answer your question: applies a border left from the 2nd li to the last one, using the adiacent sibling selector +.
Are you sure you want to have a fixed width?
No fixed height and line-height to vertically align the text. line-height doen't need a unit by the way. Read this article.
Here is a live example: http://dabblet.com/gist/4968063
I am trying to put this css menu together but I couldn`t get it working right. When you go over any link in top menu it opens up second menu although second menu disappears when you go on it. Plus, its misplaced. I couldn't place it in left:0
http://tinyurl.com/7rxskdj
#menu {width:800px;background-color:#FFF;min-height:30px;border:0;border-top:2px solid #8BD2E4;padding:0 5px;margin:0 auto;}
#nmenu {list-style:none;padding:0;margin:0;width:700px;}
#nmenu li {display:inline;float:left;height:20px;margin-left:45px;position:relative;}
#nmenu li.frst {margin-left:0}
#nmenu li a {font: 11px/30px Tahoma, Geneva, sans-serif;text-decoration:none;color:#979598;letter-spacing:2px;font-weight:bold;text-transform:uppercase;}
#smedia {width:100px;height:30px;float:left;}
#fb, #tw, #pt {background: #FFF url(smedia.png) no-repeat center;width:16px;height:16px;display:block;float:right;margin:7px 3px;}
#fb {background-position: -1px -1px;}
#tw {background-position: -18px -1px;}
#pt {background-position: -35px -1px;}
#nmenu li ul {display:none;position:absolute;top:30px;left:0;border:1px solid red;background-color:#FFF;}
#nmenu li:hover ul {display:block}
#nmenu li ul li {float:left;width:100px;}
try the below css:
#nmenu li {
display: inline;
float: left;
margin-left: 44px;
position: relative;
}
#nmenu li ul {
background-color: #FFFFFF;
border: 1px solid red;
display: none;
left: -5px;
padding: 0;
position: absolute;
top: 30px;
}
#nmenu li a {
color: #979598;
display: block;
font: bold 11px/30px Tahoma,Geneva,sans-serif;
letter-spacing: 2px;
padding-left: 2px;
text-decoration: none;
text-transform: uppercase;
}
To fix the disappearing menu: Add 5px bottom padding to your top level anchors which will remove the gap between elements.
The 'misplaced' problem is due to the default padding and margins on the ul and li elements. Explicitly set the margins and padding to position them.
You're applying a height to your list item instead of your link item inside your li, so move the height and also apply a line-height to your a tags that matches the height of your menu block and then you can simply reposition your submenu to appear exactly 100% from your menu item, like so:
CSS
#nmenu li a {
height:30px;
line-height:30px;
display:block;
}
#nmenu li ul {
top:100%;
}
Your absolute positioning leaves a gap between the container <li> and the <ul> child element. Decrease the value for "top" on #nmmenu li ul {}.
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?