- This topic is empty.
-
AuthorPosts
-
June 21, 2009 at 11:10 am #25222mpenguinMember
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:
[img]http://images.dr3vil.com//files3/245/target_header.jpg[/img]
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:
And here’s the CSS I have for it so far (doesn’t include the rest or global styles.
Code: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.June 21, 2009 at 12:18 pm #59426lookslikepatMemberOk, 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…
Code:#lowersitenav li {
display:inline;
float:left;
height:38px;
width:77px;
}#lowersitenav li a {
display:block;
height:100%;
text-indent:-9999px;
width:100%;
}[img]http://elundmark.se/filer/1245600172781.png[/img]
Code:/* 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 >>> */June 22, 2009 at 5:04 am #59503mpenguinMemberAwesome, 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!
June 24, 2009 at 4:56 pm #59644lookslikepatMemberYa welcome :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.