Log in

View Full Version : 2 line horizontal navigation?


thenerdelite
01-26-2007, 12:05 AM
I'm working on creating a simple horizontal navigation bar (bg and fg change on hover) with an added twist. I'd like the menu to allow two lines of text for each element in the bar. I've tried limiting the width of the elements in an attempt to cause the text to wrap, but that didn't seem to do much. Any thoughts?
jscheuer1
01-26-2007, 06:17 AM
If the elements are block level - like a div or a p, or if they have their display property set to block, making them block level for layout purposes, then giving them adequate height or even just allowing them to expand vertically by not giving them any height property and not containing them within an element with a restrictive height set, then they will wrap if their width is too narrow for the text.
thenerdelite
01-27-2007, 04:05 AM
So, the issue isn't getting an item to wrap as much as it is getting block elements to wrap while being displayed inline.

If I remove the display:inline; element from the CSS definition for the div tag, the div elements wrap as expected. However, when the display:inline element is present in the div tag definition, the div elements in the navigation menu no longer wrap.

So it seems that the display:inline element and the display:block element are mutually exclusive, and I'm looking for a way to somehow combine the two.

I've also tried placing a block style element within an inline element with no different results.

any insight?
jscheuer1
01-27-2007, 05:43 AM
A block level element may be made to appear as if it is inline if floated:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.floater {
width:8em;
height:2.5em;
float:left;
margin-right:1.5em;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div><div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div class="floater">some content that can wrap once</div>
<div style="clear:left;"></div></div>
</body>
</html>
thenerdelite
01-27-2007, 08:04 AM
AHA! Floating the elements worked. Thanks!