Hi
Im having problems with my
css rollover menu, no matter what i try the menu wont display in line, it keeps displaying down the left like.....
Home
About
Cart
Contact
etc
I need it to display inline like....
Home About Cart Conatct
here is my code,
HTML
Quote:
<div id="top_menu">
<div class="rollover">
<a href="default.asp">Home</a>
<a href="shopcontent.asp?type=aboutus">About Us</a>
<a href="shopcustcontact.asp">Contact Us</a>
<a href="shopaddtocart.asp">View Cart</a>
<a href="shopcheckout.asp">Checkout</a>
</div>
</div>
|
CSS
Quote:
.rollover a{
display: inline;
text-align: left;
background: url(images/btn.gif) 0 0 no-repeat;
}
.rollover{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:link{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:visited{
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 100%;
font-weight: 700;
}
.rollover a:hover{
/*background-color: #b00a0d;
color: #ffffff;*/
background: url(images/over_btn.gif) 0 0 no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 95px;
background-repeat: no-repeat;
font-weight: 700;
}
.rollover a:active{
background: url(images/over_btn.gif) 0 0 no-repeat;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
/*font-style: normal;
font-weight: normal;*/
padding-bottom: 10px;
padding-left: 30px;
padding-top: 9px;
padding-right: 25px;
text-align: left;
text-decoration: none;
width: 95px;
font-weight: 700;
}
|
css rollover problems
Nov 5th, 2007, 08:31
Similar Threads
