Some CSS help required

Associate
Joined
20 Sep 2003
Posts
2,384
Location
Scotland
Just started working on a new website idea of mine and using CSS to position the navigation bar but having problems aligining it wwith the rest of the site.

The page in question is http://rdoyle.info/v2

As you can see the nav bar is is fully adjusted to the left but i want it aligned in line with the banner which is centered using margin: 0 auto.

I tried using the postion: absolute; which did align the home button but using this on the other buttons forced them down the way and not inline. Can anyone help me get this sorted?

CSS can be found http://rdoyle.info/v2/layout.css

After this i want to setup rollovers but I'm not sure how this would be done if the images ar set as background images in the CSS, again can anyone explain?


Cheers
 
Well i did think about the list idea but my menu bar and hovers have a slight gradient, afaik using the css list method you can only have solid colour?
 
Ok thanks for your help guys, I've manged to get the list of horizontal buttons but my hove image chnage doesnt seem to be working http://rdoyle.info/v2

Also could you advise how i could make the buttons smaller in width so they are not all the same size. I set the width of the ul li a to 165px but would like to set it individually for each button, how would i do this?
 
So with the CSS liike the following?

Code:
#navbar ul li #home  
{
    width: 130px;
    float: left;
}

#navbar ul li #home a 
{
    font-family: Tahoma;
    font-size: 15pt;
    color: #949494;
    text-decoration: none;
    display: block;
    width: 130px;
    height: 42px;
    line-height: 42px;
    background-image: url(images/home_up.jpg);
}

#navbar ul li #home a:hover  
{
    background-image: url(images/home_down.jpg);
    color: #ffffff;
}

and the HTML like this:

Code:
<div id="navbar">
<ul>
    <li class="home"><a href="index.html">Home</a></li>
</ul>
</div>
 
got it all sorted guys, thanks for the help though might be posting a few more questions asi work through this little project :)
 
Back
Top Bottom