Forums

sophies

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' 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. (link here to see the full uncut layout : http://www.deliproof.com/test22.jpg )

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;
														}

Thank you so much!

sophies

I cleaned up the code quite a bit with some help from others, but it still doesnt seem to be working...

http://deliproof.com/index2.html

http://deliproof.com/style2.css

TheDoc

Change your nav li to:

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

Though, I should point out that it might not be the best solution in the long run. It depends on how you code the rest of the site.

treehouse : what would you like to learn today?

Forums

New to CSS and having problems