4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Need help with css hover issues

by brolsta10
3 replies
  • WEB DESIGN
    • |
I'm trying to duplicate the cars underneath. When i do so the buttons disappear could someone help me out? And then when I rollover the buttons that you can see the hover effect that i'm looking for goes to the wrong div. Thanks in advance.


<head>
<title>Title</title>

<style type="text/css">

a {
color: #fff;
text-decoration: none;
font-family: Helvetica;
}

a.text {
color:black;
font-size: large;
position: absolute;
left: 5px;
text-align: center;
font-family: Helvetica;

}

h1 {
font-size: large;
color: black;
line-height: 0.5em;
font-family: Helvetica;
letter-spacing: 0.4px;
line-height: 0.3em;
font-stretch: ultra-condensed;
}

p {
font-size: 0.8em;
color: black;
line-height: 1.2em;
font-family: Helvetica;
}


a.square,
a.square span {
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
margin-bottom: 10px;
}

a.rounded,
a.rounded span {
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
}

a.blue {
position: absolute;
top: 50px;
background: -webkit-gradient(linear, left top, left bottom, from(#93b8c9), to(#055b81));
background: -moz-linear-gradient(top, #93b8c9, #055b81);
border: 1px solid #055b81;
text-shadow: 0px 1px 1px #055B81;
left: 370px;
}

a.blue:hover {
-moz-box-shadow: 0px 0px 5px #055b81;
-webkit-box-shadow: 0px 0px 5px #055b81;
}

a.blue:active {
background: -webkit-gradient(linear, left top, left bottom, from(#055b81), to(#93b8c9));
background: -moz-linear-gradient(top, #055b81, #93b8c9);
}

a.blue span {
border: 1px solid #93B8C9;
margin-bottom: 5px;
}

Buttons Dimentions
*/

/* Big **************************************** */
a.big {
padding: 10px 0;
font: normal 150% arial,sans-serif;
}
a.big span {
padding: 9px 19px;
}

/* Medium **************************************** */
a.medium {
padding: 6px 0;
font: normal 100% arial,sans-serif;
}
a.medium span {
padding: 5px 14px;
margin-bottom: 10px;
}

a.small {
padding: 5px 0;
font: normal 85% arial,sans-serif;
position: absolute;
left: 390px;
top: 99px;
}
a.small span {
padding: 4px 9px;
}


div#outer {
float: left;
width: 515px;
height: 155px;
margin: 5,5,5,5;
border: solid 0.1em white;
}

div#outer:hover {
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
background: -webkit-gradient(linear, left top, left bottom, from(#D7E6F9), to(#E3EEFB));
background: -moz-linear-gradient(top, #D7E6F9, #E3EEFB);
border: solid 0.1em #6CF;
}

div#first {
float: left;
width: 163px;
height: 122px;
margin-left: 5px;
border: double;
margin-top: 10px;
}

div#second {
float: left;
width: 180px;
padding: 5px;
margin-left: 5px;
margin-top: 5px;
}

div#third {
float: left;
width: 140px;
height: 75px;
padding: 0px;
top: 10px;
}

div#fourth {
float: left;
width: 140px;
height: 75px;
padding: 5px;
top: 10px;
right: 0px;
}

.img {
border: double;
border-style: black;

}


</style>

</head>

<body>

<div id="outer">
<div id="first">
<img src="images/newthumb4.jpeg" width="163" height="122" alt="mercedes" />
</div>
<div id="second">
<h1>2008</h1>
<h1>Mercedes-Benz</h1>
<h1>C300 4MATIC</h1>
<p>Body Style: 4 Door<br />
Stock: 09-120A<br />
Mileage: 82,634 miles<br />
Price: Call for Price
</p>
</div>
<div id="third">
<a class="blue medium square" href="#"><span>Call for Price</span></a>
</div>
<div id="fourth">
<a class="blue small square" href="#"><span>View Info</span></a>
</div>
</div>

</body>
</html>
#css #hover #issues

Trending Topics