By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,212 Members | 2,209 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,212 IT Pros & Developers. It's quick & easy.

Making an inline list float to the centre

P: n/a
Hi,

I've been trying to get my CSS menu to float to the middle of the page.
As i'm also designing to cater for users with 800 x 600 browsers, i
have split the menu into two lists, this way it'll break onto the next
line rather than forcing the user to scroll sideways.

I can't get the two lists to float centrally,

Any one got any ideas?

In the below code i've tried to force the text to centre using a
containing div, although this pushes the text into the centre, it's
still left aligned as shown by the second menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<ul class="menu" >
<li><a href="#" accesskey="1" title="Home">Home</a></li>
<li><a href="#" title="Test item 1">Test item 2</a></li>
<li><a href="#" title="Test item 2">Test item 3</a></li>
<li><a href="#" title="Test item 3">Test item 4</a></li>
<li><a href="#" title="Test item 4">Test item 5</a></li>
<li><a href="#" title="Test item 5">Test item 55</a></li>
</ul>
<ul class="menu" >
<li><a href="#" title="Test item 6">Test item 6</a></li>
<li><a href="#" title="Test item 7">Test item 7</a></li>
<li><a href="#" title="Test item 8">Test item 8</a></li>
</ul>
</div>
</body>
</html>

..menu
{
padding:0;
margin:0;
color:#fff;
font-family:arial,helvetica, sans-serif;
white-space:nowrap;
list-style-type:none;
text-align: center;
}
ul
{
text-align: center;
}

..menu li {display:inline;}
..menu li a
{
padding:0.2em 1em;
background:#87D300;
color:#000;
text-decoration:none;
float:left;
}
..menu li a:hover
{
background:#08c;
color:#fff;
}
#top {
width: 770px;
text-align: center;
margin: 0px auto;

}

Jul 11 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Ian N wrote:
I've been trying to get my CSS menu to float to the middle of the page.
Adding: width: auto; to the #top styles should center it.
As i'm also designing to cater for users with 800 x 600 browsers, i
have split the menu into two lists, this way it'll break onto the next
line rather than forcing the user to scroll sideways.
...and you shouldn't have to break it into two lists for narrow browsers.
I do something very similar here:

http://www.freezeblock.com/

--
-bts
-Warning: I brake for lawn deer
Jul 11 '06 #2

P: n/a

Beauregard T. Shagnasty wrote:
Ian N wrote:
I've been trying to get my CSS menu to float to the middle of the page.

Adding: width: auto; to the #top styles should center it.
As i'm also designing to cater for users with 800 x 600 browsers, i
have split the menu into two lists, this way it'll break onto the next
line rather than forcing the user to scroll sideways.

..and you shouldn't have to break it into two lists for narrow browsers.
I do something very similar here:

http://www.freezeblock.com/

--
-bts
-Warning: I brake for lawn deer
Thanks for that example!

Ian

Jul 11 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.