XHTMLboy Posted September 17, 2010 Share Posted September 17, 2010 Hi, today i was making a start in my first website. But then i came accross that i cannot center or do word-spacing with my main navigation. Any help would be appreciated. Below is the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html charset=utf-8" /> <meta http-equiv="X-UA-Compatable" content="IE=Edge" /> <meta name="robots" content="index, follow" /> <title>Home</title> <style type="text/css"> #main-nav { } #Main-nav a{ font-family: sans-serif, serif; text-decoration: none; list-style-type: none; font-size: 17px;} #Main-nav li { display: inline; text-align: center;} #Main-nav a:link { color: #CCC;} #Main-nav :visited { color: #FFF;} #Main-nav a:hover { color: #666;} </style></head><body style="background-color: #0F0F0F;"> <div id="Wrapper"> <ul id="Main-nav"> <li><a href="Index.htm">Home</a></li> <li><a href="Clients.htm">Clients</a></li> <li><a href="Products.htm">Products</a></li> <li><a href="Support.htm">Support</a></li> <li><a href="Blog.htm">Blog</a></li> <li><a href="Contact.htm">Contact</a></li> </ul> </div></body> </html> thanks for looking and hope you find out why i cannot center my navigation links. Link to comment Share on other sites More sharing options...
thescientist Posted September 17, 2010 Share Posted September 17, 2010 give Wrapper margin: 0px auto Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 17, 2010 Author Share Posted September 17, 2010 give Wrapper margin: 0px auto I just created a new id called wrapper and gave it the values margin: 0px auto , but still no change Link to comment Share on other sites More sharing options...
ShadowMage Posted September 17, 2010 Share Posted September 17, 2010 I just created a new id called wrapper and gave it the values margin: 0px auto , but still no change It also needs to have a set width. Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 17, 2010 Author Share Posted September 17, 2010 It also needs to have a set width.Still nothing, i gave it a width of 200px; Link to comment Share on other sites More sharing options...
jeffman Posted September 17, 2010 Share Posted September 17, 2010 Post the whole page again to show the changes. Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 17, 2010 Author Share Posted September 17, 2010 Post the whole page again to show the changes.Ok, here is the new code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="content-type" content="text/html charset=utf-8" /> <meta http-equiv="X-UA-Compatable" content="IE=Edge" /> <meta name="robots" content="index, follow" /> <title>Home</title> <style type="text/css"> #Wrapper { margin: 0 auto; width: 500px; } #Main-nav ul { text-align: center; word-spacing: 30px;} #Main-nav a { font-family: sans-serif, serif; text-decoration: none; list-style-type: none; font-size: 17px;} #Main-nav li { display: inline;} #Main-nav a:link { color: #CCC;} #Main-nav a:visited { color: #FFF;} #Main-nav a:hover { color: #666;} </style></head><body style="background-color: #0F0F0F;"> <div id="Wrapper"> <ul id="Main-nav"> <li><a href="Index.htm">Home</a></li> <li><a href="Clients.htm">Clients</a></li> <li><a href="Products.htm">Products</a></li> <li><a href="Support.htm">Support</a></li> <li><a href="Blog.htm">Blog</a></li> <li><a href="Contact.htm">Contact</a></li> </ul> </div></body> </html> Link to comment Share on other sites More sharing options...
XHTMLboy Posted September 17, 2010 Author Share Posted September 17, 2010 I just relooked at my code and realised the wrapper was with a lower w and renamed it Wrapper. It is now in the center, but HOW did that center it, i just dont see how that could have worked. And how do i put a space in between the links? thanks Link to comment Share on other sites More sharing options...
thescientist Posted September 17, 2010 Share Posted September 17, 2010 have you read the CSS tutorials? Margin is the space up/down/left/right around an element. Setting it to 0px auto means 0 padding on top and bottom, and auto left and right, to self-adjust. Also, you need the width or else the element would have naturally taken up all the available space. (as is the default behavior for block level elements) Link to comment Share on other sites More sharing options...
ShadowMage Posted September 17, 2010 Share Posted September 17, 2010 Setting it to 0px auto means 0 padding on top and bottom, and auto left and right, to self-adjust.It'd be nice if the same thing happened with margin: auto 0px; too....anybody else ever wish that? Link to comment Share on other sites More sharing options...
thescientist Posted September 17, 2010 Share Posted September 17, 2010 good point. I guess we can add ourselves to dreamers and achievers category. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.