Forum Moderators: not2easy
There are plenty of templates/sites/tutorials/examples that advise how to create a 3-column site with a header & footer.
(e.g. - http://css-discuss.incutio.com/?page=ThreeColumnLayouts [css-discuss.incutio.com])
There are also some sites (tho' considerably fewer) that advise how to have a background image automagically resize according to the size of the browser window. The key seems to be to specify the following bit in the "<div style=" definition:
<img src="myImageHere.jpg" width="100%">
specifying the width, but NOT the height (so that the image height can resize according to the browser window size).
But -- has anyone seen or built a layout which will allow a single resizing background image ACROSS THE ENTIRE PAGE, but also have 3 columns (ideally percentage-based -- e.g. 20/60/20), and ideally with a header & footer)?
And, if so, can you point me towards an example -- 'cause that's what I'd really like to do.
Thanks kindly,
- Richard
[edited by: DrDoc at 6:42 pm (utc) on July 29, 2008]
[edit reason] No URIs, please. See posting guidelines. [/edit]
FYI - Personal links are allowed so it will probably be edited out.
As to resizing background images, it cannot be done with plain css. While I have never used it, there is a javascript solution (I believe). Check the CSS Library (archives) as this has been discussed before.
On a side note, you may not want to have your column percentages set to add up to 100% as it could cause a layout problem in older browsers with their default margin and padding settings. You may want to drop 2% off each column. Just a suggestion.
Marshall
[edited by: Marshall at 5:41 pm (utc) on July 29, 2008]
Thanks for the welcome.
Perhaps this isn't CSS, but here's the code that does indeed allow the browser to resize the background image:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test page with resizing background</title>
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="yourImageHere.jpg" width="100%"></div>
<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;">
<p> </p>
<font color = "#ffffffff"><p>Content here ...</p></font>
</div></body></html>
The key is at the end of the first "<div style" section -- the img src has a width specified, but no height.
That said, what I'd like to do is add 3 columns (and ideally a header & footer as well) to the above, but still keep the image resizing over the lot.
Cheers,
- Richard
here's the code that does indeed allow the browser to resize the background image
Well, that doesn't resize a "background" image. It resizes a regular image that is simply layered underneath other content. A true background image does not scale that way.
Ummm .... okay .... well, that'd work too.
Can I specify a layer underneath all three columns & a header/footer and, if so, how?
- Richard
What you are trying to do is a CSS3 function and is not currently supported by most browsers. That is why I mentioned the javascript. I believe it is a getelementbyID function, but don't hold me to that.
Insofar as inserting a header, 3 columns and a footer, they would be placed in the area where you currently indicate the content.
Marshall
with what I found here:
[css-tricks.com...]
and created the following, which is a reasonable start. Not elegant, but workable (at least on IE6 and Firefox2, which are all I have handy right now):
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>blah</title>
<meta name="Author" content="writer" />
<meta name="Keywords" content="whatever" />
<meta name="Description" content="yadda yadda" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:70%; color: white;}
#background{position:absolute; z-index:1; width:100%; }
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:left;}
#layoutdims {
clear:both;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative;/* Fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:95%;/* almost width of whole page (avoid horizontal scrollbar */
overflow:hidden;/* chop off overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;/* width of page */
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;/* no left or right padding on columns; just made narrower */
/* only top and bottom padding */
overflow:hidden;
}
/* 3 Column settings */
.threecol {
}
.threecol .colmid {
right:25%;/* width of the right column */
}
.threecol .colleft {
right:50%;/* width of the middle column */
}
.threecol .col1 {
width:46%;/* width of center column content (column width minus side padding) */
left:102%;/* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%;/* Width of left column content (column width minus padding on either side) */
left:31%;/* width of (right column) */
/*plus (center column left and right padding) */
/*plus (left column left padding) */
}
.threecol .col3 {
width:21%;/* Width of right column content (column width minus padding on either side) */
left:85%;/* Please make note of the brackets here:*/
/* (100% - left column width) */
/*plus (center column left and right padding)*/
/*plus (left column left and right padding) */
/*plus (right column left padding) */
}
</style>
</head>
<body>
<div>
<img id="background" src="yourImageHere.jpg" alt="" imgTitle="" />
</div>
<div id="scroller">
<div id="content">
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<h4>Column 1</h4>
<p>c1 text here</p>
<h4>Meanwhile, back at the ranch ...</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam fermentum pulvinar nibh. Vivamus eu leo. Sed facilisis,
odio sed mattis sagittis, nunc ante fermentum erat,
at volutpat nisl pede fringilla nisl.</p>
<p>Yadda, yadda, yadda ...</p>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<h4>Column 2 (left)</h4>
<p>c2 text here</p>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<h4>Column 3</h4>
<p>c3 text here</p>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-*****";
urchinTracker();
</script>
</body>
</html>
- Richard
[edited by: tedster at 3:19 pm (utc) on Aug. 3, 2008]
[edit reason] I obscured the Google Analytics ID [/edit]
