[css-d] Horizontal navigation styling
I'm trying to find a way to have a two-color horizontal navigation area: for example, a yellow background on the left half and a blue background on the right half. I've tried using nested divs to divide a navbar area into two regions with their own styling. It works, but, of course, this falls apart in older browsers, so I was looking to see if there's a way to accomplish it using the unordered list. Then I would have two style sheets. I haven't been successful yet and thought maybe this has already been done in CSS somewhere. I saw something similar at designdetector.com, but I'm only looking to do two colors. From what I can see of that source code, it looks a bit complicated. Of course, I could create a table, which might be easier, but do I want to do that? Any tips, suggestions, alternatives are greatly welcomed. Robyn Smith __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation styling
Robyn,
I guess you can go one of two ways:
Create two unordered lists and float them next to each other calling the
one red and the other yellow:
ul id=red-nav
li/li
li/li
/ul
ul id=yellow-nav
li/li
li/li
/ul
#red-nav, #red-nav ul {
position:relative;
float:left;
}
#yellow-nav, #yellow-nav ul {
position:relative;
float:left;
}
or, use a class on the li's you want a different color, for example:
ul
li class=red/li
li class=red/li
li class=yellow/li
li class=yellow/li
/ul
This has not been tested so I may be off here, but it makes sense.
HTH
Robyn M. Smith wrote:
I'm trying to find a way to have a two-color horizontal navigation area:
for example, a yellow background on the left half and a blue background
on the right half. I've tried using nested divs to divide a navbar area
into two regions with their own styling. It works, but, of course, this
falls apart in older browsers, so I was looking to see if there's a way
to accomplish it using the unordered list. Then I would have two style
sheets.
I haven't been successful yet and thought maybe this has already been
done in CSS somewhere. I saw something similar at designdetector.com,
but I'm only looking to do two colors. From what I can see of that
source code, it looks a bit complicated.
Of course, I could create a table, which might be easier, but do I want
to do that?
Any tips, suggestions, alternatives are greatly welcomed.
Robyn Smith
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation styling
Robyn M. Smith wrote:
I'm trying to find a way to have a two-color horizontal navigation area:
for example, a yellow background on the left half and a blue background
on the right half.
Robyn Smith
Simple is difficult. Complicated is easy. And if you are even nicer to
Opera, all /may/ be well :-) .
css
html,body{ background-color: #fff; color: #000; margin: 0; padding: 0; }
body{font: 100% arial, sans-serif; }
div#wrapper{float:left;width:100%;margin-left:-50%; }
div#left{ background-color: yellow; color: #000; margin-left:50%; }
div#right{background-color: blue; color: #fff; float:right;width:49.9%; }
ul {padding: .2em 0;margin: 0; list-style-type: none; width: 100%;
text-align: center; }
li { display: inline; margin: 0 1em; }
@media screen and (min-width: 0px){
div#right{ width: 50%; }
} /*be even nicer to opera and mind the last brace*/
html
div id=container
div id=wrapper
div id=left
ul
liItem one/li
liItem two/li
liItem three/li
liItem four/li
liItem five/li
/ul
/div
/div
div id=right
ul
liItem one/li
liItem two/li
liItem three/li
liItem four/li
liItem five/li
/ul
/div
/div
--
http://chelseacreekstudio.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal navigation styling
Thanks to all.
Sorry if I'm looking for answers in the wrong place. I'm new to CSS and
perhaps don't use all the proper terms.
This is not a structural division. It's just a presentational issue.
I don't have a url, I've been testing locally. But to try and explain
what I mean: some sites have their About Us and Contact links off in a
corner off the main navigation bar, usually in their own div or link
style. I was thinking of keeping them in the same line of vision as the
main navigation, same size, only offset them visually by background color.
Robyn
Chris Pallé wrote:
On Jan 26, 2007, at 6:04 PM, Schalk wrote:
Create two unordered lists and float them next to each other calling the
one red and the other yellow:
ul id=red-nav
li/li
li/li
/ul
ul id=yellow-nav
li/li
li/li
/ul
#red-nav, #red-nav ul {
position:relative;
float:left;
}
#yellow-nav, #yellow-nav ul {
position:relative;
float:left;
}
or, use a class on the li's you want a different color, for example:
ul
li class=red/li
li class=red/li
li class=yellow/li
li class=yellow/li
/ul
I'm fairly certain you can get away from presentational names for
the classes and ids. I agree with the main structuring, though.
I would favor the latter. Use a single ul, then, use labels that
make sense to the content within on the lis. This will help with
readability.
I'm trying to find a way to have a two-color horizontal navigation area:
for example, a yellow background on the left half and a blue background
on the right half. I've tried using nested divs to divide a navbar area
into two regions with their own styling. It works, but, of course, this
falls apart in older browsers, so I was looking to see if there's a way
to accomplish it using the unordered list. Then I would have two style
sheets.
Think about the context of your content. Does it make sense to have
two areas from a structural standpoint? if the content is
significantly different from one to the other (e.g. A global
navigation vs. a local) then yes, go with two divs.
OTH, if it's only to change presentation, keep one structural block
and differentiate in the properties. Just don't use presentational
names like hues, placement on the screen (header, footer,etc.), or
direction (upper, lower, right, left, etc.). Favor names that describe
the content being contained.
Is this valid conversation for this list? Kind of a semantics/mark-up
discussion Sorry if I'm OT.
I haven't been successful yet and thought maybe this has already been
done in CSS somewhere. I saw something similar at designdetector.com,
but I'm only looking to do two colors. From what I can see of that
source code, it looks a bit complicated.
Of course, I could create a table, which might be easier, but do I want
to do that?
NO. Don't do that... that sounds more like a threat. ;-)
Any tips, suggestions, alternatives are greatly welcomed.
Do you have link we can look at?
Robyn Smith
chris.pallé, interactive media designer
[EMAIL PROTECTED]
mailto:[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
