|
|
Posted by Ed Jay on 12/29/05 18:45
Mitja Trampus <nun@example.com> wrote:
>Ed Jay wrote:
>> I have a menu setup using the following CSS code:
>>
>> #nav ul{
>> margin:auto;
>> text-align:center;
>> margin-top:1px;
>> padding:0px;
>> display: block;
>> }
>> #nav ul li{
>> display: inline;
>> }
>> #nav ul li a{
>> /* display: block; */
>> /* float: left; */
>> margin-right:1px;
>> margin-left:1px;
>> margin-top:1px;
>> padding: 1px;
>> font:10pt arial,sans-serif;font-weight:normal;
>> background: #fbebbf;
>> border:1px solid red;
>> }
>> #nav ul li a:link {color:#000000;text-decoration:none;}
>> #nav ul li a:visited {color:#000000;text-decoration:none;}
>> #nav ul li a:hover {color:white;text-decoration:none;background:#330099;}
>> #navu ul li a:active {color:#6666cc;text-decoration:none;}
>>
>> The menu looks like:
>>
>> <div id="nav"><ul>
>> <li><a href="url1">Dest 1</a></li>
>> <li><a href="url2">Dest 2</a></li>
>> .
>> .
>> etc...
>> </ul></div>
>>
>> How can I change the background color of individual buttons? IOW, if I
>> have seven buttons , but I want two of them to be a different color than
>> the rest.
>
>As David pointed out, it's best to introduce a new class:
>HTML:
> <div id="nav"><ul>
> <li><a href="url1">Dest 1</a></li>
> <li><a href="url2" class="special">Dest 2</a></li>
> <li><a href="url3" class="special">Dest 3</a></li>
> <li><a href="url4">Dest 4</a></li>
>CSS:
> As above, plus e.g.
> li.special { list-style-type: square }
>
>But I expect you know this and the problem for you is that
>there is no list-style-color CSS property. You can solve
>this either by
>
>a) specifying color:something for li, then have contents of
>each li in a p, then doing something like
>li.nonspecial p, li.special p {color:black}
>li.nonspecial {color:blue}
>li.special {color:blue}
>
>b) using simple images (list-style-image:'...')instead of
>glyphs like those you get with list-style-type:...
Good call. Thanks.
--
Ed Jay (remove M to respond by email)
Navigation:
[Reply to this message]
|