...

View Full Version : Centered ul menu



Excavator
03-01-2009, 06:42 PM
I've run into several uses for a horizontal ul navigation menu that is centered without specifying a width for it. Easy enough to do by percentage centering the ul like this: http://nopeople.com/CSS/menu-h_centered-ul/index.html


I'm messing around with the code quoted below - a ul that has display:inline; li's and centers from inherited text-align:center; it gets from html, body.

What will make the ul enclose the li buttons???

Link to the test site (http://nopeople.com/test/inline_ul.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow:auto;
}
ul#menu {
background: #FFC;
margin: 50px 0 100px; /*just to move it down a bit*/
list-style: none;
}
#menu li {
display: inline;
}
#menu li a:link,
#menu li a:visited,
#menu li a:active {
color: #999;
background: #6C9;
padding: 5px 20px;
text-decoration: none;
}
#menu li a:hover {
background: #C63;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still</a></li>
</ul>
<!--end wrap--></div>
</body>
</html>

effpeetee
03-01-2009, 06:53 PM
Hello Excavator,

Not quite sure what you mean or what you are after. I'm a bit thick tonight.
Can you put it another way?

Frank

Excavator
03-01-2009, 07:10 PM
Hello Excavator,

Not quite sure what you mean or what you are after. I'm a bit thick tonight.
Can you put it another way?

Frank

Hi Frank - that #FFC bar is the ul. It is full width but it does not expand in height to contain the #6C9 buttons which are overflowing top and bottom.

I'm trying to get the cream colored ul to expand in height so it wraps the green buttons.

effpeetee
03-01-2009, 08:26 PM
background: #6C9;
padding: 5px 20px;
text-decoration: none;
}
#menu li a:hover {
background: #C63;
color: #000;
}

#menu{height:50px;}
</style>

adding this helps. Is this what you need.

Frank
</head>

effpeetee
03-01-2009, 09:10 PM
This is very messy but it appears to work. I just don't have the time to tidy it up.:D

Don't laugh too much.

Frank

[CODE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}

* {
margin: 0;
padding: 0;
border: none;
}

#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow: auto;
}

ul{
margin-top: 8px;
}

#menu li a:hover {
background: #C63;
color: #000;
}

#menu {
background: #FFC;
height: 30px;
}

#menu ul li{
margin-top: 120px;
margin: 50px 0 100px;/*just to move it down a bit*/
list-style: none;
}

#menu li {
display: inline;
}

#menu li a:link, #menu li a:visited, #menu li a:active {
color: #999;
background: #6C9;
padding: 5px 20px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still</a></li>
</ul>
<!--end wrap--></div>
</body>
</html>[/CODE]

Excavator
03-01-2009, 09:15 PM
Not quite. Specifying a height just makes the ul taller, the li's still break out the top.
I really don't want to specify a height anyway. The height of the button is determined by font size + bottom/top padding and that is a lot of variables to add up and still expect it to be cross browser compatable.

I can't figure out why it won't take the height of it's content like you would think it should. I mean, I know it's because the content is displayed inline but something has to make the li size the height of the ul, instead of the a:link which is what's sizing it now.

effpeetee
03-01-2009, 09:27 PM
Excavator,

EDIT - Try this instead,


#menu {
background: #FFC;
min-height:5px;

}


What set me on this course was the tag <ul id="menu"> and I could not find a div coded under #menu. Several with other added taglets - li #menu etc. I am not very good at css I must admit. Especially where the combinations are concerned. Still I'll press on but I think you have a better chance than me.:thumbsup:

Carry on Coding. (sounds like a good name for a film.):D

Frank

Excavator
03-01-2009, 09:33 PM
Carry on Coding. (sounds like a good name for a film.):D

Frank

Haha, you should add that to your sig.

There is no div #menu because that is the id of the ul.
ul#menu
No div for this.


Checking out the code you posted now... didn't see it a minute ago.

effpeetee
03-01-2009, 09:48 PM
There is no div #menu because that is the id of the ul.
ul#menu
No div for this.

I didn't realise that one could do that. Live and learn!

Frank

Excavator
03-01-2009, 09:50 PM
I moved things around a bit in your code Frank, it's still not quite what I'm after. The #menu at height:30px; still doesn't contain the buttons and, even if it did... adjusting the ul margin-top and the height of #menu is not going to work cross browser I think.

not working -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#menu {
height: 26px;
margin: 50px 0 100px;/*just to move it down a bit*/
background: #FFC;
}
ul{
margin-top: 3px;
}
#menu li {
display: inline;
}
#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:active {
color: #999;
background: #6C9;
padding: 5px 20px;
text-decoration: none;
}
#menu ul li a:hover {
background: #C63;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still</a></li>
</ul>
</div>
<!--end wrap--></div>
</body>
</html>

effpeetee
03-01-2009, 10:26 PM
This one appears to be expanding with the text. Works the same for me IE8 and FFox 3.1
Windows 7 Ultimate. 32bit.

I've stuck it here. (http://exitfegs.co.uk/horizontalmenu.html)

Frank


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow: auto;
}
ul{
margin-top: 3px;
}
#menu li {
display: inline;
}
#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:active {
color: #999;
background: #6C9;
padding: 5px 20px;
text-decoration: none;
}
#menu ul li a:hover {
background: #C63;
color: #000;
}

#menu {
min-height: 6px;
margin: 50px 0 100px;/*just to move it down a bit*/
background: #FFC;
border: 5px solid red;
}

</style>
</head>
<body>
<div id="wrap">
<div id="menu">
<ul>
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still and four is even longer still </a></li>
</ul>
</div>
<!--end wrap--></div>
</body>
</html>

