Block element inside inline?

Is it even possible?

[rocknbil]

EDIT: This site is gold, thank you createErrorMsg:

Solution [webmasterworld.com]

Edit #2: spoke too soon. :-( IE 6 requires a width for the floated LI's, and since we've no idea what width the text links will be when resized, it leaves a bit of a problem . . .

I did search for this for over an hour, and finally came across the excellent explanation proposed by createErrorMsg. This thread may be removed or left in place for archival purposes . . .

(original problem follows)

Trying to get a navigation row across the top using li, the only way I can control the size of the nav blocks is by setting a to display:block. When I do this, it destroys the inline row and drapes the links down the side. Is there some way around this? I know it works in images but trying to get away from that.

#top_nav { 
 font-size: 11px; /* yeah, I know . . . */ 
 white-space:nowrap; 
} 
#top_nav * { margin: 0; padding:0; } 
#top_nav ul { text-align: center; } 
#top_nav li { 
 display: inline; /* links in row at top */ 
 text-align: center; 
 list-style: none;  
} 
#top_nav a {  
 background:url(nav-bg.gif) top repeat-x;  
 display: block; /* Perfect button size, kills row */  
 line-height:18px; 
 height:18px; 
 width:88px; 
 text-decoration: none; 
} 
#top_nav a:link { color: #204C47; } 
#top_nav a:visited { color: #204C47; } 
#top_nav a:active { color: #FF0000; } 
#top_nav a:hover {  
 color: #132882; 
 background:url(nav-over.gif) top repeat-x; 
} 

<div id="top_nav"> 
 <!-- no white space between elements --> 
 <ul> 
 <li><a id="about_link" href="about.html">About</a></li> 
 <li><a id="join_link" href="join.html">Join</a></li> 
 <li><a id="contact_link" href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

[SuzyUK]

Edit #2: spoke too soon. :-( IE 6 requires a width for the floated LI's, and since we've no idea what width the text links will be when resized, it leaves a bit of a problem . . .

is that still an issue?

[rocknbil]

Thank you Suzy, yes it is.

There are two main problems, which I've discovered after long hours of research here and on other sites:

- Floated elements won't "center up" without setting a width on them.
- If you set a width on them, when the text is resized all sorts of weird things occur - either the text in the nav buttons overflows the buttons (i.e., gets "cut off") or the buttons themselves flow onto two lines, making a chaotic mess of a simple navigation bar.

A similar question is posted here by a new member [webmasterworld.com], directing to this thread in hopes of a positive solution.

The fixed text size (baaaad :-) ) works in IE but FF allows resizing of fixed with text, so it breaks there.

Currently I'm solving it by using images which I hate to do but don't see an way to keep the navigation bar on one line without it breaking the design.

[Tobias2748]

Thanks for the greet rocknbil. How's using images for the navigation bar working out for ya? I've been trying to figure out a different way but am having difficulty with it still. In the mean time, I was curious as to whether you could suggest any good HTML/CSS books or webpages. I'm a college student and am just starting to get my feet wet with xhtml and CSS and being that you're a senior member here, i'm sure you have a lot more experience and some good resources, i hope :). Looking forward to hearing from you, Thanks.

[iamlost]

Did you try floating the block? Works in my tests:

#top_nav a {
background: #ddf url() top repeat-x;
display: block; /* Perfect button size, kills row */
float: left; /* restores row */
line-height:18px;
height:18px;
width:88px;
text-decoration: none;
}

[Tastatura]

How about this - code can use some cleaning up though
(it produces 'tab' like look for horizontal nav
'nonselected' is the class of the current page so it doesn't show active link (or link to itself)
tab link becomes underlined and changes color when mouse is over it...)

#nav {
width: 810px;
list-style: none;
text-align: center;
font-family: verdana;
font-weight: bold;
font-size: 13px;
padding: 0px;
padding-top: 10px;
margin: 0px;
}

#nav li, #nav p{
float: left;
text-align: center;
width: 227px;
margin: 0px;
padding: 0px;
padding-left: 3px;
padding-right: 3px;
color: #0000cc;
}

#nav A, #nav p{
PADDING: 3px 4px 5px 0px;
DISPLAY: block;
text-decoration: none;
}

#nav A:visited{
COLOR: #000000;
}

#nav A:hover{
COLOR: #0000cc;
TEXT-DECORATION: underline;
}

#nav .selected {
border: 1px solid #0000cc;
border-bottom: 1px solid #ffffff;
}

#nav .notselected {
border: 1px none #ffffff;
border-bottom: 1px solid #0000cc;
padding-bottom: 1px;
}

#nav .notselected A{
COLOR: #8181b3;
background-color: #d7d7ec;
}

#nav .notselected A:hover{
COLOR: #0000cc;
TEXT-DECORATION: underline;
}

#nav .none {
width: 338px;
PADDING: 0px 0px 24px 0px;
DISPLAY: block;
text-decoration: none;
border: 1px solid #ffffff;
border-left: 0px none #ffffff;
border-bottom: 1px solid #0000cc;
}

html

<ul id="nav">
<li class="selected"><p>The page I am on</p></li>
<li class="notselected"><A HREF="http://example.com/page.html">some other page</A></li>
<li class="none"></li>
</ul>

[rocknbil]

Tastatura and iamlost, thank you - both apparently are subject to the same issue in post #3: I simply cannot get the entire nav bar to center up, and it exhibits odd behavior when the text is resized. While I didn't think to float the "a" I did float the LI - causing everything to stubbornly hang to the left.