[ Date Index ] [ Thread Index ] [ <= Previous by date / thread ] [ Next by date / thread => ]
Anthony Williams wrote:
> 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
>
Thank you, thank you, thank you! It's getting ever closer. I think I can
sort this last bit (I recall your tutorial had a bit about background
colours for the navmenu, which I skipped but now I think I might apply
it. :D). As for IE... let that eat itself. ;)
Cheers.
Grant.
--
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