...

View Full Version : CSS Navigation Suckerfish



daemonkin
02-27-2009, 04:20 PM
Hi guys,

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

I am competent in getting:
http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html
vertical navigation with vertical subnavigation (http://htmldog.com/articles/suckerfish/dropdowns/example/vertical.html)

Recently I stumbled across English Premier League's site (http://www.premierleague.com) 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:

http://www.twsports.org/images/twa.jpg


http://www.twsports.org/images/twa2.jpg


http://www.twsports.org/images/twa3.jpg

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.

abduraooft
02-27-2009, 04:31 PM
In http://htmldog.com/articles/suckerfish/dropdowns/example/bones2.html, changing the CSS like

#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.

daemonkin
02-27-2009, 04:48 PM
I have simplified my CSS and created the following:


#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?

abduraooft
02-28-2009, 08:41 AM
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.

daemonkin
03-02-2009, 11:11 AM
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.

abduraooft
03-02-2009, 11:54 AM
Fix the errors in your markup first, see http://validator.w3.org/check?uri=http%3A%2F%2Fdev.twacademy.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
You can't have the same id for multiple elements.

daemonkin
03-02-2009, 04:02 PM
Sorry about that some redundant id tag from copying and pasting. Fixed now.

D.

abduraooft
03-02-2009, 04:12 PM
Sorry about that some redundant id tag from copying and pasting. Fixed now.

D. 32 other errors are still left.

daemonkin
03-02-2009, 04:24 PM
i am getting zero now:

XHTML Validator (http://validator.w3.org/check?uri=http%3A%2F%2Fdev.twacademy.org%2F&charset=(detect+automatically)&doctype=Inline&group=0)

abduraooft
03-02-2009, 04:30 PM
Alright! Now have a try by

#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/new_drop_down/default.asp

daemonkin
03-02-2009, 04:35 PM
Thankyou. Left: 0 sorted it all out. Ta for the link.

D.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum