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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts

    CSS Navigation Suckerfish

    Hi guys,

    Been using Suckerfish for a long time now and think its great.

    I am competent in getting:
    http://htmldog.com/articles/suckerfi...le/bones2.html
    vertical navigation with vertical subnavigation

    Recently I stumbled across English Premier League's site and really like it.

    Is there a way I can use a horizontal navigation layout with sub navigation also horizontal?

    I can add in all the funky looking buttons at a later date but I just can't get the sub navigation to work correctly, starting from the left hand side:









    Can anyone help? I'm sure there is a simple css command to get the sub navigation to start flush at the left hand side.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    In http://htmldog.com/articles/suckerfi...le/bones2.html, changing the CSS like
    Code:
    #nav li ul {/*bones2.html (line 31)*/
    background:orange none repeat scroll 0;
    left:-999em;
    position:absolute;
    /*width:10em;*/
    }
    would align the sub nav items in the same line.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    I have simplified my CSS and created the following:

    Code:
    #nav, #nav ul { /* all lists */
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    }
    
    #nav a {
    	display: block;
    	width: 10em;
    }
    
    #nav li { /* all list items */
    	float: left;
    	width: 10em; /* width needed or else Opera goes nuts */
    }
    
    #nav li ul { /* second-level lists */
    	position: absolute;
    	background: orange;
    	width: 50em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    #nav li li {
     background-color: #c00;
     width: 5em;
     float: left;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    	position: absolute;
    }
    That gives me the same results as the images above. Doe sthis help identify where I am going wrong?
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    That gives me the same results as the images above. Doe sthis help identify where I am going wrong?
    Not really! A link to your page would be very helpful.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Ok. Uploaded to dev site:

    http://dev.twacademy.org/

    Might not resolve as I just created a dev account this morning but I edited the hosts file and it seems to work. May just need time to resolve DNS.

    Does this make it any clearer?

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    You can't have the same id for multiple elements.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Sorry about that some redundant id tag from copying and pasting. Fixed now.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by daemonkin View Post
    Sorry about that some redundant id tag from copying and pasting. Fixed now.

    D.
    32 other errors are still left.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    i am getting zero now:

    XHTML Validator
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Alright! Now have a try by
    Code:
    #nav, #nav ul {/*dev.twacademy.org ........(line 1) */
    line-height:1;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
    left:0;
    position:absolute;
    width:800px;
    }
    PS: it might be interesting to see http://www.tjkdesign.com/articles/ne...wn/default.asp
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    daemonkin (03-02-2009)

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Location
    N. Ireland
    Posts
    351
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Thankyou. Left: 0 sorted it all out. Ta for the link.

    D.
    Daemonkin.
    If this was helpful, please add to my reputation
    Thousand Sons - Freelance Web Developer - ninetyonedegrees.com


  •  

    Posting Permissions

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