Best way to align floated ul's in divs?

drop down menu

[wellgahlee]

I have a div that contains a page header that is an image and therefore has a fixed width (777px).

I have another div that includes the navigation menu (which is the horizontal menu with dropdowns featured on the Tanfa site).

My problem is that the menu's width seems to be based on amount of text that I have on the menu. And depending on what browser someone is using and their fonts available that width could vary.

What is the best way to get the elements within these two divs to align?

Thanks!

Here is the relevant css:

#header {
background-color: #5d7e9d;
width: 777px;
}

#menu {
width: 100%;
background-color: #f5c750;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 110px; /********** note, on tanfa tutorial they set this width in ems, but that didn't work for me very well ******************/
float: left;
}

[sgietz]

From the looks of it, you could just wrap the menu in another div and set that to whatever width you want, or why not just set the width of the menu div to a fixed size instead of 100%?

[SuzyUK]

hehe, don't know who that tanfa person is ;)

Those menus where built to built to be fluid so all you really want to do is fix the width or at least make the background color stretch the full width so that it looks the same..

I presume you want to make it 777px wide the same as the header? if so you could

1. wrap the whole layout (or at least the header and menu) in a 777px wide container then float the #menu div at 100% wide this will make it stretch vertically to contain the floated uls and will give the appearance of being full width

2. say you have 7 floated menus (ul's) make them 111px wide 7 * 111 = 777px

option 1 will cover the illusion whereas option 2 requires very specific menu qty's and sizing

if that's not it or I've misunderstood let me know

Suzy

[edited by: SuzyUK at 7:22 pm (utc) on Mar. 7, 2007]

[wellgahlee]

Suzy,

would the css for your option number 1 look like this:

#container {
width: 777px;
}

#header {
background-color: #5d7e9d;
width: 777px;
}

#menu {
float: left;
width: 100%;
background-color: #f5c750;
}

Thanks for the help!

[wellgahlee]

Suzy,

Well that definitely fixed it! What a wonderful resource this place is!

Here's another question for you.

On your dropdown menus, how can I get around the fact that if I wanted one menu to be a link to itself and not have a drop down menu associated with it, it does something funny with that link? The menu part (the color bar) is taller than the rest and it sticks out and does not look right.

I hope I am explaining this clearly. Thanks

[SuzyUK]

YW, wellgahlee glad it helped..

your second question depends on if you're using the h2 headers for your top level text.. if so you should you will need to nest the link inside it.. then color, size, pad the top level links to match the exisiting h2's..

there is no top level link styling in my sample code so if you're still using it as is.. the top level link will be picking up any padding/coloring from the child level links which migt not suit what you would like it to be

could you post the HTML code for one list with a drop down and then all your css for the menu.. it's had to explain, Though I think I understand exactly what you're asking I just want to be sure and it depends on your existing CSS

Suzy

[edited by: SuzyUK at 11:09 pm (utc) on Mar. 7, 2007]

[wellgahlee]

Yes, that sounds like what I am doing with the H2s:

<ul>
<li><h2>Home</h2>
<ul>
<li><a href="index.html">Index</a>

</li>
</ul>
</li>
</ul>

It's a little redundant to have a drop down for the "Home" link as "Index," but that is what I have done as a band-aid cure because of the problem I described. I would much rather just have "Home" be the link and not have a dropdown...

Here is the menu css which should be pretty much unchanged from your tutorial with the exception of some comments I added to help make things clear for me.

*********

#menu {
float: left;
width: 100%;
background-color: #f5c750;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 110px;
float: left;
}

#menu a, #menu h2 {
font: 10px/14px arial, helvetica, sans-serif;
display: block;
text-align: center;
margin: 0;
padding: 2px 3px;
}

#menu h2 {
color: #323264; /*************** color of text on menu ************/
background: #f5c750; /************** color of menus ***********/
text-transform: uppercase;
}

#menu a {
color: #000; /************* text color **************/
background: #f5c750; /*********** drop down cell color ***********/
text-decoration: none;
}

#menu a:hover {
color: #d92c37;
background: #f5c750; /************* drop down rollover color ***********/
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

[SuzyUK]

hi wellgahlee

ah I see.. it should be quite easy..

#menu a, #menu h2 {
font: 10px/14px arial, helvetica, sans-serif;
display: block;
text-align: center;
margin: 0;
padding: 2px 3px;
}

That rule is applying padding to both the <a> and the <h2> so in the case where you want to nest an anchor inside the h2 it's going to apply the padding twice.. it doesn't matter about the other properties they're not going to be any harm by being applied twice. So you need to remove padding from the link but only when it's inside an h2 add a rule which overrules the first one

#menu h2 a {padding: 0;}

Suzy

[wellgahlee]

Ahh!

I had no idea that it was assigning those values twice!

I'm trying to wrap my head around that concept.

Thanks very much for the help!