[ Date Index ] [ Thread Index ] [ <= Previous by date / thread ] [ Next by date / thread => ]
At Sat 10 Jan 2009 22:56:52 UTC, Grant Sewell <dcglug@xxxxxxxxxxxx> wrote:
> Anthony Williams wrote:
>> 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.
>>
> Any suggestions on how to make it class-specific and what I'd need to
> modify in my HTML to make it still do what it's supposed to (ie have the
> menu bar appear along the green line) and still let the menus pop-down?
By ID-specific, I mean that your header DIV has "id=header" in the
HTML, and the style uses #header to refer to it. You can change that
to be class-specific (which therefore applies to all elements with the
same class) by using "class=header" on the element and ".header" in
the CSS.
Anyway, I'd remove the styling for "#header ul" from the stylesheet
and wrap the .navmenu UL element in a new DIV, with an ID of headernav:
<div id="headernav"><ul class="navmenu">...</ul></div>
Then add the following styles:
#headernav {
float:right;
margin-top:82px;
}
#headernav ul ul {
margin:0;
padding:3em 0 0;
}
That should fix things (at least in Firefox, I haven't tested in IE).
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