sam2
January 15th, 2009, 09:17 AM
hi, i used the tutorial http://www.kirupa.com/css/css_rollovers.htm
to make rollovers for my website. It worked, but once i put in on my site the images didnt show up. I can rollover the space and click on it but the images don't show up.
please help!!
this is my css code: (i'm new to css so excuse my code if its not good)
body {
margin:15 auto;
width:762px;
text-align: center;
}
#wrapper {
position: relative;
width: 762px;
height: 502px;
background: black;
border:1px black solid;
margin-left: auto ;
margin-right: auto ;
text-align: left;
}
#row1 {
position: absolute;
top: 0px;
left: 0px;
background-color: White;
height: 11px;
width: 165px;
}
#rowline {
position: absolute;
bottom: 12px;
left: 10px;
background-color: gray;
height: 2px;
width: 738px;
}
#rowbottom {
position: absolute;
bottom: 0px;
left: 10px;
background-color: white;
height: 158 px;
width: 154 px;
}
#row1down {
position: absolute;
top: 12px;
left: 0px;
background-color: white;
height: 488px;
width: 10px;
}
#row2down {
position: absolute;
top: 20px;
left: 10px;
background-color: d1d0d0;
height: 460px;
width: 2px;
}
#row3down {
position: absolute;
top: 20px;
left: 12px;
}
#row3_2down {
position: absolute;
bottom: 32px;
left: 70px;
z-index: 2
}
#row4down {
position: absolute;
top: 0px;
left: 163px;
background-color: d1d0d0;
height: 500px;
width: 2px;
z-index: 1
}
#row5down {
position: absolute;
top: 20px;
right: 10px;
background-color: 5e5d5d;
height: 462px;
width: 2px;
}
#logo2 {
position: absolute;
bottom: 32px;
left: 164px;
z-index: 2
}
#navigation {
position: absolute;
top: 35px;
left: 165px;
height: 21px;
width: 583px;
background-color: d9dbdc;
z-index: 3;
}
#rowline1 {
position: absolute;
top: 18px;
left: 10px;
z-index: 2
}
#rowline2 {
position: absolute;
bottom: 18px;
left: 10px;
z-index: 2
}
#whitebox {
position: absolute;
top: 100px;
left: 217px;
height: 369px;
width: 513px;
background-color: white;
z-index: 1;
padding-top: 3px;
padding-right: 18px;
padding-left: 18px;
padding-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12;
}
#example{
height: 21px;
width: 104px;
text-indent: 10000px;
overflow: hidden;
background: url(n_home.gif) top left no-repeat;
display: block;
}
#example:hover{
background-position: bottom left;
}
#about{
height: 21px;
width: 104px;
text-indent: 10000px;
overflow: hidden;
background: url(n_about.gif) top left no-repeat;
display: block;
position: absolute;
top: 0px;
left: 63px;
}
#about:hover{
background-position: bottom left;
}
#contact{
height: 21px;
width: 95px;
text-indent: 10000px;
overflow: hidden;
background: url(n_contact.gif) top left no-repeat;
display: block;
position: absolute;
top: 0px;
left: 301px;
}
#contact:hover{
background-position: bottom left;
}
#collections{
height: 21px;
width: 135px;
text-indent: 10000px;
overflow: hidden;
background: url(n_collections.gif) top left no-repeat;
display: block;
position: absolute;
top: 0px;
left: 167px;
}
#collections:hover{
background-position: bottom left;
}
#womenswatches {
position: absolute;
top: 27px;
right: 15px;
}
#womensjewelry {
position: absolute;
top: 195px;
right: 15px;
}
#menswatches {
position: absolute;
top: 27px;
right: 171px;
}
#murano {
position: absolute;
top: 195px;
right: 171px;
}
#bigimage {
position: absolute;
top: 20px;
right: 15px;
z-index: 4;
}
#nav_mwatches {
position: absolute;
top: 60px;
left: 27px;
}
#nav_wwatches {
position: absolute;
top: 84px;
left: 27px;
}
#nav_mglass {
position: absolute;
top: 108px;
left: 27px;
}
#nav_wjewelry {
position: absolute;
top: 132px;
left: 27px;
}
#rightarrow {
position: absolute;
bottom: 32px;
left: 100px;
}
#leftarrow {
position: absolute;
bottom: 32px;
left: 73px;
}
and this is my html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LP Italy Israel</title>
<link rel= "stylesheet" rev= "stylesheet" href="about.css" type="text/css" media= "screen" charset="utf-8"/>
</head>
<body bgcolor="#d9dbdc">
<div id="wrapper">
<div id="row1"></div>
<div id="rowline1"><img src="images/grey_line.gif" width="740" height="2" alt=""></div>
<div id="rowline2"><img src="images/grey_line.gif" width="740" height="2" alt=""></div>
<div id="rowbottom"></div>
<div id="navigation">
<a href="index.html" id="example">Home</a> <a href="about.html" id="about">About</a> <a href="collections.html" id="collections">collections</a><a href="contact.html" id="contact">contact</a>
</div>
<div id="row1down"></div>
<div id="row2down"></div>
<div id="whitebox"><img src="images/h_about.gif" width="115" height="27" alt=""><br><br>
The exciting new LP Italy line is the collaboration of The LP Watch Group’s expertise and skill in fine watch making, combined with inspired designs from famed Italian watch designer Lorenzo Pozzan. LP Italy is singularly unique; an Italian designed line of ultra high quality Swiss made watches. <br><br>
Since 1923 the very heart of each LP Watch design has relied on our ever evolving philosophy and commitment to quality, excellence and distinction. Please step into a world where classic designs and elegance of fine watch making combine
</div>
<div id="row3down"><img src="images/h_image.gif" width="152" height="325" alt=""></div>
<div id="row3_2down"><img src="images/logo1.gif" width="94" height="130" alt=""></div>
<div id="logo2"><img src="images/logo2.gif" width="36" height="130" alt=""></div>
<div id="row4down"></div>
<div id="row5down"></div>
</div>
</body>
</html>
thanx!