Thank you very much. This is something I haven't tried yet. I'm new to
CSS and don't think of these solutions very easily. I know there must be
a way!
I'll try this out.
Robyn
~davidLaakso wrote:
> 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>
>
______________________________________________________________________
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/
