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>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
</div>
<div id="right">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item 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/
