Forums

mpenguin

Hi everyone,

I'm a noob trying to teach myself HTML and CSS. I thought that it would be good practice to take apart a website written in HTML 4.0 and tables and convert it to XHTML+CSS divs. I've gotten most of the header done so far and I've hit a wall. Your expertise and advise is appreciated.

First of all, the header has a logo on the left, and then 2 navigation menus on the right, one right underneath each other. Here's what the nav menus should look like:

http://images.dr3vil.com//files3/245/target_header.jpg

Now then, I've created a couple sprites and turned the menus into Unordered Lists. The first one works exactly as I intended using a sprite I made. The 2nd one, however, is not behaving and I just can't figure out why. Here's what mine looks like:

http://dev.morbidpenguin.com/test/

(I know the logo isn't displaying properly - that's on purpose). For whatever reason, I cannot get the sprite in the 2nd nav menu to display properly (should be inline, 38px X 77px each), nor can I get my text-indent to work and kick the text off. I've been playing with it for a couple of hours, but being the noob that I am, it was mostly just changing this, changing that, uploading, viewing, trying again.

Here's the HTML for the 2nd nav menu:


<div id=\"lowersitenav\">
   <ul>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">????</a></li>
	<li><a href=\"#\">???</a></li>
	<li><a href=\"#\">???</a></li>
   </ul>
</div> <!-- End of #lowersitenav div -->

And here's the CSS I have for it so far (doesn't include the rest or global styles.


body {
	background: #737373 url(../images/body-bg.png) repeat-x;
}

#wrap {
	width: 960px;
	margin: 0 auto;
}

#headerlogo {
	float: left;
}

#headernav {
	float: right;
}

#uppersitenav {
	float: right;
}

#lowersitenav {
	clear: both;
}

/* These styles are for the #lowersitenav div */

#lowersitenav li {
	text-indent: -9999px;
	display: inline;
}

#lowersitenav li a {
	background: url(../images/lowersitenav_sprite.png) 0px 0px no-repeat;
	display: block;
}

If you want to view it, I'm sure most of you have Firebug/Web Developer or you can see the whole thing here.

So, any ideas on how I can fix that? Also, any advice on the XHTML or CSS in general is greatly appreciated. I'm learning as I go, so I'm bound to make mistakes.
Thanks.

lookslikepat

Ok, I have a solution for you :)

See the screenshot, if it still doesn't work I must have forgotten something or other...

All the LI's have to be floated, and the text-indent moved to the A inside instead.
Also you need to set a width and height on the LI's, as well as the A inside them ( @ 100% - 100% )
You can still keep display: inline on your LI's as this is good for bugs in IE ( <7 ? )

After this, change your background-position for each of the LI > A to -38px, -76px and so on...

So change the following in your code (I havn't written all of your code here, only the things I changed. So UPDATE your code, and don't replace it ;)

EDIT: Maybe I should add that you have to add unique classes to each A link element in the menu as well, for background-positioning of your sprite. Check the additional code further down...


#lowersitenav li {
	display:inline;
	float:left;
	height:38px;
	width:77px;
}

#lowersitenav li a {
	display:block;
	height:100%;
	text-indent:-9999px;
	width:100%;
}

http://elundmark.se/filer/1245600172781.png


/* This code depends on you already having declared a background-image for all the A elements. */
#lowersitenav a.about {
	background-position: 0px 0px; /* Like it is now, right ? */
}
#lowersitenav a.department {
	background-position: 0px -38px; 
}
/* Then just keep adding, -76px >>> */

mpenguin

Awesome, that worked great! Thanks for the help! I'll have to remember those tips (float the <li> to the left, height and width elements on the <li> <a>.

Thanks again!

lookslikepat

Ya welcome :)

treehouse : what would you like to learn today?

Forums

[SOLVED] Header - floats and li navigation positioning