4 replies [Last post]
Vmusic
Offline
Regular
Columbus
Last seen: 13 years 31 weeks ago
Columbus
Joined: 2003-12-21
Posts: 16
Points: 0

Hi,
I have a layout that amounts to 3 columns. All 3 columns display a background image, that together make up the entire page.
The left and right column must have fixed widths, and they will have no text or content other than displaying an image.

The center column which has a background image must expand to be the full width of the screen minus the fixed width's of left and right column.

There is a site called gish that supposedly has the CSS for this, but it's very confusing. It also says it's not supported in IE 5?

Please see the web page for a better visual: http://www.kerezycom.com/band/with_tables_its_easy_and_is_xbrowser_friendly.html

Any Help Would Be Appreciated!!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Spreading out a center column

html, body {
margin: 0px;
height: 100%;
}

.lefthead {
position: absolute;
left:0px;
top:0px;
width:150px;
background-image: url(../images/hdtl.gif);
height: 100%;
}

.righthead {
position: absolute;
right:0px;
top:0px;
width:30px;
background-image: url(../images/hdtr.gif);
height: 100%;
}

.cntrhead{
margin-top: 0px;
margin-left: 151px;
margin-right: 31px;
height: 100%;
}

Or whatever height you want

Regards
Day

The only way to learn is to do it yourself

Vmusic
Offline
Regular
Columbus
Last seen: 13 years 31 weeks ago
Columbus
Joined: 2003-12-21
Posts: 16
Points: 0

swWWEEEet - HOWEVER

HI,
That works... well kind of. See the URL below:
http://www.kerezycom.com/band/background_css_test.html

I actually have two sections of layout, a header and body section and each has it's own 3 column layout.

Also .. for the center column, is there a way to 'force' the background image to display regards if there's any content between the tags???? It seems if exact width's or height's aren't set, the background image only displays if there is content between the tags.

ANY IDEAS????

Thanks!!!

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 26 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Spreading out a center column

change margin left and right to get rid of gap as below.

.cntrhead{
margin-top: 0px;
margin-left: 150px;
margin-right: 30px;
height: 100%;
}

The reason you are getting the gap is due to your use of an old doc type. You do not need to change if you update your doc type. I have added a current one below

Alos it seems I may have confused you when I changed the ID's to CLASSES. I was just testing.

But you have put SPAN around the text instead of leaving it as DIV and changing ID to class or just changing the CSS and using #.

Anyway - here it all is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html>
<head>

<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="content" />
<meta name="description" content="content" />

<style type="text/css">
html, body { 
margin: 0px; 
height: 100%;
} 

.lefthead { 
position: absolute; 
left:0px; 
top:0px; 
width:150px; 
background-image: url(images/hdtl.gif); 
height: 126px; 
} 

.righthead { 
position: absolute; 
right:0px; 
top:0px; 
width:30px; 
background-image: url(images/hdtr.gif); 
height: 126px;
} 

.cntrhead{ 
margin-top: 0px; 
margin-left: 151px; 
margin-right: 31px; 
height: 126px;
background-image: url(images/top.gif); 
} 


#need{
position: absolute;
left: 120px;
top: 80px;
font-family: Arial;
color: #E40734;
font-size: 14pt; 
font-weight: 600;
}
</style>
</head>

<body>
<!-- header section - shold cover 126 px in height and the ENTIR width of the page -->
<div class="lefthead"></div><div class="cntrhead"><-- Bad Gap between images   :-(   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div><div class="righthead"></div>
<!-- body section - shold cover the remaining height of the page and the ENTIR width of the page -->
<div id="need">I am creating a web page with the layout of a header section on top and a body section taking up the rest of the page. Each section's layout is like a 3 column table. (See picture below). The page will have 2 sections. A header section on top with an image/menu which I'll create in a div. A body section with real content, pictures etc.<br><br>The two 'side columns' here are strictly used to display a border type image. The picture below give the concept of the layout. In the picture below I made a thick border to show the 'column' concept. <b>Because I am using the layout to display images it is important that there are <u>no</u> spaces or gaps between the spans or divs. The background images should flow together seamlessly.<br><br>Any help is GREATLY!!! appreciated!!!!<br><br>
<IMG SRC="sample_pic.gif" WIDTH="316" HEIGHT="356" BORDER="0" ALT="">
</div>
</body>
</html>

Regards
Day

The only way to learn is to do it yourself

Vmusic
Offline
Regular
Columbus
Last seen: 13 years 31 weeks ago
Columbus
Joined: 2003-12-21
Posts: 16
Points: 0

**YYY**EEE**SSS

Dude,
Like thanks man.... one other tip.
For your center selector - keep your margin-left and margin-right settings, but also add a width: 100% setting.... it expands the background image out regardless of what text is there.

Gracias!

Merry Christmas Too Man