Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › New to CSS and having problems

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 14, 2008 at 12:58 pm #23565
    sophies
    Member

    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 #51129
    sophies
    Member

    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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.