...

View Full Version : New to CSS - having trouble with <ul> and sprites



sophshep
11-14-2008, 06:18 PM
Hello All,

You might be hearing from me quite a bit because i'm in the process of putting together my first, mostly css site. I am attempting a basic horizontal sprite menu. I have been using Chris Coyier's video tutorial to help me with this: http://css-tricks.com/videos/css-tricks-video-13.php

The problem I am having is that when I preview the page in both firefox and safari, the menu just simply doesn't show up. If I get rid of the float:left tag, it shows up vertically but when I try to make it horizontal, it disappears.

Here is a link to what it is now: http://www.deliproof.com/index2.html

And this is the image of what I would like it to eventually look like : http://www.deliproof.com/test22.jpg

Any pointers (with anything at all!!) would be greatly appreciated.

Below is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
<style type="text/css">

</style>
</head>

<body>

<div id="page-wrap">

<ul id="nav">
<li class="collective"><a href="#">Collective</a></li>
<li class="stuff"><a href="#">Our Stuff</a></li>
<li class="about"><a href="#">About</a></li>
<li class="special"><a href="#">Sophie</a></li>

</ul>

</div>

<div id="footer">
</div>



</body>
</html>


And this is my CSS code:


@charset "UTF-8";
/* CSS Document */

* { margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {font: Georgia, "Times New Roman", Times, serif;
background: url(images/body-bg.png) repeat-x top #000028; }

ul { list-style: none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a {outline: none; }
a img {border: none; }

.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}

#page-wrap {
width: 1000px;
margin: 0 auto; }

ul#nav {
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 62px;
text-indent: -9999px;

}
ul#nav li.collective a {
width:238;
background:url(images/nav_collective.png) no-repeat bottom center;
}
ul#nav li.stuff a {
width:166;
background:url(images/nav_stuff.png) no-repeat bottom center;
}

ul#nav li.about a {
width:118;
background:url(images/nav_about.png) no-repeat bottom center;
}

ul#nav li.special a {
width:136;
background:url(images/nav_special.png) no-repeat bottom center;
}
ul#nav li a:hover {
background-position: center center;
}


Any help at all would be very very appreciated - even if it has to do with the rest of the site! thanks!!!

jerry62704
11-14-2008, 06:40 PM
ul#nav li a {
display:block;
float:left;
height:62px;
text-indent:-9999px;

That's your killer. It's there, but so far to the left that you can't see it.

sophshep
11-14-2008, 06:50 PM
I seem to have the problem even without that:

here is the url to the page:

http://deliproof.com/index2.html

and to my updated css:

http://deliproof.com/style2.css

also - any idea as to why the header isn't showing up?

thank you so much for your help!

drhowarddrfine
11-14-2008, 07:10 PM
Change background-image to just background

jerry62704
11-14-2008, 07:25 PM
Here is the corrected css:


@charset "UTF-8";
/* CSS Document */

* { margin: 0;
padding: 0; }

html {overflow-y: scroll; } /* this is css 3 level - do you really want that? */

body {font-family: Georgia, "Times New Roman", Times, serif;
background: url(images/body-bg.png) repeat-x top #000028; }

ul { list-style: none inside;}

p {font-size: 1.2em;
line-height: 1.2em;
margin-bottom: 1.2em;
}

a {outline: none;}

a img {border: none;}

.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}


#page-wrap {
height: 356px;
width: 1000px;
margin: 0 auto;
background-image: url(images/header.png);
background-repeat: no-repeat;
}

#nav {
}

#nav li {
display: inline;
}

#nav li a {
display: block;
height: 62px;
float: left;
}

#nav li a:hover {
background-position: center center;
}

.collective {
width:238px;
background:url(images/nav_collective.png) no-repeat bottom center;
}

.stuff {
width:166px;
background:url(images/nav_stuff.png) no-repeat bottom center;
}

.about {
width:118px;
background:url(images/nav_about.png) no-repeat bottom center;
}

.special {
width:136px;
background:url(images/nav_special.png) no-repeat bottom center;
}


I fixed some errors and removed the MANY tabs and made the classes generic. Try this and see if the fixes help.

sophshep
11-14-2008, 07:36 PM
Jerry -

first of all, thank you so much for your help. I entered in your CSS and the navigation is still not visible! I'm not sure what is wrong.

The updated links are

http://deliproof.com/index2.html (the header looks much better now)

and

http://deliproof.com/style2.css


Thank you again!

tomws
11-14-2008, 09:00 PM
I was able to get this code to show the menu in FF3 and IE7. Used this (http://www.finalwebsites.com/tutorials/css-navigation-bar.php) as the foundation for the horizontal list nav and commented out your css where it conflicted. Also, I added the text links back in and used the negative text-indent, which aren't necessary I suppose. I didn't do anything trying to make the animation work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
rset "UTF-8";
/* CSS Document */
* { margin: 0;
padding: 0; }

html {overflow-y: scroll; } /* this is css 3 level - do you really want that? */

body {font-family: Georgia, "Times New Roman", Times, serif;
background: url(http://deliproof.com/images/body-bg.png) repeat-x top #000028; }

/*ul { list-style: none inside;}*/

p {font-size: 1.2em;
line-height: 1.2em;
margin-bottom: 1.2em;
}

a {outline: none;}

a img {border: none;}

.floatleft {float: left;}
.floatright {float: right;}
.clear {clear: both;}


#page-wrap {
height: 356px;
width: 1000px;
margin: 0 auto;
background-image: url(http://deliproof.com/images/header.png);
background-repeat: no-repeat;
}

#nav {
list-style-type:none;
}


#nav li {
/*display: inline;*/
float:left;margin:0 2px;
}

#nav li a {
display: block;
height: 62px;
/*float: left;*/
text-indent:-9999px;
}

#nav li a:hover {
background-position: center center;
}

.collective {
width:238px;
background:url(http://deliproof.com/images/nav_collective.png) no-repeat bottom center;
}

.stuff {
width:166px;
background:url(http://deliproof.com/images/nav_stuff.png) no-repeat bottom center;
}

.about {
width:118px;
background:url(http://deliproof.com/images/nav_about.png) no-repeat bottom center;
}

.special {
width:136px;
background:url(http://deliproof.com/images/nav_special.png) no-repeat bottom center;
}
</style>
</head>

<body>


<div id="page-wrap">

<ul id="nav">

<li class="collective"><a href="#">collective</a></li>
<li class="stuff"><a href="#">stuff</a></li>
<li class="about"><a href="#">about</a></li>
<li class="special"><a href="#">special</a></li>

</ul>

</div>

<div id="footer">

</div>


</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum