For a design that I'm working on, I would like to use unnumbered lists in conjunction with CSS to make 3 centered, horizontal rows of buttons across the top of my page (they're all the same so really I only need to figure out 1). I can get them on a row, but I have issues making the whole thing centered. They all need to be a precise size, so instead of using display: inline; I used float: left;. Obviously, this prevents it from being centered. Below is a link to a screenshot along with my CSS code; any ideas? Alternative solutions? Or should I just ditch the using lists idea entirely?
screenshot (<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v172/lamei/preview.gif">http://img.photobucket.com/albums/v172/ ... review.gif</a><!-- m -->)
CSS
#level1 ul {
height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
list-style: none;
}
#level1 ul li {
float: left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}
#level1 ul li span {
visibility: hidden;
}
HTML
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 1</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 2</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 3</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 4</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 5</span></a></li>
</ul>If they are a presise size (I'm assuming images?) it's tres easy. Alright, define your li tags as being inline, and they'll line up. You're already centering your text, so, change this:
#level1 ul li {
float: left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}
To this:
#level1 ul li {
display:inline;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}I didn't think inlines could be sized.Hmm, you're right ray, I forgot that fact. Well then, this would suffice. Define the width of your list, while floating li, and center the ul.
#level1 ul {
height: 24px;
padding: 0;
text-align: center;
list-style: none;
width:550px;margin:auto;
}
#level1 ul li {
display:inline;
float:left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
border:1px solid #000000;
}
#level1 ul li span {
visibility: hidden;
}
Note: display:inline should be left in, because Internet Explorer will increase the margins if its display:block and floating (I have no idea why). so display:inline; keeps it uniform across browsers.Thanks, it worked. ^^ I did some tests, actually, and it was the width: 550px in the ul that did the trick.
Weird. But oh well, it works, and that's good enough. Thanks again.Originally posted by tzhou
it was the width: 550px in the ul that did the trick. Weird.
That's because the automatic centering margin only works when a width is present. If there is no width, "auto" is zero.Hey. I have the same problem, but I haven't been able to fix it after reading this. Could someone have a look at this for me? The menu in question is at the bottom of the page. I can't centre it (well, actually it appears to be centred in IE but not Firefox...strange). The ul is unimaginatively called 'footer'.
Page (<!-- m --><a class="postlink" href="http://cheers-sendai.com">http://cheers-sendai.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://cheers-sendai.com/cheers6.css">http://cheers-sendai.com/cheers6.css</a><!-- m -->)
(You might notice a lot of bad or redundant code... please try to avert your eyes from that stuff).
Thanks a lot.When I looked at your page in Firefox it WAS centered.Thanks for looking, but actually it isn't centred. It's very close, but it isn't centred. It's aligned to the left of the div that centres the whole page. I don't know if you have the webdeveloper extension for Firefox, but if you do, try outlining the block-level elements and you'll see what I mean.
It's not a big problem, but I would like it centred.#footer {
margin:auto;
width:100%;
padding: 0 0 2px 0;
position:absolute;
bottom:0;
height:10px;
font-size:0.7em;
font-weight:bold;
font-family:Georgia, Times New Roman, Times, serif;
z-index:4;
text-align:center;
background-image: url(_themes/rmnsque/romtextb.jpg);}
#footer ul{text-align:center;}Thank you MstrBob! You're a star!
screenshot (<!-- m --><a class="postlink" href="http://img.photobucket.com/albums/v172/lamei/preview.gif">http://img.photobucket.com/albums/v172/ ... review.gif</a><!-- m -->)
CSS
#level1 ul {
height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
list-style: none;
}
#level1 ul li {
float: left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}
#level1 ul li span {
visibility: hidden;
}
HTML
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 1</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 2</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 3</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 4</span></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><span>Tab 5</span></a></li>
</ul>If they are a presise size (I'm assuming images?) it's tres easy. Alright, define your li tags as being inline, and they'll line up. You're already centering your text, so, change this:
#level1 ul li {
float: left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}
To this:
#level1 ul li {
display:inline;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
}I didn't think inlines could be sized.Hmm, you're right ray, I forgot that fact. Well then, this would suffice. Define the width of your list, while floating li, and center the ul.
#level1 ul {
height: 24px;
padding: 0;
text-align: center;
list-style: none;
width:550px;margin:auto;
}
#level1 ul li {
display:inline;
float:left;
width: 108px;
height: 24px;
background: url("imgs/tab.gif");
border:1px solid #000000;
}
#level1 ul li span {
visibility: hidden;
}
Note: display:inline should be left in, because Internet Explorer will increase the margins if its display:block and floating (I have no idea why). so display:inline; keeps it uniform across browsers.Thanks, it worked. ^^ I did some tests, actually, and it was the width: 550px in the ul that did the trick.
Weird. But oh well, it works, and that's good enough. Thanks again.Originally posted by tzhou it was the width: 550px in the ul that did the trick.
Weird. That's because the automatic centering margin only works when a width is present. If there is no width, "auto" is zero.Hey. I have the same problem, but I haven't been able to fix it after reading this. Could someone have a look at this for me? The menu in question is at the bottom of the page. I can't centre it (well, actually it appears to be centred in IE but not Firefox...strange). The ul is unimaginatively called 'footer'.
Page (<!-- m --><a class="postlink" href="http://cheers-sendai.com">http://cheers-sendai.com</a><!-- m -->)
css (<!-- m --><a class="postlink" href="http://cheers-sendai.com/cheers6.css">http://cheers-sendai.com/cheers6.css</a><!-- m -->)
(You might notice a lot of bad or redundant code... please try to avert your eyes from that stuff).
Thanks a lot.When I looked at your page in Firefox it WAS centered.Thanks for looking, but actually it isn't centred. It's very close, but it isn't centred. It's aligned to the left of the div that centres the whole page. I don't know if you have the webdeveloper extension for Firefox, but if you do, try outlining the block-level elements and you'll see what I mean.
It's not a big problem, but I would like it centred.#footer {
margin:auto;
width:100%;
padding: 0 0 2px 0;
position:absolute;
bottom:0;
height:10px;
font-size:0.7em;
font-weight:bold;
font-family:Georgia, Times New Roman, Times, serif;
z-index:4;
text-align:center;
background-image: url(_themes/rmnsque/romtextb.jpg);}
#footer ul{text-align:center;}Thank you MstrBob! You're a star!