cyberworldhost
Cyber Specialist
ok so me and my friend can't figure out what the problem is with a clients website we are designing. I think it might have to do with croping the images or the alignment. Or it might be something with the shadow box but I don't really think that could be the problem. The code looks perfect to us but it is not working. I need some expert web designers help. Here is the code.
the index code
Here is the css code
the index code
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="shadow/shadowbox.css" />
<script type="text/javascript" src="shadow/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: ['img', 'html', 'iframe']
});
</script>
</head>
<body background="images/background.jpg"><!--
<body style="background-image: url(images/background.jpg); background-repeat: no-repeat;">--/>
<div id="content"><img id="string" alt="" src="images/string.jpg" /><a class="option" title="About" rel="shadowbox" href="images/shirt1.png"><img id="businessSuit" name="businessSuit" alt="" src="images/businessSuit.jpg" /></a>
<a class="option" title="Service" rel="shadowbox" href="#"><img id="shirt" name="shirt" alt="" src="images/shirt.jpg" /></a>
<a class="option" title="Pickup/Delivery" rel="shadowbox" href="#"><img id="needle" name="needle" alt="" src="images/needle.jpg" /></a>
<a class="option" title="Contact" rel="shadowbox" href="#"><img id="dress" name="dress" alt="" src="images/dress.jpg" /></a><!--img id="veil" src="veil.png" /--></div>
</body>
</html>Here is the css code
Code:
body {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
position:fixed;
}
img {
border-width: 0px;
border-style: none;
position: fixed;
top: 0px;
left: 0px;
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
#content {
}
#string {
z-index: 6;
top: 0px;
}
#businessSuit {
z-index: 5;
left: 0px;
}
#shirt {
z-index: 4;
left: 0px;
}
#needle {
z-index: 3;
left: 0px;
}
#dress {
z-index: 2;
left: 0px
}
