Agent69
05-05-2010, 05:48 AM
it seems that i'm not getting the black nav bar i wanted from the Vista Aeros button menu (http://www.dynamicdrive.com/style/csslibrary/item/vista_aero_buttons_menu/P10/) and what i'm getting is this weird design on my test page (http://luckyrelic.webs.com/TESTPAGE.html)...
i tried to tweak the width size to 651px to make it fit to the website i'm planning to put it on and seems to still not hit the desired results...
here are the codes i have for that Nav bar so far:
<head><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 651;
background: #000000; /*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: 80px;
}
.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: 80px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}
.aerobuttonmenu .rightsection a{
color: navy;
}
</style>
</head><h4>Aero Blue and Black Button Menus:</h4>
<div class="aerobuttonmenu black">
<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>
<a href="http://www.dynamicdrive.com" class="aero"><span>HOME</span></a>
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>IMPACT ZONE</span></a>
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>LEAGUE RULES</span></a>
<a href="http://tools.dynamicdrive.com" class="aero"><span>TEAM MEMBERS</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>LEAGUE HISTORY</span></a>
<a href="http://www.cssdrive.com" class="aero"><span>SPOILS OF WAR</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>FANTASY HELP</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>FUN AND GAMES</span></a>
</div>
any help will be greatly appreciated...
i tried to tweak the width size to 651px to make it fit to the website i'm planning to put it on and seems to still not hit the desired results...
here are the codes i have for that Nav bar so far:
<head><style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.aerobuttonmenu{ /*container that holds a row of aero buttons*/
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 651;
background: #000000; /*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: 80px;
}
.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: 80px;
position: relative;
top: 3px;
padding-right: 5px;
text-align: right;
}
.aerobuttonmenu .rightsection a{
color: navy;
}
</style>
</head><h4>Aero Blue and Black Button Menus:</h4>
<div class="aerobuttonmenu black">
<div class="rightsection">
<a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a>
</div>
<a href="http://www.dynamicdrive.com" class="aero"><span>HOME</span></a>
<a href="http://www.dynamicdrive.com/style/" class="aero"><span>IMPACT ZONE</span></a>
<a href="http://www.dynamicdrive.com/forums/" class="aero"><span>LEAGUE RULES</span></a>
<a href="http://tools.dynamicdrive.com" class="aero"><span>TEAM MEMBERS</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>LEAGUE HISTORY</span></a>
<a href="http://www.cssdrive.com" class="aero"><span>SPOILS OF WAR</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>FANTASY HELP</span></a>
<a href="http://www.javascriptkit.com" class="aero"><span>FUN AND GAMES</span></a>
</div>
any help will be greatly appreciated...