Need html help!!!

cyberworldhost · Post #1 (**permalink**) 09-22-2009, 02:03 PM

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

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;">--/&gt;
<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
}

cyberworldhost · Post #2 (**permalink**) 09-22-2009, 06:21 PM

The website is http://www.rockcleaners.com

csn-uk · Post #3 (**permalink**) 09-23-2009, 09:53 AM

Hello cyberworldhost,

Personally id crop your background (blue to white gradient) to 1pixel and repeat it across the page (under which you default the background to white) this will allow the page to grow and expand to meet the users browser and resolution. As for the hills on the bottom and the logo & text on the top, position them over the background (css) by aligning them or use borders for a set distance.

As for the rolling hill’s id personally ensure that they can lap and again repeat the image (ensure that the right corner could match with the left) meaning you may need to use a smaller section or a smoother curve.

Possibly however if you where to use wordpress or where able to modify a wordpress theme this free (GPL) template may be exactly what you are looking for: Nature_wdl 1.3 by Webdesignlessons.com
Hope that helps or points you in the right direction.

cyberworldhost · Post #4 (**permalink**) 09-25-2009, 12:10 PM

Quote:

Originally Posted by csn-uk

Hello cyberworldhost,

Personally id crop your background (blue to white gradient) to 1pixel and repeat it across the page (under which you default the background to white) this will allow the page to grow and expand to meet the users browser and resolution. As for the hills on the bottom and the logo & text on the top, position them over the background (css) by aligning them or use borders for a set distance.

As for the rolling hill’s id personally ensure that they can lap and again repeat the image (ensure that the right corner could match with the left) meaning you may need to use a smaller section or a smoother curve.

Possibly however if you where to use wordpress or where able to modify a wordpress theme this free (GPL) template may be exactly what you are looking for: Nature_wdl 1.3 by Webdesignlessons.com
Hope that helps or points you in the right direction.

ok bare with me I not an expert on css and cropping that why I have a graphic designer etc.. what you do you mean by positioning the hills on the bottom logo and text? because all those layers is one image. Could you possibly give me some kind of source code to work off on. My main website designer is not in Colorado anymore at least until December and I am going crazy over here lol.

Thanks for help csn-uk and anyone else.

OwlMan · Post #5 (**permalink**) 09-28-2009, 08:46 PM

If you used Photoshop or GIMP for the layout, then slice up the wire image with part of the coat hanging from it if that's all you want to achieve as it will probably be less of a hassle to do it like that rather than to position it via CSS.