Some CSS help required

DezUk

DezUk

DezUk

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
 
TBH, Im not sure if your doing it the best way, I may aswel say it now just incase you run into any issues, basically I wouldnt use Position: Absolute. For the menu bar, I would try staying away creating a seperate div for each button, and instead try and contain all your buttons in a container and use lists/unordered lists.If you have a look on the web there are loads of examples on how to create menu bars using CSS lists and unordered lists to make a horizontal menu bar.

For example, on my site, I have the menu bar div which in turn will act as a container for the list/unordered list menu items.
 
Last edited:
Your menu is a list, use a list not divs like you have done and style that with CSS to make it look like it currently does. I.e.:

Code: 
<ul>
<li>home</li>
<li>projects</li>
<li>about</li>
</ul>

As for your fix, you can just add this to your css:
Code: 
#navbar div {
float: left;
}

and get rid of position: absolute;
 
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?
 
DezUk said:
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?
Click to expand...

You can use what ever you want.

All you need to do is have a container div for the list, then in photoshop mock up the menu bar, export this is a jpg and set the menu div to have a background image pointing to the jpg.

Here is my background, although it isnt major photoshopped, but I did create it in photoshop, its got a gradiant applied to it, its the same concept as my blank banner.

www.dmoranda.co.uk/newsite3
 
Here is some example code from mine to help you ;)

CSS
Code: 
#nav{
padding: 0px 0px 0px 0px;
width: 850px;
height: 20px;
background-image: url(images/navbarv2.jpg); 
}


#nav ul {
width: 100%;
margin: 0px auto;
padding: 0px 0px 0px 0px;
text-align: center;

}

#nav li {
display: inline;
list-style-type: none;
padding: 0px 30px 0px 30px;
}		

#nav ul li a{
color: #FFFFFF;
text-decoration: none;
font-family: Lucida Sans Unicode;
font-size: 0.8em;
padding: 0px 5px 0px 5px;
}

#nav ul li a:hover{
		
color: #90E2F5;
		
}



XHTML
Code: 
<div id="nav">
			<ul>
				<li><a href="index.php"> Link1</a></li>
				<li><a href="index2.php">Link2</a></li>
				<li><a href="index3.php">Link3</a></li>
				<li><a href="index4.php">Link4</a></li>
						
				<li><a href="index6.php">Link5</a></li>
			</ul>
</div>
 
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?
 
DezUk said:
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?
Click to expand...

You would add id's to the li's and then target that.

li#nav-home { }
 
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>
 
rollover works fine for me on a mobile browser and i ff, make sure its the same in IE to as my laptop is not fired up
 
DezUk said:
So with the CSS liike the following?
Click to expand...

You have the right idea but you can save yourself a lot of code by using the cascade of CSS.

Code: 
<ul id="mainnav>
    <li class="home"><a href="index.html">Home</a></li>
    <li class="about"><a href="about.html">About</a></li>
</ul>

Code: 
ul#mainnav { overflow: hidden;}
ul#mainnav li { display: inline; float: left;}
ul#mainnav li a { font-family: Tahoma;font-size: 15pt;color: #949494;text-decoration: none;display: block; height: 42px;line-height: 42px; float: left;}
ul#mainnav li.home a { background: url(images/home.jpg); width: 130px;}
ul#mainnav li.about a { background: url(images/about.jpg); width: 150px;}
ul#mainnav li a:hover { background-position: bottom left; color: #ffffff;}

This way, you are specifiying all the common rules for all a elements only once. Then for the li.home a element, you tell it which background and width to use. Then for your next link, you do the same. If you use CSS Sprites, you'll only need one image per link as it'll include default, hover and even selected view states. This removes the quick flash while the browser tries to load your hover image. Also, as all the a element backgrounds would just need to be shifted the same, you only need to specify the hover rules once.

http://www.peachpit.com/articles/article.aspx?p=447210
 
got it all sorted guys, thanks for the help though might be posting a few more questions asi work through this little project :)
 
You must log in or register to reply here.
Back
Top Bottom