Excavator
03-01-2009, 11:29 PM
Hmm, IE8 botches it here. So Does FF3.1.
Looks best in IE7 but it's still not expanding the ul.

Using your code, remove the extra long link so it's back to what we started with - <li><a href="#">and four is even longer still</a></li>
Change the border to the background color so it matches - border: 5px solid #FFC;

And it still doesn't look like what I'm after - http://nopeople.com/CSS/menu-h_centered-ul/index.html


To illustrate, change the li padding in both our codes to padding:10px 20px; and see what happens.
In http://nopeople.com/CSS/menu-h_centered-ul/index.html the cream colored menu bar expands with the buttons.
In your code, and mine at http://nopeople.com/test/inline_ul.html, the button gets bigger but the ul stays the same.

harbingerOTV
03-02-2009, 12:18 AM
a different appraoch:
http://codingforums.com/showthread.php?t=126313

effpeetee
03-02-2009, 12:24 AM
My editor is the problem. It is showing me faulty results. Never done that before.

Frank

Off to bed. It's 1230 am here.

Back tomorrow.

Latest effort. (http://exitfegs.co.uk/horizontalmenu.html)

Excavator
03-02-2009, 02:38 AM
a different appraoch:
http://codingforums.com/showthread.php?t=126313
Hello harbinger,
Are you talking about the % centering method like I mentioned when I started this thread?
Easy enough to do by percentage centering the ul like this: http://nopeople.com/CSS/menu-h_centered-ul/index.html
Or is there something else there that I missed?

I already use that method. I'm more interested in why the ul won't act like a div and expand to contain the display:inline; li's inside it.

abduraooft
03-02-2009, 08:56 AM
Have a look at http://www.cssplay.co.uk/menus/centered2.html. They are using the display property wisely, to center the menu items.

Avril
03-02-2009, 09:17 AM
Looks like this is missing, compared to the reference page:



#menu{background: #FFC; overflow: hidden; position: relative; margin: 5px 0 100px;}


Could it be that?

Fisher
03-02-2009, 01:52 PM
Is this what you mean Excavator?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 1000px;
margin: 30px auto;
background: #999;
overflow:auto;
}
ul#menu {
background: #FFC;
margin: 50px 0 100px; /*just to move it down a bit*/
list-style: none;
}
#menu li {
display: inline;
}
#menu li a:link, #menu li a:visited, #menu li a:active {
color: #999;
background: #6C9;
padding: 0px 20px;
text-decoration: none;
font-size:24px;
}
#menu li a:hover {
background: #C63;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="menu">
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still</a></li>
</ul>
<!--end wrap-->
</div>
</body>
</html>


It's your code from the first post, but with the padding set to 0px, not 5px. If you change the font-size, the ul bar matches the height to which you set it.

Excavator
03-02-2009, 04:38 PM
It's your code from the first post, but with the padding set to 0px, not 5px. If you change the font-size, the ul bar matches the height to which you set it.

That's because the ul height is being controlled by the a. It's ignoring the inline displayed li's padding.

Avril
03-02-2009, 04:54 PM
Add the code that's missing in your .css that I mentioned and the bar will expand according to the size of the font.

Cheers!

Fisher
03-02-2009, 04:59 PM
This works in FF3, but not in IE(6). I don't know how it looks in IE7.

I just added a line-height to the <li> tag and hid the overfllow.

test site (http://mytestingsite.info/inline_ul.html)

Excavator
03-02-2009, 05:09 PM
Have a look at http://www.cssplay.co.uk/menus/centered2.html. They are using the display property wisely, to center the menu items.

Wow, a totally different approach. I never think of display:table; ... must be my aversion to tables.
I'd still like to get the ul in my first example to wrap around the li's. Why is it acting like a div that has uncleared floats in it?

Excavator
03-02-2009, 05:15 PM
This works in FF3, but not in IE(6). I don't know how it looks in IE7.

I just added a line-height to the <li> tag and hid the overfllow.

test site (http://mytestingsite.info/inline_ul.html)

That works - Awesomely cool! As long as the top/bottom padding on a is more than the line-height on the li it looks great.
overflow:hidden; is the key to that working.

I'm checking compatabliity now but it seems to be good in everything so far.

Thanks Fisher :)

Excavator
03-02-2009, 06:02 PM
Updated demo at http://nopeople.com/test/inline_ul.html

Excavator
03-02-2009, 08:26 PM
Bah!
IE6 messes up on the overflow:hidden;

Any fix for that? The usual position:relative; seems to have no effect.

effpeetee
03-02-2009, 08:34 PM
Just a quicky.

Is this site (http://fplanque.com/dev/xhtml-css/css-fixing-overflow-hidden-in-ie-ie6-win)any help?

Or maybe this one (http://warpspire.com/tipsresources/web-production/css-column-tricks/).

A long shot. here. (http://www.satzansatz.de/cssd/onhavinglayout.html)

Frank

_Aerospace_Eng_
03-02-2009, 08:41 PM
Try adding this to your CSS

* html #menu li {
display: inline-block;
}

Excavator
03-02-2009, 11:06 PM
Try adding this to your CSS

* html #menu li {
display: inline-block;
}


That has a similar effect in IE6 as this does in FF or IE7:

#menu li {
display: block;
line-height: 25px;
}

I'm really having a hard time figuring out why the ul won't act like a div.

_Aerospace_Eng_
03-03-2009, 03:47 AM
This should help you understand it better.

http://www.maxdesign.com.au/presentation/inline/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum