CSS question: Changing styled <LI> buttons

Discussion in 'HTML' started by Ed Jay, Dec 28, 2005.

  1. Ed Jay

    Ed Jay Guest

    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)
    Ed Jay, Dec 28, 2005
    #1
    1. Advertising

  2. 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
    David Dorward, Dec 28, 2005
    #2
    1. Advertising

  3. Ed Jay

    Ed Jay Guest

    David Dorward <> 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)
    Ed Jay, Dec 29, 2005
    #3
  4. 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
    David Dorward, Dec 29, 2005
    #4
  5. 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:...
    Mitja Trampus, Dec 29, 2005
    #5
  6. Ed Jay

    Ed Jay Guest

    Mitja Trampus <> 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)
    Ed Jay, Dec 29, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    1
    Views:
    661
    Steven Cheng[MSFT]
    Aug 16, 2005
  2. Tom Davies
    Replies:
    0
    Views:
    520
    Tom Davies
    Oct 9, 2004
  3. Francois LE DORNER

    swing - styled document - paragraph attribute

    Francois LE DORNER, Mar 8, 2005, in forum: Java
    Replies:
    0
    Views:
    408
    Francois LE DORNER
    Mar 8, 2005
  4. Søren Jacobsen

    Padding in css-styled button, ie6

    Søren Jacobsen, Oct 17, 2003, in forum: HTML
    Replies:
    2
    Views:
    1,492
    Søren Jacobsen
    Oct 20, 2003
  5. Jim Jaworski
    Replies:
    1
    Views:
    368
    Martin Honnen
    Mar 7, 2004
Loading...

Share This Page