![[H]ard|Forum](/styles/hardforum/xenforo/logo_dark.png){kind=logo}
CaseyBlackburn
Gawd
- Joined
- Dec 10, 2006
- Messages
- 540
I don't understand how I can suck at CSS so bad but I would appreciate some help.
The website is suppose to have a background image, and then centered in the middle there will be the main section. The left of the main section will have a gradient from 100% transparent to black. The middle will be a white background with text. Then the right will be the reverse of the left. All of that is suppose to be filled to 100% height, with static width.
The problem is, I am not getting 100% height, and my gradient images are not lining up in the right position, it's like showing two coppy of the gradient starting not at the left of the div.
Here is a link: http://synapseconnections.net/smoore/
CSS:
HTML:
Thanks!
The website is suppose to have a background image, and then centered in the middle there will be the main section. The left of the main section will have a gradient from 100% transparent to black. The middle will be a white background with text. Then the right will be the reverse of the left. All of that is suppose to be filled to 100% height, with static width.
The problem is, I am not getting 100% height, and my gradient images are not lining up in the right position, it's like showing two coppy of the gradient starting not at the left of the div.
Here is a link: http://synapseconnections.net/smoore/
CSS:
Code:
@charset "utf-8";
body {
background-attachment: fixed;
background-image: url(http://synapseconnections.net/smoore/img/bg.jpg);
background-repeat: repeat;
margin: 0px;
height: 100%;
}
.main {
width: 776px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
.main-content {
background-color: #FFFFFF;
height: 100%;
width: 742px;
margin-top: 0px;
float: none;
text-align: left;
margin-left: 17px;
margin-right: 17px;
}
.main-left {
height: 100%;
width: 17px;
margin-top: 0px;
float: left;
margin-left: 0px;
margin-right: 0px;
background-attachment: fixed;
background-image: url(http://synapseconnections.net/smoore/img/bg-left.png);
background-repeat: repeat-y;
}
.main-right {
height: 100%;
width: 17px;
margin-top: 0px;
float: right;
text-align: left;
margin-left: 0px;
margin-right: 0px;
background-attachment: fixed;
background-image: url(http://synapseconnections.net/smoore/img/bg-right.png);
background-repeat: repeat-y;
}
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="main-left">
</div>
<div class="main-right"> </div>
<div class="main-content">
<p>Test </p>
</div>
</div>
</body>
</html>Thanks!