3 columns AND resizing background image ??

  • expatCanuck
  • Newbie
  • Newbie
  • expatCanuck
  • Posts: 5

Post 3+ Months Ago

Greetings -

There's no shortage 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)

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 (or can you tell me how to build) a layout which will allow a single resizing background image ACROSS THE ENTIRE PAGE (all the columns, header, footer)?

If so, can you point me towards an example? -- 'cause that's what I'd really like to do.

Thanks kindly,

- Richard

__________________
http://oldWithoutMoney.com
  • expatCanuck
  • Newbie
  • Newbie
  • expatCanuck
  • Posts: 5

Post 3+ Months Ago

Well, I merged what I found here:
http://matthewjamestaylor.com/blog/perfect-3-column.htm

with what I found here:
http://css-tricks.com/how-to-resizeable ... und-image/

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):

Code: [ Select ]
<!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-451410-1";
urchinTracker();
</script>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>blah</title>
  7. <meta name="Author" content="writer" />
  8. <meta name="Keywords" content="whatever" />
  9. <meta name="Description" content="yadda yadda" />
  10. <meta http-equiv="imagetoolbar" content="no" />
  11. <style type="text/css">
  12. html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
  13. body {font-family:verdana, arial, sans-serif; font-size:70%; color: white;}
  14. #background{position:absolute; z-index:1; width:100%; }
  15. #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
  16. p {line-height:1.8em; letter-spacing:0.1em; text-align:left;}
  17. #layoutdims {
  18. clear:both;
  19. border-top:4px solid #000;
  20. margin:0;
  21. padding:6px 15px !important;
  22. text-align:right;
  23. }
  24. /* column container */
  25. .colmask {
  26. position:relative;/* Fixes the IE7 overflow hidden bug */
  27. clear:both;
  28. float:left;
  29. width:95%;/* almost width of whole page (avoid horizontal scrollbar */
  30. overflow:hidden;/* chop off overhanging divs */
  31. }
  32. /* common column settings */
  33. .colright,
  34. .colmid,
  35. .colleft {
  36. float:left;
  37. width:100%;/* width of page */
  38. position:relative;
  39. }
  40. .col1,
  41. .col2,
  42. .col3 {
  43. float:left;
  44. position:relative;
  45. padding:0 0 1em 0;/* no left or right padding on columns; just made narrower */
  46. /* only top and bottom padding */
  47. overflow:hidden;
  48. }
  49. /* 3 Column settings */
  50. .threecol {
  51. }
  52. .threecol .colmid {
  53. right:25%;/* width of the right column */
  54. }
  55. .threecol .colleft {
  56. right:50%;/* width of the middle column */
  57. }
  58. .threecol .col1 {
  59. width:46%;/* width of center column content (column width minus side padding) */
  60. left:102%;/* 100% plus left padding of center column */
  61. }
  62. .threecol .col2 {
  63. width:21%;/* Width of left column content (column width minus padding on either side) */
  64. left:31%;/* width of (right column) */
  65. /*plus (center column left and right padding) */
  66. /*plus (left column left padding) */
  67. }
  68. .threecol .col3 {
  69. width:21%;/* Width of right column content (column width minus padding on either side) */
  70. left:85%;/* Please make note of the brackets here:*/
  71. /* (100% - left column width) */
  72. /*plus (center column left and right padding)*/
  73. /*plus (left column left and right padding) */
  74. /*plus (right column left padding) */
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <div>
  80. <img id="background" src="yourImageHere.jpg" alt="" imgTitle="" />
  81. </div>
  82. <div id="scroller">
  83. <div id="content">
  84. <div class="colmask threecol">
  85. <div class="colmid">
  86. <div class="colleft">
  87. <div class="col1">
  88. <!-- Column 1 start -->
  89. <h4>Column 1</h4>
  90. <p>c1 text here</p>
  91. <h4>Meanwhile, back at the ranch ...</h4>
  92. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  93. Nam fermentum pulvinar nibh. Vivamus eu leo. Sed facilisis,
  94. odio sed mattis sagittis, nunc ante fermentum erat,
  95. at volutpat nisl pede fringilla nisl.</p>
  96. <p>Yadda, yadda, yadda ...</p>
  97. <!-- Column 1 end -->
  98. </div>
  99. <div class="col2">
  100. <!-- Column 2 start -->
  101. <h4>Column 2 (left)</h4>
  102. <p>c2 text here</p>
  103. <!-- Column 2 end -->
  104. </div>
  105. <div class="col3">
  106. <!-- Column 3 start -->
  107. <h4>Column 3</h4>
  108. <p>c3 text here</p>
  109. <!-- Column 3 end -->
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  117. </script>
  118. <script type="text/javascript">
  119. _uacct = "UA-451410-1";
  120. urchinTracker();
  121. </script>
  122. </body>
  123. </html>


Cheers.

- Richard

//moderator note - when posting code, please use the Code bbcode option in your post to make it more readable. Thanks

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 21 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.