Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    White background not transparent

    I added some flash CSS buttons at the top of this website, but that white background won't go transparent. Any help?

    http://www.rodgame.org/downloads/twiceisnice/

    CSS

    Code:
    .aerobuttonmenu a.aero{ /*aero button CSS*/
    background: transparent url('images/aeroleft.gif') no-repeat top left;
    display: block;
    float: left;
    font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */
    line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */
    height: 31px; /* Height of button background height */
    padding-left: 10px; /* Width of left menu image */
    text-decoration: none;
    margin-right: 5px; /*spacing between buttons*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/
    opacity: 0.9;
    -moz-opacity: 0.9;
    }
    
    .aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{
    color: white; /*button text color*/
    }
    
    .aerobuttonmenu a.aero span{
    background: transparent url('images/aeroright.gif') no-repeat top right;
    display: block;
    padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/
    }
    
    .aerobuttonmenu a.aero:hover{
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/
     opacity: 1;
     -moz-opacity: 0.99;
    }
    
    .aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */
    color: yellow;
    }
    
    .black a.aero{
    background-image: url('media/aeroleftblack.gif');
    }
    
    .black a.aero span{
    background-image: url('media/aerorightblack.gif');
    }
    
    .aerobuttonmenu .rightsection{
    float: right;
    width: 100px;
    position: relative;
    top: 3px;
    padding-right: 5px;
    text-align: right;
    }
    
    .aerobuttonmenu .rightsection a{
    color: navy;
    }
    HTML

    Code:
    <div id="header">
    <div class="aerobuttonmenu">
    
    <a href="index.html" class="aero"><span>Home</span></a>
    <a href="location.html" class="aero"><span>Location</span></a>
    <a href="events.php" class="aero"><span>Events</span></a>
    <a href="photos.html" class="aero"><span>Photos</span></a>
    <a href="sales.php" class="aero"><span>Store Sales</span></a>
    <a href="donations.html" class="aero"><span>Donations</span></a>
    <a href="contact.html" class="aero"><span>Contact Us</span></a>
    </div>
    </div>
    Last edited by masterofollies; 02-12-2009 at 03:10 PM.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Remove this:

    Code:
    .aerobuttonmenu{ /*container that holds a row of aero buttons*/
    overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
    width: auto;
    /* background: #F7F7F7; */ /*menu strip background*/
    border: 1px solid gray;
    padding: 4px 0;
    border-width: 1px 0;
    }
    As far as making the button corner areas transparent, you could use a PNG with transparency or (which is probably easier) make them a gray color that blends with the site background.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    masterofollies (02-12-2009)

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Excellent works, thank you, the corners there is only like 3 pixels max with white and it really doesn't look bad so I am just going to leave it


  •  

    Posting Permissions

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