SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 columns and resizing background image ??

    Greetings -

    There are plenty of templates/sites/tutorials/examples that advise how to create a 3-column site with a header & footer.

    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. 18/58/18 - leaving room for borders), 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

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I created the following (but since I'm new, I couldn't post the code in its entirety, because it contains three links -- hence the <link removed> tags), 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"
    "<link removed>">
    <html xmlns="<link removed>" 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&#37;; 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="<link removed>" type="text/javascript">
    </script>
    <script type="text/javascript">
    _uacct = "UA-451410-1";
    urchinTracker();
    </script>
    </body>
    </html>

    Cheers.

    - Richard

  3. #3
    SitePoint Zealot kazbek's Avatar
    Join Date
    Jun 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for so detailed reply.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •