SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok Experts, we have another chance. 3 Column, Liquid center, Center first in code.


  2. #2
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    /* 3 Columns Layout */
    .col3-layout { background-position:0 0; }
    .col3-layout .col-main { width:532px; margin-left:1px; display:inline; }
    .col3-layout .col-wrapper { float:left; width:755px; }
    .col3-layout .col-wrapper .col-main { float:right; }
    
    .col-left { float:left; width:182px; padding:0 0 0; margin:0 0 -1px; }
    .col-main { float:left; width:715px; padding:0 20px 20px; }
    .col-right { float:right; width:182px; padding:0 0 0; margin:0 0 -1px; }

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What Im trying to do again.. is have the center column stretch 100% of the space in the center with a 10 px margin on each side while thw right and left columns stay stuck to the outside of the browser.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi plasma800 not sure what your after but I see your using Magento... did you design the templates yourself, any good links tutorials on Magento frontend design, what do you use?
    The more you learn.... the more you learn there is more to learn.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well this template is their default enterprise template. The one you get when you actually purchase magento. The template however is almost identical in layout to the 1.4 blue template. But i remember from adjusting the 1.4 blue theme that if y ou just simply set the cent er complumn to 100%, the right column goes to the bottom.. so there was a trick to it. But i never did figure it out and i just ended up putting he crap into a table.. but I would prefer to do it with the css.

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes just what I thought, very complex process if your trying to design your own templates from a psd file I had a little spell sometime back with Magento steep learning curve it you want to create your own templates, css, php, xml...
    The more you learn.... the more you learn there is more to learn.

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm just going to adjust theirs. Theirs is not too shabby really and most of it can be adjusted by strict CSS. It's not so bad once you get used to how it all works. My problem here is a CSS problem.

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind. I went back to a table.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Am not exactly certain if this is what you want ( also I don't have time right now to make adjustments for IE, but hopefully it will set you in the right direction...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Untitled Page</title>

    <style>

    #left, #right, #center{ float:left;}
    #left{ margin-left:-100&#37;; backgroundink; position:relative;left:-210px; width: 200px;}
    #right{margin-left:-200px;background: orange; width: 200px; position:relative;right:-210px;}
    #center {width:100%; background: gray; }
    #content{border-left:200px solid pink; border-right:200px solid orange; padding:0 10px; min-width: 220px; }
    .clr{display: block; clear: both}


    </style>

    </head>

    <body bgcolor="#ffffff">


    <div id="content">
    <div id="center">Center content<br>dadfads</div>
    <div id="left">left</div>
    <div id="right">right</div>
    <span class="clr"></span>
    </div>



    </body>

    </html>


    NOTE, i thought you may have wanted equal height columns, if not just set the #content border color to transparent.


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
  •