- This topic is empty.
-
AuthorPosts
-
November 14, 2008 at 12:58 pm #23565sophiesMember
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: https://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.
(image no longer available)
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!
November 14, 2008 at 2:48 pm #51129sophiesMemberI cleaned up the code quite a bit with some help from others, but it still doesnt seem to be working…
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.