Navigation Bar Tabs Displaying Backwards

HTML & CSS
1

Hi all,
My nav bar is literally displaying the tabs in the reverse order, with Home at the far right instead of left to right. I’m certain it has to do with my code. I’ve searched everywhere I know for an answer.

I always have problems remembering what goes at the ul level, the ul li level, the ul li a level, etc. and have yet to find a definitive resource?

Thank you for your time and efforts… so confusing! If I didn’t post in the right place I apologize in advance.

#nav {
	margin: 10px 0 0 0;
	padding: 15px 10px 10px 10px;
	background: #044375;
	border-top: 5px solid #033761;
	height: 18px;
}

#nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#nav ul li {
	display: inline;
	margin: 0 10px 0 10px;
	float: right;
}

#nav ul li a{
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 5px;
}

#nav ul li a.active {
	background-color: #630;
	padding-bottom: 10px;
	margin-top: -5px;
}

<div id="nav">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="solo.html">Solo</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
2

Welcome to SitePoint! :slight_smile:

You’ve got your list items as display:inline and the anchor tags inside those list items as display:block. Haven’t test-driven your code but I guarantee that is causing a problem.

3

Thank you for the welcome and the quick response! Any suggestions on how to fix it? I tried disabling and turning them on one at a time but to no avail.

Like I said navigations with lists are my epic failpoints… :frowning:

4

OK… here are some tips.

When you float something, it’s automatically a block, so the display:inline is superfluous… get rid of it.

I assume what you meant was that, when reading from left to right “home” was the right most button… correct?

to fix this float the LIs left instead of right and then float the UL to the right.

#nav ul li {

margin: 0 10px 0 10px;
float: float;

}

#nav ul {
list-style-type: none;
margin: 0;
padding: 0;

float:right;
}

you may also need #nav{ overflow:hidden; } to clear the floats… then again its also possible that that div#nav is also superfluous and you can get rid of that tag…

I would also consider not using

hope that helps

5

Gah people… the inline-block on the float is probably there to stop the margins from doubling in IE!!! Oh, and D_P, there is no float:float; :smiley:

His problem is so simple. He’s floating the LI right so they’re reversing order. that’s it. Though you’re right, float the LI left and the UL right.

Though since no visual styling is being applied to the LI, I’d strip them of the floats and margins and float the anchors instead. Display:block inside a float can cause issues.

Though with the desire for px space between them with px height, we have to assume px fonts (or the layout’s busted on large font systems) – at which point lose the extra wrapping div that’s in there “for nothing” moving it’s style onto the UL, set text-align, set the li to inline and the anchors to inline-block; – then eyeball decreasing the margin between them. Since it’s margin, I’d just set it on one side only instead of both. (unless you really want the right-most one pushed in… usually you don’t).

6

Just to illustrate:


<ul id="mainMenu">
	<li><a class="current" href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="solo.html">Solo</a></li>
	<li><a href="contact.html">Contact</a></li>
</ul>

Lose the stupid DIV for nothing! UL’s a perfectly good block level container. Also, I hate ‘nav’ – every blasted link on a page is navigation – it’s the same type of vague nonsense as naming your stylesheet “style.css”… Say what it IS! Also, avoid using class names that are the same as psuedo-classes, it gets confusing.


#mainMenu {
	list-style:none;
  margin:10px 0 0 0;
  padding:10px;
  text-align:right;
  font:normal 14px/16px arial,helvetica,sans-serif;
  /* let the 18px line-height do the work */
  background:#044375;
  border-top:5px solid #033761;
}

#mainMenu li {
	display:inline;
	padding-left:16px;
}

#mainMenu a {
	position:relative;
	display:inline-block; /* so it accepts top/bottom padding */
	text-decoration:none;
	padding:5px;
	color:#FFF;
}

#mainMenu .current {
	background:#630;
	padding-bottom:10px;
	top:-5px;
}

negative margins can cause issues with inline-level elements, but position:relative should work.

Untested, but you get the idea. Notice I dropped the 18px height declaration - avoid declaring heights and instead let your padding and line-heights add up to what you want! It’s a lot less headaches cross-browser.

