Log in

View Full Version : feathered edge to webpage


stewartrose
01-09-2008, 06:43 PM
Good Afternoon Team, as a newbie to css I am loosing to much hair and need some help please.. to best descripbe it, imagain a clear page floating in the center of screen, now add image to both left and right side only, and as the page gets longer both images pulls down with the page..
This is what I have but it the graphic does not grow with height...

HTML
<div id="main">

<div id="left"></div>
<div id="right"></div>
<div id="middle"><div class="menu">
</div>
<div>
Like many other pet websites about missing and found pets, our services were developed for you because of the lack of information, resources and assistance in making the most of the Internet to reunite missing pets with their owners.
<br />
</div>
</div>

body {
background-color: #788cf0;
}

#main {
margin-left: auto;
margin-right: auto;
width:800px;

}
#left {
float:left;
width:35px;
background:url("images/rep_left.gif");
background-repeat: repeat-y;}

#right {
float:right;
width:35px;
background:url("images/rep_right.gif");
background-repeat: repeat-y;}

#middle {
height:100%;
background:white;

}
.column-padding {
margin:0; padding:0.5em 1em;
}

All the best and Thanks for any help from Alan
boogyman
01-09-2008, 09:04 PM
firstly welcome to the forums

the only problem, syntatically, I can see with the code you posted is that you have not closed the <div id="main">. your css is correct also, but i would like to be thorough and ask a couple questions.

does your page follow the format of



__DOCTYPE__
<html>
<head>
__CSS__
</head>
<body>
__main/left/right/middle_divs__
</body>
</html>

if not the sequence is out of order and you cannot rely on the browser displaying it with some degree of predictability. It is also recommended that you use the Strict 4.1 HTML DOCTYPE


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


as a closing note when posting any computer code please use the
stewartrose
01-10-2008, 09:20 AM
Sorry I was trying to save space...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Al CSS Layout</title>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>

<div id="main">

<div id="left"></div>
<div id="right"></div>
<div id="middle"><div class="menu">
</div>
<div>
Like many other pet websites about missing and found pets, our services were developed for you because of the lack of information, resources and assistance in making the most of the Internet to reunite missing pets with their owners.
<br />
Like many other pet websites about missing and found pets, our services were developed for you because of the lack of information, resources and assistance in making the most of the Internet to reunite missing pets with their owners.
<br />
Like many other pet websites about missing and found pets, our services were developed for you because of the lack of information, resources and assistance in making the most of the Internet to reunite missing pets with their owners.
<br />
</div>
</div>
</div>
</body>
</html>

What I am trying to create is this www.grandstart.com look at the sides..

All the best from Alan