Jump to content

Question About Horizontal Menu


solar
 Share

Recommended Posts

w3schools site has top menu with some items sticking to the left side and some to the right. i studied page's code and could see that they made the menu using tables. the space between left side and right side td's is basically one td containing &nbsp.my question, which i couldn't figure out from the page's html and css, is how did they make the non-breaking space td stretch between left and right, basically fitting the remaining space?the code is this:

<tr style="height:20px"><td class="blacknav" style="border-left:none" width="50"><a class="m_item" href="/default.asp">HOME</a></td><td class="blacknav" width="50"><a class="m_item" href="/html/default.asp" target="_top">HTML</a></td><td class="blacknav" width="40"><a class="m_item" href="/css/default.asp" target="_top">CSS</a></td><td class="blacknav" width="40"><a class="m_item" href="/xml/default.asp" target="_top">XML</a></td><td class="blacknav" width="90"><a class="m_item" href="/js/default.asp" target="_top">JAVASCRIPT</a></td><td class="blacknav" width="40"><a class="m_item" href="/asp/default.asp" target="_top">ASP</a></td><td class="blacknav" width="40"><a class="m_item" href="/php/default.asp" target="_top">PHP</a></td><td class="blacknav" width="40"><a class="m_item" href="/sql/default.asp" target="_top">SQL</a></td><td class="blacknav" width="60"><a class="m_item" href="/sitemap/sitemap_tutorials.asp" target="_top">MORE...</a></td><td class="blacknav"> </td><td class="blacknav" width="80"><a class="m_item" href="/sitemap/sitemap_references.asp" target="_top">References</a></td><td class="blacknav" width="70"><a class="m_item" href="/sitemap/sitemap_examples.asp" target="_top">Examples</a></td><td class="blacknav" width="50"><a class="m_item" href="/forum/default.asp" target="_blank">Forum</a></td><td class="blacknav" style="border-right:none" width="50"><a class="m_item" href="/about/default.asp" target="_top">About</a></td></tr>

and i couln't find anything in the csshttp://www.w3schools.com/stdtheme.css

Edited by solar
Link to comment
Share on other sites

Don't quote me on this :) , but I think it's because the table has a specified width...<table width="890"......and the blank td doesn't have a width specified while all the rest of the td's have a width.So, I think that since it's the only column without a width it will fill up whatever space is necessary to attain the table's width.Somebody please correct me if I'm wrong.

Link to comment
Share on other sites

That's exactly correct. Every other td element has a specified width. The empty td has no specified width, so it remains fluid. (It will stretch or shrink.) The non-breaking space gives the element "content" to ensure that it is rendered correctly in all browsers, new and old. (Some browsers would make a completely empty td element look like an empty space rather than a cell. I don't remember which browsers, if any, this remains true for, because I don't make tables in this way anymore.)

Edited by Deirdre's Dad
Link to comment
Share on other sites

thank you for your answers.i tried to do the same thing using a list, with some <li>'s floating to the right and others to the left. but it leaves white space between left and right and i can't figure out how to fill it with color so that it looks like one horizontal menu bar. colors and styles are assigned to <a>, and assigning background color to neither <ul> nor it's container doesn't work. i also tried inserting a list item with   and making it wide enough to reach to the other side, and it kind of solved my problem, but it doesn't fit when resizing windows and also it seems to me like a bad practice.here's how it looks on my pageimage1hv.jpgso, how can i make that white space blue?

Edited by solar
Link to comment
Share on other sites

Your <ul> is probably 0px high, so no background-color displays. Give it a height, and it will. Common practice here is to define the <ul> and <li> elements with the same height (accounting for borders and padding also). If your line-height is the same as the height, the text will vertically center, no matter what font size it is.

Edited by Deirdre's Dad
Link to comment
Share on other sites

I happened to be tweaking a menu the other day, so it was fresh on my mind.I have yet to read a rational explanation why floated elements do not cause their containers' heights to expand. I have never encountered a situation where that worked to my advantage. Whenever I deal with it, I'm finding workarounds.I mean, I've read explanations. But they just sound descriptive. They never say why it's a good idea. It's perfectly understandable that the same thing should happen when an element has been positioned absolutely. But float is a very different thing. IMO.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Your <ul> is probably 0px high, so no background-color displays. Give it a height, and it will. Common practice here is to define the <ul> and <li> elements with the same height (accounting for borders and padding also). If your line-height is the same as the height, the text will vertically center, no matter what font size it is.
tnx!that solved it
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...