Forum Moderators: not2easy
I have 10 buttons, created with CSS, each is 105px wide.
I want them to be centered across the page, irrespective of what resolution.
Strangely enough I have it working in IE, but I can't get it to work in FF.
I have spent days working through various horizontal nav tutorials, but they all seem to rely on float: left
Any ideas anyone.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
ul {
padding: 0.4em;
text-align: center;
margin: auto;
border: 1px solid #ff00ff; /* magenta border */
}
li {
display: inline;
padding: 0.2em;
border: 1px solid #ffa500; /* orange border */
margin: 0.1em;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li style="padding: 0.2em 1em;"><a href="">Snal</a></li>
<li><a href="">Nocriant</a></li>
<li><a href="">Pubiner</a></li>
<li><a href="">Iquadop</a></li>
<li><a href="">Snaquad</a></li>
<li><a href="">Ustispon</a></li>
</ul>
</body>
</html>
Thanks.
However, if the window/resolution is too small and the row of buttons is pushed to a second line, then the second row of buttons, ends up being 'left-aligned' rather than centred.
I will keep working on it, and would appreciate any further suggestions.
they all seem to rely on float: left
You can center a horizontal navbar that uses float by wrapping it in a widthed container, and then centering that. Just don't apply any borders or backgrounds to the centering container, since they won't display unless the container is floated, which will prevent it from centering. In other words, the container's only purpose is to center the navbar. For that it needs only a width, auto margins, and text-align center (for old versions of IE).
Here's a test page...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centering a Float-Based Horizontal Navbar</title>
<style type="text/css">
#navbar{
width:300px; /*equal to total of floated links*/
margin:0 auto; /*centers in modern browsers*/
text-align:center; /*centers in old versions of IE*/
}
#navbar ul{
list-style-type:none;
}
#navbar ul li a:link, #navbar ul li a:visited{
display:block;
float:left;
width:100px;
line-height:20px;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:1px solid #000;
color:#fff;
background:#369;
text-decoration:none;
}
#navbar ul li a:link:hover, #navbar ul li a:visited:hover{
background:#963;
}
#first{
border-left:1px solid #000;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li><a id="first" href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</body>
</html>
cEM
Again, that seems to be close to an answer. It looks good in FF but it doesn't seem to work in IE, the 3 buttons are not horizontal.
I will see if I can figure out why.
1) you can do away with the redundant enclosing
divul2) you need to take into account the border widths in your width calculation for the
ul3) you need to specify
display:inline;liwhich goves this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centering a Float-Based Horizontal Navbar</title>
<style type="text/css">
#navbar {
list-style-type:none;
width:310px; /*equal to total of floated links*/
margin:0 auto; /*centers in modern browsers*/
text-align:center; /*centers in old versions of IE*/
}
#navbar li {
display:inline;
}
#navbar li a:link, #navbar li a:visited {
display:block;
float:left;
width:100px;
line-height:20px;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:1px solid #000;
color:#fff;
background:#369;
text-decoration:none;
}
#navbar li a:link:hover, #navbar li a:visited:hover {
background:#963;
}
#first{
border-left:1px solid #000;
}
</style>
</head>
<body>
<ul id="navbar">
<li><a id="first" href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</body>
</html>Note: I put 310px as the width which is a bit too much: you will need to get the exact figure, and then use the box-model hack or equivalent to serve altered values to IE5.x if you are supporting those browsers.
doesn't seem to work in IE, the 3 buttons are not horizontal.
How embarassing. Sorry.
IE uses margins in lists where other browsers use padding. I always zero both out with the universal selector, but negelected to in that test page.
Then to compound the embarassment, I sized the container too small to allow for the width of the <a>nchor and it's borders.
Add margin:0;padding:0; to the #navbar ul selector (margin for IE, padding for FF). Then change the width setting in #navbar to 304px (to allow for the borders). You also need to add...
#navbar li{
display:inline;
}
...to the styles to fix the step-effect that IE creates. After that, it should work as intended.
My apologies. That's what I get for hastily posting without testing the test page, myself. (Now working in IE6/Win and FF. That's all I have available to test in at the moment.)
Thoroughly chagrined,
cEM
Too slow. Thanks, encyclo. A much cleaner version. :)
The second line is invariably 'left-aligned'.
I can get this to work in IE without using any LI or UL, but not in FF.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Centering a Float-Based Horizontal Navbar</title>
<style type="text/css">
#navbar {
list-style-type:none;
width:650px;
margin:0 auto;
text-align:center;
}
#navbar ul {margin:0;padding:0; list-style-type:none; }#navbar li {
display:inline;
}#navbar li a:link, #navbar li a:visited {
display:block;
float:left;
width:100px;
line-height:20px;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-right:1px solid #000;
color:#fff;
background:#369;
text-decoration:none;
}#navbar li a:link:hover, #navbar li a:visited:hover {
background:#963;
}#first{
border-left:1px solid #000;
}
</style>
</head>
<body>
<ul id="navbar">
<li><A HREF="http://www.***********.nl/start.html" class="navbutton">Start</a></li>
<li><A HREF="http://www.***********.nl/koffie.html" class="navbutton">Koffie</a></li>
<li><A HREF="http://www.***********.nl/thee.html" class="navbutton">Thee</a></li>
<li><a href="http://www.***********.nl/chocolade.html" class="navbutton">Chocolade</a></li>
<li><a href="http://www.***********.nl/kens.html" class="navbutton">Kop & schotels</a></li>
<li><a href="http://www.***********.nl/koffiedingen.html" class="navbutton">Koffiedingen</a></li>
<li><a href="http://www.***********.nl/theedingen.html" class="navbutton">Theedingen</a></li>
<li><a href="http://www.***********.nl/diversen.html" class="navbutton">Diversen</a></li>
<li><a href="http://www.***********.nl/links.html" class="navbutton">Links</a></li>
<li><a href="http://www.***********.nl/home.html" class="navbutton">English</a></li>
</ul>
</body>
</html>
