Results 1 to 2 of 2

Thread: css horzontal menu problems need help urgent

  1. #1
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy css horzontal menu problems need help urgent

    guys i have been tryin to apply this menu(http://www.dynamicdrive.com/style/cs...menu/).....but no result at all.....got no clue......hwere to place the given code.....i'm new to asp.net..........if some 1 could help please

  2. #2
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    not specific enough. link? You put the css in your css file then link it with the documents then
    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;
    }
    
    * html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/
    width: 100%;
    }
    
    .aerobuttonmenu a.aero{ /*aero button CSS*/
    background: transparent url('media/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('media/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{ /* Hover state CSS */
    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;
    }
    Save the images assiocated with this in new folder called media.

    Then added this into the body of your html document where you linked the css in the head, but change home and others to your links and put your addresses in the href="here".
    Code:
    <h4>Aero Blue and Black Button Menus:</h4>
    
    <div class="aerobuttonmenu">
    
    <div class="rightsection">
    whatever you want on the rightside aka where the blue quicktime looking thing is</div>
    
    <a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> 
    <a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> 
    <a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> 
    <a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> 
    <a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> 
    <a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a>
    </div>
    Last edited by bluewalrus; 10-14-2008 at 12:06 AM. Reason: forgot a part

Bookmarks

Posting Permissions

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