...

View Full Version : Error in the menu



far2many
02-23-2011, 09:18 PM
Hello,

I have made a vertical accordian css menu that open on destination page. I have not written the links yet.

My menu is called sidebar and i have the ul.level1 li to underline 1px dotted. However when i open a level 2 menu the dotted line stays under link that contained them instead of and the bottom of the opened list.

This is what it should look like (and does in frontpage which is confusing me more)

http://www.bushcottages.co.uk/how it should be.jpg

Sadly it looks like this

http://www.bushcottages.co.uk/tester.htm

Any help would be smashing :) thanks

Peter

SB65
02-23-2011, 09:52 PM
The problem's with your html - you have:


<li id="down" class="active"><a href="hadrian.htm">Hadrian</a></li>
<ul id="activated" class="level2">
<li class="active"><a href="community.htm">Community</a></li>
<ul class="level3">
<li class="active"><a href="term dates.htm">Term Dates</a></li>
<li><a href="uniform.htm">Uniform</a></li>
<li><a href="bus routes.htm">Bus Routes</a></li>
<li><a href="parental forms.htm">Parental Forms</a></li>
</ul>
<li><a href="Principals Mess.htm">Principals Message</a></li>
<li><a href="Newsletters.htm">Newsletters</a></li>
<li><a href="Mentoring.htm">Mentoring</a></li>
</ul>


which should be:


<li id="down" class="active"><a href="hadrian.htm">Hadrian</a>
<ul id="activated" class="level2">
<li class="active"><a href="community.htm">Community</a></li>
<ul class="level3">
<li class="active"><a href="term dates.htm">Term Dates</a></li>
<li><a href="uniform.htm">Uniform</a></li>
<li><a href="bus routes.htm">Bus Routes</a></li>
<li><a href="parental forms.htm">Parental Forms</a></li>
</ul>
<li><a href="Principals Mess.htm">Principals Message</a></li>
<li><a href="Newsletters.htm">Newsletters</a></li>
<li><a href="Mentoring.htm">Mentoring</a></li>
</ul></li>


So the level 3 ul is within its parent li. That should take care of the dotted line postioning,

Ignore whatever Frontpage does and only trust what your page looks like in a decent browser - for which read not IE....

far2many
02-23-2011, 10:16 PM
Cheers for your help - i have thanked you.

The down arrow that was on the hadrian link has now moved down to the principals message. It was like that already in frontpage but not when on IE, now its like that on both. Any ideas how to get it back where it should be beside hadrian indicating it has expanded?

Thanks again for that help Ive been scratching my head on that for a while so thanks again.:thumbsup:

Peter

abduraooft
02-24-2011, 09:20 AM
#sidebar ul.level1 li.active
{
font-weight: bold;
background: transparent url(downarrow.png) no-repeat right;
}
You haven't specified the vertical position of that background image and thus it take the default center position.
Try

#sidebar ul.level1 li.active
{
font-weight: bold;
background: transparent url(downarrow.png) no-repeat right 1em;
}

Arbitrator
02-24-2011, 10:16 AM
It's worth noting that the initial problem would have been easier to catch had the code been properly indented. It still lacks proper indentation and this is hiding other problems.

Here's the body of your code properly indented:


<div id="sidebar">
<ul class="level1">
<li class="active">
<a href="hadrian.htm" class="down">Hadrian</a>
<ul class="level2" id="activated">
<li class="active"><a href="community.htm">Community</a></li>
<ul class="level3">
<li class="active"><a href="term dates.htm">Term Dates</a></li>
<li><a href="uniform.htm">Uniform</a></li>
<li><a href="bus routes.htm">Bus Routes</a></li>
<li><a href="parental forms.htm">Parental Forms</a></li>
</ul>
<li><a href="Principals Mess.htm">Principals Message</a></li>
<li><a href="Newsletters.htm">Newsletters</a></li>
<li><a href="Mentoring.htm">Mentoring</a></li>
</ul>
</li>
<li><a href="Subjects.htm">Subjects</a></li>
<ul class="level2">
<li><a href="Art.htm">Art</a></li>
<li class="active"><a href="Business St.htm">Business St</a></li>
<li><a href="English.htm">English</a></li>
<li><a href="Maths.htm">Maths</a></li>
</ul>
<li><a href="specialism.htm">Specialism</a></li>
<ul class="level2">
<li><a href="Design.htm">Design</a></li>
<li><a href="Technology.htm">Technology</a></li>
<li><a href="Environment.htm">Environment</a></li>
<li><a href="Recycling.htm">Recycling</a></li>
</ul>
<li><a href="Teachers.htm">Teachers</a></li>
<li><a href="Computers.htm">Computers</a></li>
<li><a href="Achievement.htm">Achievement</a></li>
<li><a href="Pastoral.htm">Pastoral</a></li>
</ul>
</div>

It should be apparent now that you have three ul elements as children of other ul elements; this isn't allowed in HTML.

Furthermore, you have an inline element (i.e., an a element) nested at the same level as a block-level element (i.e., a ul element). Nesting inline elements alongside block-level elements (so that they are sibling elements) makes for confusing code.

far2many
02-24-2011, 09:13 PM
Thanks for the above help i have set the code out correctly now.

I dont get the point about the nested ul's as they dont give any problems in the webpage. What isnt it allowed to nest ul's loads of css multiple menus have similar.

I think it seems to look well so far, however if you know of future issues i may have id rather know now so i can change it.

Your help is appreciated guys.
Thanks
Peter

http://www.bushcottages.co.uk/tester.htm

Excavator
02-24-2011, 09:30 PM
Hello far2many,


I dont get the point about the nested ul's as they dont give any problems in the webpage. What isnt it allowed to nest ul's loads of css multiple menus have similar.

Properly nested ul are perfectly valid.

See nesting ul's -
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_lists2
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_nestedlists2
http://reference.sitepoint.com/html/ul

Arbitrator
02-25-2011, 03:24 AM
I dont get the point about the nested ul's as they dont give any problems in the webpage. What isnt it allowed to nest ul's loads of css multiple menus have similar.They may not result in rendering issues for your purposes, but, per both the HTML 4.01 [1] and HTML5 [2] specs, that code is incorrect.

To be specific, you have a structure like this:


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

That structure should be more like this:


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

[1] http://www.w3.org/TR/html401/struct/lists.html#edef-UL:


10.2 Unordered lists (UL), ordered lists (OL), and list items (LI)


<!ELEMENT UL - - (LI)+ -- unordered list -->

[...]

Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

[2] http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element:

4.5.6 The ul element

[...]

Content model:
Zero or more li elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum