|
|
Posted by Mitja Trampus on 12/29/05 14:21
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:...
Navigation:
[Reply to this message]
|