Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple horizontal menu with flexible height? 3

Status
Not open for further replies.
OsakaWebbie

OsakaWebbie

Programmer
Feb 11, 2003
628
JP
I'm trying to bring some old crappy table-layout-style code into the 21st century, but I have a quandry. I want to make a simple horizontal menu (just text - no fancy background graphics or anything) using an unordered list. It has been done a million times before:
Code: 
<ul class="nav">
  <li><a href="somewhere">Somewhere</a></li>
  <li><a href="elsewhere">Elsewhere</a></li>
  ...several more...
</ul>
-----------------------------------------------
ul.nav {
  width:750px;
  background-color:black;
  text-align:center;
  vertical-align:middle;
}
ul.nav li {
  //float:left;
}
ul.nav li a {
  padding: 2px 10px 2px 10px;
  margin: 0;
  display: block;
  color: LightSteelBlue;
  font-weight: bold;
  white-space:nowrap;
}
I don't want to specify a fixed height for the ul tag, because the code is dynamically created, so the number of menu items can change; also, the user might enlarge his font size. I just want the menu items to flow freely within the box, wrapping to two or even three lines as needed, and have the box stay around the contents. But in order to get the list to be horizontal, I have to specify "float:left", and then the black box disappears because it is no longer constrained by the contents.

Any suggestions? This kind of thing was so easy with tables - I really want to do the pure CSS thing, but sometimes it's hard.
 
Sort by date Sort by votes
At least for now, I gave up on using a list - I just put the link tags one after the other inside a div (I also had to give up on "display:block" which was intended to expand the clickable area a little, but it caused the links to stack vertically).

I know I'm supposed to separate content from appearance, but the "proper" convention of using ul/li as the normal markup for menus seems to compete with the "proper" convention of using em for sizes so that the user can adjust the text to their liking. I don't know how people reconcile those two.

I'm still open to good ideas, but at least I have something that works.
 
Upvote 0 Downvote
Rad this: and this: In a nutshell, adding "overflow:auto" to your URL will ensure it always wraps the floats.

Your mileage may vary in IE6 - I sometimes still use the original clearfix for that depending on the circumstances.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Also see chapter 2 of Dan Cederholm's Bulletproof Web Design, where this example is from:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<title>Chapter 2: Scalable Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
	margin: 0;
	padding: 0;
	font-size: small;
	}
#nav {
	float: left;
	width: 100%;
	margin: 0;
	padding: 10px 0 0 46px;
	list-style: none;
	
	}
#nav li {
	float: left;
	margin: 0;
	padding: 0;
	font-family: "Lucida Grande", sans-serif;
	font-size: 55%;
	}
#nav a {
	float: left;
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 8px;
	color: #333;
	text-decoration: none;
	border: 1px solid #9B8748;
	border-bottom: none;
	background: #F9E9A9 ;
	}
#nav a:hover, body#intro #t-intro a {
	color: #333;
	padding-bottom: 5px;
	border-color: #727377;
	background: #fff;
	}
</style>
</head>

<body id="intro">

	<ul id="nav">
		<li id="t-intro"><a href="/">Introduction</a></li>
		<li id="t-about"><a href="about.html">About</a></li>
		<li id="t-news"><a href="news.html">News & Events</a></li>
		<li id="t-sponsors"><a href="sponsors.html">Sponsors and other really long entries</a></li>
	</ul>

</body>
</html>
There are no heights defined. If the user increases the font size, the boxes simply get bigger. this example looks a little funky if you have a lot of menu items, but it might be a good starting point.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Thanks for all the suggestions, everyone! Sorry I was so slow to get back to this - I had other fires to put out.

First I tried Greg's example, simply because it could be tried "as is" in a completely independent html file. I learned the sensitive nature of floats - the border on the first and hovered items caused the following line of items to start to the right of the right-most bordered item. I guess that's what he was talking about when he said that it gets funky with a lot of items - I have a lot of items, so it does get funky. Naturally I can get rid of the border and it would stop doing that, but then upon closer examination I realized that the only new thing it brings to the table (to keep #nav block from collapsing) was that #nav itself has float:left. Since I want it centered, that won't do. That's when it dawned on me that the menu items themselves being float:left is not really what I want, either - yes, I know that was in the code I first wrote, but I was so fixated on the lack of a box that I didn't notice that float:left on the li items nullifies the text-align:center that I have in the ul. I should I have known that, but I hadn't really thought about it. One of those "duh!" moments...

For the record, Dan's point is well taken - if you want to use float:left for something inside a non-floated block, an explicit "overflow:auto" does indeed make the outer part behave - I tried it just to find out.

But Vragabond's suggestion of display:inline did exactly what I need! Somehow I had only run into horizontal menu examples that used float:left to get them to be horizontal, but really, that's a bit of a hack - I wasn't aware of display:inline (I still consider myself a CSS noob), but it seems more in line (no pun intended) with the spirit of using a list element to create the menu, rather than floating things. Plus, every time I use floats I get into trouble - things start jumping around when I don't expect them to. So a floatless solution is sweet.

By the way, I already had padding on the links. I had gotton the impression from some other how-to page that display:block was needed to get the clickable area to include the padding, but at least in Firefox that isn't actually true. (I didn't bother to test other browsers - it's not that important of a point.)

I'll give stars to all three of you - each of you had good ideas, and each of those ideas taught me something. Thanks, everyone!
 
Upvote 0 Downvote
If you find that 'display:inline' doesn't let you style the elements as you like (not all browsers will, for example, let you add top/bottom margin/padding to inline elements), then you could try 'display:inline-block' - it's a hybrid between the two. Of course, you'd need to test this in all your target browsers as well :).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Okay, thanks for the warning. I haven't gotten far enough for such testing yet, but this is not a public site anyway, but a user-authenticated database app - I'm trying to follow good CSS techniques, but if the interface is functional, it doesn't really matter if it won't win a beauty contest. During this code overhaul, I'm also writing the idea of themes (skins) into the functionality, so although I'm providing a starting set of CSS files, the administrator of an individual installation can style it some other way if he wants.

It's hard to break old habits, though - I keep having to remind myself to not put any "presentation" aspects into the markup (or rather, remove what presentation is already there).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
537
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
630
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
655
pmonett
pmonett
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
572
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top