1 reply [Last post]
Last seen: 14 years 47 weeks ago
Joined: 2004-08-17
Posts: 96
Points: 0

I got this navigation codes and put to my standard. I was wondering how do I center the navigation that has text.

Here is the code:

#nav {
font-size: 100%;
background-color: #49342F;
#nav ul {
padding: 0 0 0 25px;
margin: 1px ;
text-transform: capitalize;
list-style: none;
background-color: #49342F;
#nav ul li {
float: left;
background-color: #49342F;

#nav ul li#last a {
border-right: 1px solid #593D3C;

#nav ul li a:link, #nav ul li a:visited {
display: block;
padding: 11px 20px 10px 20px;
text-decoration: none;
border-left: 1px solid #593D3C;
background-color: #49342F;
#nav ul li a:hover {
color: #FFFFFF;
background-color: 442221;

I want to center it and not have the right side have more space at the end than the left side. So equal space at the both end sizes.

Also, When ever someone already click to go to that page I want that link to stand out with a bold and the background color of #49342F. How would I go about doing that?

Please help me on this.

Thank you

thepineapplehead's picture
Last seen: 3 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Centering navigation

If you give each list item a unique id, and each page give the body a unique id (eg <body id="homepage">), then you can do the following in the css:

body#homepage #nav ul li#home,
body#page2 #nav ul li#page2link,
body#page3 #nav ul li#page3link {

font-weight: bold;
color: color;

Then whenever they are on a page, the corresponding link will be affected.

Verschwindende wrote:
  • CSS doesn't make pies