SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    faux column balls up


    Good Morning from Wakefield UK probably the ugliest town in Yorkshire...

    I'm trying to create faux columns on this page -
    http://www.pauserefreshment.co.uk/3_..._tutorial.html
    But bad news I just cant get the result I need.

    I followed this tutorial -
    http://www.alistapart.com/articles/fauxcolumns/
    But then later spotted it was for absolute positioned layouts which mine is not.

    So my question is please..."How can I get all three columns equal length" ( I read the sticky post on three column layout but its such a departure from the way I've done mine I just cant use the solution)

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zygoma View Post
    Good Morning from Wakefield UK probably the ugliest town in Yorkshire...
    That's a bit of a departure from the usual sunny report. You must be having a bad day.

    I'm not sure what you are trying to do with that little background image. To do faux columns with this layout, all you need is a repeating background on the wrapper. Make the image 800px wide (and about 10px high) with the three column colors represented on that image. Standard stuff.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The easiest way is just to make a background image with 3 column colors on it and then repeat it on your wrapper. In that way it will always stretch to 100%.

    Alternatively without images use my overlay technique shown here.

    Added to your code looks like this:

    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" />
    <meta name="robots" value="noindex, nofollow" />
    <link rel="stylesheet" type="text/css" href="css/tutorial.css" />
    <title>3 column layout tutorial</title>
    <style type="text/css">
    /* 1 column css*/
    #container {
        margin: 0 30px;
        background: #fff;
    }
    #header {
        background: #ccc;
        padding: 20px;
    }
    #header h1 {
        margin: 0;
    }
    #navigation {
        float: left;
        width: 100%;
        background: #333;
    }
    #navigation ul {
        margin: 0;
        padding: 0;
    }
    #navigation ul li {
        list-style-type: none;
        display: inline;
    }
    #navigation li a {
        display: block;
        float: left;
        padding: 5px 10px;
        color: #fff;
        text-decoration: none;
        border-right: 1px solid #fff;
    }
    #navigation li a:hover {
        background: #383;
    }
    #content {
        clear: left;
        padding: 20px;
    }
    #content h2 {
        color: #000;
        font-size: 160%;
        margin: 0 0 .5em;
    }
    #footer {
        background: #ccc;
        text-align: right;
        padding: 20px;
        min-height:0;
    }
    * html #footer {
        height:1%
    }
    /* 1 column css ends*/
    
    /* 2 column css starts*/
    #wrapper2column {
        width:800px;
        margin-left:auto;
        margin-right:auto;
        background:#FFFFFF;
    }
    #leftcolumn {
        float:left;
        width:20%;
        border: 3px solid black;
    }
    #maincontent {
        border:5px solid red;
        padding-left:160px;
    }
    body {
        background:#000000;
    }
    #header2column {
        border:5px solid green;
    }
    #footer2column {
        border:5px solid yellow;
        clear:both;
    }
    /* 2 column css ends*/
    
    /* 3 column css starts*/
    #tutorial {
        background:orange url(http://www.pauserefreshment.co.uk/images/images/fauxcolumn_1.jpg) repeat-y 50% 0;
    }
    #columnleft3 {
        width:34%;
        float:left;
    }
    #columnleft3 p {
    }
    #columnmain3 {
        width:33%;
        float:left;
    }
    #columnmain3 p {
    }
    #columnright3 {
        width:33%;
        float:left;
    }
    #columnright3 p {
    }
    #wrapper3column {
        width:800px;
        background:red;
        margin-left:auto;
        margin-right:auto;
    }
    #footer3 {
        height:20px;
        background:#00CC99;
        clear:both;
    }
    /* 3 column css ends*/
    
    .outer {
        width:100%;
        overflow:hidden;
        position:relative;
    }
    .abs {
        position:absolute;
        left:0;
        bottom:20px;
        top:0;
        width:34%;
        background:#CC00CC;
        z-index:0;
        clear:both;
    }
    .a2 {
        left:34%;
        width:33%;
        background:yellow;
        border-left:1px solid #000;
        border-right:1px solid #000;
        z-index:1;
        margin-left:-1px;
    }
    .a3 {
        left:67%;
        width:33%;
        background:green;
    }
    #columnleft3, #columnmain3, #columnright3 {
        position:relative;
        z-index:2;
    }
    * html .abs {
        top:auto;
        bottom:19px;
        height:999em;
    }
    </style>
    </head>
    <body id="tutorial">
    <div id="wrapper3column">
        <div id="header3"> Header </div>
        <div class="outer">
            <div id="columnleft3">
                <p>TEST column left TEST column left TEST column left TEST column left TEST column left </p>
            </div>
            <div id="columnmain3">
                <p>TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column centralTEST column central TEST column central TEST column central TEST column central</p>
            </div>
            <div id="columnright3">
                <p>TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. </p>
            </div>
            <div id="footer3">
                <p>Footer</p>
            </div>
            <div class="abs a1"></div>
            <div class="abs a2"></div>
            <div class="abs a3"></div>
        </div>
    </div>
    </body>
    </html>
    If you have a fixed pixel width layout then don't divide it with percent because that will result in pixels being rounded and not adding up.

  4. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thank you! job done. Went for solution 1 not because I am in any way qualified to know which was better just decided to go for it and it worked :-)

    Something has got me curious and its this line of css:
    background:red url(../images/faux_column2.jpg) repeat-y 50&#37; 0;

    I would like to know in the line referenced what this means 50% 0; I understand the rest of it but the end two bits if someone could explain...
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  5. #5
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    50&#37; 0 is background-position (the first one is horizontal, the second one vertical).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zygoma View Post
    I would like to know in the line referenced what this means 50% 0; I understand the rest of it but the end two bits if someone could explain...
    Yes, as sdleihssirhc said, it's giving the horizontal and vertical position of the background image. 50% means that the 50% mark of the image (i.e. the half-way point along the top) should align with the exact middle of the element it's applied to.

    The 0 means that it starts from the top of the element (0px, 0% etc. from the top).


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
  •