|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
November 13th, 2003, 07:14 PM
|
||||
|
||||
|
CSS/XHTML - Lists for navigation
Hey guys,
Just thought I'd share with you my latest creation - a CSS & XHTML (Strict) page, which uses lists (<ul>) for navigation. I have two forms of lists on the page - one utilises INLINE lists, allowing the menu to run horizontally across the page, while the other uses the default, block level method - and runs vertically. View the page here: http://www.bluesix.com.au/dev/cssxhtml/list_nav.htm And the CSS here: http://www.bluesix.com.au/dev/cssxhtml/styles.css
|
|
#4
November 14th, 2003, 11:38 PM
|
||||
|
||||
|
Almost got it going in Mozilla 1.5 now - though it seems to have busted up IE a little. For some reason I can't get the main nav centered (left aligned w/ the content), with it's background color filling the remainder space. Any ideas?
It should end up looking like this: http://bluesix.com.au/dev/cssxhtml/list_nav_demo.gif
|
|
#5
November 19th, 2003, 02:51 AM
|
|||
|
|||
|
This doesn't solve the alignment issue, but
if you replace the <br clear="both" /> with: Code:
<div style="clear:both;"></div> it will at least validate. It also takes away the space the <br /> put in on IE. Hack? Yes, but it validates. 
|
|
#6
November 19th, 2003, 03:10 AM
|
||||
|
||||
|
You rock INF. It's almost there.
I've got the main nav background color filling up the rest of the row that it sits on, in IE, but alas, Mozilla ain't playin' ball. Soooo close.
|
|
#7
November 19th, 2003, 01:36 PM
|
|||
|
|||
|
Got it!
Here's a link to the page And the CSS In case the site is down here's what I did. I added this to the css Code:
#navwrap {
background-color : #7A7764;
height:25px;
}
#break {
clear:both;
}
I moved the <h1> and #nav list inside the container, and placed the #nav list inside a new #navwrap div which allows the color to stretch. the #break is just the solution I posted earlier. Code:
<div id="container"> <h1>Lorem ipsum</h1> <div id="navwrap"> <ul id="nav"> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Articles">Articles</a></li> <li><a href="#" title="Members">Members</a></li> <li><a href="#" title="Register">Register</a></li> <li><a href="#" title="Projects">Projects</a></li> </ul> </div> <div id="break"></div> <div id="secondarynav"> <!-- AND SO ON.....--> I also attached the files, as I really don't trust the free-server the example is on.
|
|
#8
November 19th, 2003, 03:39 PM
|
||||
|
||||
|
That's it! Nice one INF. I've made a few modifications to your suggestions, mainly leaving the H1 and nav out of the main container (just needed to make a few small mods to the nav container). I've also made the "break" a class, so it can be re-used, if needed.
http://bluesix.com.au/dev/cssxhtml/list_nav.htm I had hoped to do it without using a containing div around the nav... not sure why it worked it in IE without one. I'm not real keen on having to assign a height to the nav container either, as it means I have to change two classes when altering the main nav appearance.
|
|
| Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > CSS/XHTML - Lists for navigation example |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
 |
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Take a look 
Linear Mode
