PDA

View Full Version : CSS navigation help


Dinus
June 10th, 2008, 06:33 PM
Hey

I have a navigation bar and I want to align it to the center. I tried to find help on google but nothing worked successfully.
Here's the navigation CSS code;



#navigation { background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}

#navigation ul { list-style-type: none; margin: 0; padding: 0;}
#navigation ul li { display: inline;}
#navigation ul li a { float: left; display: block; width: 101px; color: #fff;
border-bottom: 7px solid #353535; border-left: 1px solid #353535; padding: 30px 5px 10px 5px;}

#navigation ul li a:hover { border-bottom-color: #fff; color: #68b01b;}

If anyone can help me out then great.
ahmednuaman
June 10th, 2008, 06:49 PM
Do you mean have the #navigation block always central? Add this



display: block; position: relative; margin: 0 auto;
Dinus
June 11th, 2008, 05:54 AM
what part of the code do I put it in?
ahmednuaman
June 11th, 2008, 05:57 AM
Add it to here: #navigation { }
Dinus
June 12th, 2008, 07:36 AM
I have added that code but it hasn't changed at all.
Here's the link;
http://novaone.co.uk/magic/tools.html

The navigation bit is where it says; home, about me, photos, videos and contact (which you probably could have guessed :P)
ahmednuaman
June 12th, 2008, 07:38 AM
What's your CSS code now?
Dinus
June 12th, 2008, 04:32 PM
It is now




#navigation { display: block; position: relative; margin: 0 auto; background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}
#navigation ul { list-style-type: none; margin: 0; padding: 0;}
#navigation ul li { display: inline;}
#navigation ul li a { float: left; display: block; width: 101px; color: #fff; border-bottom: 7px solid #353535; border-left: 1px solid #353535; padding: 30px 5px 10px 5px;}
#navigation ul li a:hover { border-bottom-color: #fff; color: #68b01b;}
ahmednuaman
June 13th, 2008, 04:09 AM
Yep that's correct. What's your HTML DTD? Use XHTML 1.1. For more info, read up on: http://www.simplebits.com/notebook/2004/09/08/centering.html
Dinus
June 13th, 2008, 05:08 AM
Okay, it doesn't seem to work though.
I'm not sure what HTML DTD is? Where could I find out?
I checked out that link and it says add this code;



body {text-align: center;}

#container {margin: 0 auto;width: xxxpx;}


ill try this is the #navigation css code.
ahmednuaman
June 13th, 2008, 05:13 AM
Have a read up about DTD and XHTML: http://en.wikipedia.org/wiki/XHTML

This is a simple XHTML 1.1 doc with a centred div:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#container { display: block; position: relative; margin: 0 auto; background-color: #000000; height: 300px; width: 50%; }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div id="container"></div>

</body>
</html>


Preview that in your browser and it should have a centred black box.
Dinus
June 13th, 2008, 05:26 AM
Okay, I have now tried to add



display: block; position: relative; margin: 0 auto;


in the #navigation css code and it doesnt work. Nothing I have tried has worked. I have been able to center the text and also been able to make the navigation display in rows underneath each other but cannot get it centered.
ahmednuaman
June 13th, 2008, 05:27 AM
Did you see my example?
Dinus
June 13th, 2008, 05:32 AM
Yes I used the code off that also.
ahmednuaman
June 13th, 2008, 05:34 AM
Did you change the DTD, that's this bit:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Dinus
June 13th, 2008, 05:39 AM
oh i only using the bit which is in the #container and put it in my css file. Will I need to put the css on the actual page?
ahmednuaman
June 13th, 2008, 05:43 AM
No not at all. The DTD just tells the browser to render it in a certain way, and this allows you to utilise the 'margin: 0 auto' to centralise your blocks.
Dinus
June 13th, 2008, 12:11 PM
Okay so I added that code onto the tools.html page and has made no difference to the navigation section. Only the content, moved the bullet pointed text to the left and is not right. Take a look
http://novoane.co.uk/magic/tools.html
ahmednuaman
June 13th, 2008, 12:14 PM
Is the site meant to be centred?
Dinus
June 13th, 2008, 12:17 PM
Yes the site is I think why
ahmednuaman
June 13th, 2008, 12:26 PM
Ok, so you're trying to centralise your navigation within that bar yea?

Ok, you've got:



<div id="navigation">
<ul>



<li><a href="index.php">Home</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html" id="contact">Contact</a></li>


</ul>
</div>


Change to


<div id="navigation">
<div id="innernavigation">
<ul>



<li><a href="index.php">Home</a></li>
<li><a href="about-me.html">About Me</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="contact.html" id="contact">Contact</a></li>


</ul>
</div>
</div>


Then apply this CSS:



#innernavigation { display: block; position: relative; margin: 0 auto; }
Dinus
June 14th, 2008, 11:16 AM
Done this but no change :S
ahmednuaman
June 14th, 2008, 05:00 PM
You've got:



#innernavigation { display: block; position: relative; margin: 0 auto; }
#navigation { background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}


But #navigation must be a block (relative or not):



#innernavigation { display: block; position: relative; margin: 0 auto; }
#navigation { display: block; background: #000; border-bottom: 18px solid #111111; height: 60px; width: 897px;}
Dinus
June 15th, 2008, 10:28 AM
okay changed that also and still no alteration. Lets face it, it's not gonna work lol.
ahmednuaman
June 16th, 2008, 06:23 AM
You need to set the width of inner nav!
ahmednuaman
June 16th, 2008, 06:24 AM
PS use FF's FireBug, it makes for easy CSS debug
Dinus
June 17th, 2008, 05:51 AM
Is this in the css file because there is no option for width or height.
ahmednuaman
June 17th, 2008, 05:54 AM
You need to add it to your CSS file! If there's no width, it's then set to auto which means that it will expand to it's container's width. If you set it to say, 500px, it'll then centre itself.
Dinus
June 17th, 2008, 01:08 PM
Will I need to replace this bit



margin: 0 auto;


with



width: 500px;
ahmednuaman
June 17th, 2008, 01:29 PM
No, just add it.
Dinus
June 17th, 2008, 01:34 PM
Thanks so much, this has worked :D