Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Error in the menu

    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)



    Sadly it looks like this

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

    Any help would be smashing thanks

    Peter

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    The problem's with your html - you have:

    Code:
    <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:

    Code:
            <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....
    Last edited by SB65; 02-23-2011 at 09:58 PM.

  • Users who have thanked SB65 for this post:

    far2many (02-23-2011)

  • #3
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Its fixed but its highlighted another error

    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.

    Peter

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    #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
    Code:
    #sidebar ul.level1 li.active
    			{
    			font-weight: bold;
    			background: transparent url(downarrow.png) no-repeat right 1em;
    			}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    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:

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New Coder
    Join Date
    Feb 2011
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    Nested UL's and child a with UL

    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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....tryhtml_lists2
    http://www.w3schools.com/tags/tryit....l_nestedlists2
    http://reference.sitepoint.com/html/ul
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by far2many View Post
    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:

    Code:
    <ul>
    	<ul>
    		<li></li>
    	</ul>
    </ul>
    That structure should be more like this:

    Code:
    <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)

    Code:
    <!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...the-ul-element:
    4.5.6 The ul element

    [...]

    Content model:
    Zero or more li elements.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •