Home/ Questions/Q 8323875
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T23:51:33+00:00

Having a small problem with css, new on this website and wondering if someone

  • 0

Having a small problem with css, new on this website and wondering if someone could help me :),

I am trying to get the menu images to show next to eachother, but at the moment they are still being displayed below eachother.

this is the css for it, I know some is not being used but I am trying to follow a tutorial at the moment this one: http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/

I am on 14 minutes 23 seconds..

this is my css

 * { margin: 0; padding: 0; }
 html { overflow-y: scroll; }
 body { font: 62.5% "Helvetica", sans-serif;
 background: url(body-bg.jpg) top left repeat;}

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; }
/* END RESET */


/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */
#page-wrap {
width: 654px;
margin: 0 auto;
}

ul#nav {

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

}
ul#nav li.articles a {
    width: 200px;
    background:url(nav-articles.jpg)bottom center no-repeat;
    }

ul#nav li.downloads a {
    width:287px;
    background:url(nav-downloads.jpg)bottom center no-repeat;
}
ul#nav li.videos a {
    width:167px;
    background:url(nav-videos.jpg)bottom center no-repeat;
}

/* END STRUCTURE */

this is my html

<body>


<div id="page-wrap">


<img src="header.jpg" alt="mockup header" />


    <ul id="nav">
        <li class="articles"><a href="#">Articles</a></li>
        <li class="videos"><a href="#">Videos</a></li>
        <li class="downloads"><a href="#">Downloads</a></li>
    </ul>

<p>Main Content</p> 


<div id="sidebar">
</div>    

</div>

<div id=footer">
</div>


</body>

Thanks again for any help!!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe setting the a tag within the li to display: block is doing it. I’d suggest removing display:block from:

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

}

    Or, you could add float:left to that declaration – that’s where I see the difference between yours and the code in the link you posted.

    • 0