www.webdeveloper.com
Results 1 to 3 of 3

Thread: working with Css alpha setting in <ul><LI>

  1. #1
    Join Date
    Jul 2009
    Posts
    11

    working with Css alpha setting in <ul><LI>

    i want to know if there is a way to aply alpha settings to one property of <ul><li> without affecting other properties of <ul><li> for example
    ul#navlist li {


    margin: 0;
    padding: 7px 0 7px 0;
    background-color: #999999 , -moz-opacity:0.2 ; //this will not make the setting for background be #999999 with 0.2 opacity//
    float: left;
    font-family:verdana,arial,sans-serif;
    font-size:10px;
    font-weight:bold;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;



    }

    ul#navlist li {


    margin: 0;
    padding: 7px 0 7px 0;
    background-color: #999999
    float: left;
    font-family:verdana,arial,sans-serif;
    font-size:10px;
    font-weight:bold;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    -moz-opacity:0.2 ;//this will aply alpha settings to borders, font, and background. and i only want the alpha settings in a background.//


    }

    all i want is background with alpha setting. any suggestion?
    i did search for alpha topic in this forum and i think all of them are image base problems thank for the help

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    If you apply the alpha transparency to the li in a stylesheet, it gets applied to the li and anything and everything contained therein. That's the way CSS works, any child of an element cannot have a higher opacity than it's parent....

    Usually, the only way to achieve this effect is to fake it - e.g. make an element LOOK like it's inside an element with a specified alpha opacity, without it actually being inside the element in the actual markup. This is usually accomplished with absolute positioning and a good knowledge of cross-browser CSS positioning.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2009
    Posts
    11
    ok is good to hear that lesson. the reason i was trying to do that is because i like the color the alpha setting give you when you apply it to specific color and i was able to find the code of the color that i was looking for f6f6f6 this color is similar to 999999 with alpha of 10&#37;. so the setting will be

    ul#navlist li {


    margin: 0;
    padding: 7px 0 7px 0;
    background-color: #f6f6f6; //this is one way to achieve what i was looking for
    float: left;
    font-family:verdana,arial,sans-serif;
    font-size:10px;
    font-weight:bold;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;



    }

    thanks for the replay

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles