PDA

View Full Version : Trouble with image-based CSS layout, making divs "stretch"



KZ0
Mar 16th, 2010, 01:48 PM
Hi, everyone :)

This is the first time I've ever tried to build a web site from scratch, and I decided to try to use CSS instead of tables. That, however, didn't work out too well. So I'm here looking for some assistance :)

What it looks like in PS before exporting to a bunch of images and rebuilding:
http://i42.tinypic.com/33tmsqv.jpg

HTML 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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topBanner">
</div>
<div id="mainContent">
</div>
</div>
</body>
</html>


CSS code:

@charset "utf-8";
/* CSS Document */

/* Structure */
#container{
width:735px;
}

#topBanner{
width:735px;
height:135px;
background-image:url(../_img/banner_top.jpg)
}

#mainContent{
width:735px;
}

#top{
width:735px;
height:69px;
background-image:url(../_img/main_content_top.jpg);
}

#reapeatLeft{
width:62px;
float:left;
background-image:url(../_img/main_content_right_repeat.jpg);
background-repeat:repeat-y;
}

#repeatRight{
width:62px;
float:right;
background-image:url(../_img/main_content_left_repeat.jpg);
background-repeat:repeat-y;
}

#centerContent{
background-color:#646464;
width:649px;
}

#bottom{
width:735px;
height:58px;
background-image:url(../_img/main_content_bottom.jpg);
}

Throwing in the table PS wanted me to use as well, in case it is to any help.

<!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>Malware</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="topBanner">
</div> <!-- End #topBanner -->
<div id="mainContent">
<div id="top">
</div> <!-- End #top -->
<div id="reapeatLeft">
</div> <!-- End #repeatLeft -->
<div id="centerContent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div> <!-- End #centerContent -->
<div id="repeatRight">
</div> <!-- End #repeatRight -->
<div id="bottom">
</div> <!-- End #bottom -->
</div> <!-- End #container -->
</body>
</html>


Some explanation: There's two whole images at the top, the whole top bar, and the beginning of the second one. After that I've tried making three columns, the middle one to contain text / images / etc, and the two at the sides to be the box around the text. I want them to repeat down as far as the middle box containing text stretches. At the bottom I want the image to conclude the second "box". Everything in within a #container.

I would really appreciate some help. Probably some elemental mistake I've made that seems obvious, but as noted, I have very little experience. Thanks in advance!


Update: found some errors I'm working on now. If you are thinking of a long solution to type, you might want to wait until I'm done with what I can. :)

Update2: major cleanup and added comments to keep track. I guess what I'm missing is how to make the two sidebars stretch with the main content bar. Any ideas?

KZ0
Mar 16th, 2010, 04:47 PM
Made it after all.

http://www.alistapart.com/articles/fauxcolumns/

Code added:

#container{
width:735px;
margin-left:auto;
margin-right:auto;
background-image:url(../_img/container.jpg)
}

mbaker
Mar 16th, 2010, 04:56 PM
Instead of:
#reapeatLeft{
width:62px;
float:left;
background-image:url(../_img/main_content_right_repeat.jpg);
background-repeat:repeat-y;
}

#repeatRight{
width:62px;
float:right;
background-image:url(../_img/main_content_left_repeat.jpg);
background-repeat:repeat-y;
}

#centerContent{
background-color:#646464;
width:649px;
}
and
<div id="reapeatLeft">
</div> <!-- End #repeatLeft -->
<div id="centerContent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div> <!-- End #centerContent -->
<div id="repeatRight">
</div> <!-- End #repeatRight -->
I'd suggest something like:
#reapeatOuter{
width:773px;
background-image:url(../_img/main_content_repeat.jpg);
background-repeat:repeat-y;
}

#centerContent{
background-color:#646464;
width:649px;
margin:0 auto;
}
and
<div id="reapeatOuter">
<div id="centerContent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div> <!-- End #centerContent -->
</div> <!-- End #repeatOuter --> That is, do away with the left and right columns, that are only there for the background images borders, and replace them with a single image that is a slice right across the page, from one border (image) to the other.

KZ0
Mar 20th, 2010, 09:17 PM
I see what you mean. Simpler code, and faster. I guess it would make the total size of the images slightly larger, but when the image is only one pixel high, it can't make that much of a difference.

Thanks :)