7

Thank you, yes that was it! Like I said, I am always confused on these. I did need the overflow:hidden. If I get rid of the div#nav then where would this code go?

#nav {
padding: 15px 10px 10px 10px;
background: #044375;
border-top: 5px solid #033761;
height: 18px;
}

Haven’t tried the deathshadow60 ideas, will get to that next. I put the negative margins because without it I was getting spaces between the divs. I’m trying to emulate tabs and also have the tab increase in height on the active page.

Sorry about the vague labeling, I thought it was ok since I only have one nav bar on the site, well I guess there is the footer nav. Like I said I’m new. What class name did I use that is a pseudo class?

8

See deathshadow’s example. You place the id on the UL itself. DS is brilliant at cutting down on code, so do look carefully at his example. :slight_smile:

9

I’d use margin-top in that case… or perhaps vertical-align:bottom on all of them. I’d have to play with it.

Don’t take that one TOO hard – I’m a stickler for meaningful names and semantic markup; it’s why I piss on HTML 5 from so on high you’d think the almighty itself was taking a tinkle.

“active”.

There are five link pseudo-states – :active, :focus, :hover, :link, and :visited. “active” is the one used IN THEORY when keyboard/non-mouse navigation has moved it’s cursor to the element – though some legacy browsers use “focus” instead – though focus is supposed to be for when you click on or activate the element; when you click on it, it receives “focus”.

This is why when I have an anchor I’m setting up hover states on, I do all three:

a:active,
a:focus,
a:hover {

As it nabs all possibilities by which someone might select the element.

I never set :link directly, but that’s because ALL of them inherit from the parent anchor. Common mistake people make is re-declaring the same values over and over again on all the states, when if you just say…

a {
/* bunch of stuff here */
}

all the psuedo-states pick up what you set there – then all you have to do with the active, hover, focus and visited is set what you want DIFFERENT.

Classes should be used in much the same manner. You’ll see people doing this idiocy all the blasted time:


<div id="nav">
	<ul id="navUl">
		<li class="navLI">
			<a class="navA" href="#">Home</a>
		</li>
		<li class="navLI">
			<a class="navA" href="#">Links</a>
		</li>
		<li class="navLI">
			<a class="navA" href="#">Forums</a>
		</li>
	</ul>
</div>

When the div probably isn’t needed, the id on the UL is redundant, and NONE of those elements need classes… so basically that mess of markup is doing the job of this:


<ul id="mainMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">Links</a></li>
	<li><a href="#">Forums</a></li>
</ul>

In that way, your applying just “active” was a good thing, just poor choice of a name. Classes and ID’s should be used for what’s unique – never for what’s the same as it’s sibilings. You’re already writing better code than the {nastiest expletive possible about one’s competence omitted} doing things like say… writing skins for turdpress; or even writing major CMS like turdpress, boomla, poopal, or any of the other “off the shelf” trash that’s currently in vogue.

10

Like I said, I am always confused on these. I did need the overflow:hidden.

If you want a better understanding of what you’re doing with the overflow, give the parent of the floats (so in this case, the ul) a background-color, and give each of the floats a different background-color (like, make the ul #ff0 and the floats all #f00) and give the ul some padding all around so you can see it sticking out.

Add overflow: hidden in, and remove it. What you should see is with overflow set, you can see the yellow around the ul, and when it isn’t set, you’ll only see a little bit of yellow (from the padding)… the ul won’t be enclosing the floats, though. The floats will be hanging out of the ul.

So you’ll see that if you don’t need to show the ul (if it’s invisible, has no background images, colours, borders, outlines or anything) and if you don’t need a bottom-margin on the ul to push whatever’s underneath it away, then overflow isn’t necessary. It just makes the ul change the rules it uses to “see” (and therefore enclose) its floated children.

Crusty’s answers in this thread are all spot-on. Awesome.

11

I just finally got back to this forum and :rofl: when I read this. The world of CMS is still unlearned to me, but I got a kick out of the worded references.

Thanks again for the help. :slight_smile: