css center

hey guys...iuv made a nice menu with css

d.nav, a.nav:link, a.nav:visited { align:center; display:block; width:250px; height:25px; float:left}a.nav, a.nav:link, a.nav:visited { display:block; width:80px; height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
a.nav:hover {color:#fff; background:#99b3b4;}

but i cant seem to center it on page ???

{ align:center;


is not valid CSS


{ text-align:center;


this is probably what you are looking for.

Also if you want something to center dont float it to the left, it wont work.

If thats not working create a div such as

.center {
width:100%;
text-align:center;
}

then wrap that around the nav if none of the others worked.

ok it worked but i have my menu like this

page 1
page 2
Page 3
Page 4
Page 5

and i need it to go

page 1 page 2 Page 3 Page 4 Page 5

thats why i used float left :P

d.nav, a.nav:link, a.nav:visited { text-align:center; display:block; width:250px; height:25px; }a.nav, a.nav:link, a.nav:visited { display:block; width:80px; height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:1px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
a.nav:hover {color:#fff; background:#99b3b4;}

try this

d.nav, a.nav:link, a.nav:visited { text-align:center; display:inline; width:250px; height:25px; }

no that didnt work sadly... but then wen i add it like this

}a.nav, a.nav:link, a.nav:visited { display:inline; width:200px; height:20px;line-height:20px; background:#e4ebeb; border:1px solid #616D7E; margin-top:5px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000; line-height:20px; overflow:hidden;}
it makes it in aline but diregards the sizes ect it shoult be :S

i know you did alot of work on it but here is a basic example that might work and you could just edit it to what u need

HTML


<div id="navbar2">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html%20">Button 2</a></li>
<li><a href="link3.html%20">Button 3</a></li>
</ul>
</div>


CSS:


div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;

}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:visited {
color: #CCC;
}
div#navbar2 li a:hover {
font-weight: bold;
color: #FFF;
background-color: #3366FF;
}


Hope some of it helps.

thanks for yours but are you sure there is no way i can make mine work??? even adding white blocks at either side maybe?

Please post your html. Also for you to center your floated links you need to set a width to them and add the widths of each one together and set the containing element to the total width and use margin:auto;

Please post your html. Also for you to center your floated links you need to set a width to them and add the widths of each one together and set the containing element to the total width and use margin:auto;

Thats what i was trying to remember, i need to pay more attention. :p

<a href="index.php?page=update" title="Basic" class="nav style7"><strong>Basic</strong></a>
<a class="nav" href="page2.html" title="??">??</a>
<a class="nav" href="page3.html" title="page 3">Page 3</a>
<a class="nav" href="page4.html" title="page 4">Page 4</a>
<a class="nav" href="page5.html" title="page 5">Page 5</a>


set widths to them??? how

According to my eyes, you have no class called 'nav style7'.

sorry its just nav typo error....

still would be nice to center it lol