D&C GLug - Home Page

[ Date Index ] [ Thread Index ] [ <= Previous by date / thread ] [ Next by date / thread => ]

Re: [LUG] OT: Drop-down menus in webpages

 

At Fri 09 Jan 2009 23:30:56 UTC, Grant Sewell <dcglug@xxxxxxxxxxxx> wrote:

> Grant Sewell wrote:
>> Anthony Williams wrote:
>>
>>> You don't need JavaScript (except for IE compatibility) --- you can do
>>> it all with CSS. I wrote an article on this a couple of years ago:
>>>
>>> http://www.justsoftwaresolutions.co.uk/articles/css_menus.html
>>>
>>> There's a sample menu at
>>>
>>> http://www.justsoftwaresolutions.co.uk/articles/sample_menu.html
>>>
>>> Anthony
>>>
>> Fantastic!
>> I'll have a go at this.
>> Thank you. :)
> Brilliant tutorial! It works, for the most part, but I'm having a little
> trouble figuring out why the drop-down menu isn't placed where it would
> logically be placed... ie, directly under the first-level menu item.
>
> If I comment-out a part of my template's css, I can get the menus to
> behave themselves, but they're in the wrong place
> (www.grantsewell.co.uk/index3.html). With my template's css code in
> place and complete, the top-level menus are in the right place but the
> drop-down has a large gap (www.grantsewell.co.uk/index2.html).
>
> Any thoughts?

Your "default.css" has:

#header ul {
padding:82px 0pt 0pt;
}

This overrides the style for ".navmenu ul" since it is ID specific  
rather than class specific. The nested UL used for the menu therefore  
has 82px top padding.

If you use "#header .navmenu" as the selector above, it only applies  
to the top-level UL in the menu, but the drop-down then overlays the  
menu heading, since the padding in the drop-down is cancelled out by  
the padding in the top-level UL.

Padding and Margins are funny things. You're probably better off  
sticking the menu in a DIV, and putting a margin or padding on that.

Anthony
-- 
Anthony Williams
Author of C++ Concurrency in Action | http://www.manning.com/williams
Custom Software Development | http://www.justsoftwaresolutions.co.uk
Just Software Solutions Ltd, Registered in England, Company Number 5478976.
Registered Office: 15 Carrallack Mews, St Just, Cornwall, TR19 7UL, UK



-- 
The Mailing List for the Devon & Cornwall LUG
http://mailman.dclug.org.uk/listinfo/list
FAQ: http://www.dcglug.org.uk/linux_adm/list-faq.html