Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   CSS question: Changing styled <LI> buttons (http://www.velocityreviews.com/forums/t163801-css-question-changing-styled-li-buttons.html)

Ed Jay 12-28-2005 05:47 PM

CSS question: Changing styled <LI> buttons
 
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.

--
Ed Jay (remove M to respond by email)

David Dorward 12-28-2005 06:42 PM

Re: CSS question: Changing styled <LI> buttons
 
Ed Jay wrote:

> 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.


Classes or ids depending on the reason.


--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Ed Jay 12-29-2005 01:40 AM

Re: CSS question: Changing styled <LI> buttons
 
David Dorward <dorward@yahoo.com> wrote:

>Ed Jay wrote:

<snipped my code and question>
>
>> 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.

>
>Classes or ids depending on the reason.


Kindly elaborate. TIA.

--
Ed Jay (remove M to respond by email)

David Dorward 12-29-2005 01:53 AM

Re: CSS question: Changing styled <LI> buttons
 
Ed Jay wrote:

>>> 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.


>>Classes or ids depending on the reason.


> Kindly elaborate.


Give the list items that you wish to mark apart from the others a class.
Write selectors that are, aside from including that class, the same as the
selectors that already match.
In the style for those selectors, override the background-color.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Mitja Trampus 12-29-2005 12:21 PM

Re: CSS question: Changing styled <LI> buttons
 
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:...

Ed Jay 12-29-2005 04:45 PM

Re: CSS question: Changing styled <LI> buttons
 
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)


All times are GMT. The time now is 04:00 PM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.