SitePoint Sponsor

User Tag List

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

    Can someone spot my code, make sure I'm not making a mistake.

    Can someone look over my code used to make these 3 columns.

    http://www.gophertelecom.com/phone-s...e-systems.html

    Code:
    /* Base Columns */
    .col-left { float:left; width:230px; margin-left: -100%; right:240px; position:relative; /*border:1px solid #ddd; padding:5px 5px 0;*/ }
    .col-main { float:left; width:736px;/* border:1px solid #ddd; padding:5px;*/ }
    .col-right { float:right; width:230px; margin-right: -230px; /*border:1px solid #ddd; padding:5px 5px 0;*/ }
    
    /* 3 Columns Layout */
    .col3-layout .col-main { width:100%; margin-left:10px;  }
    .col3-layout .col-wrapper { float:left;  width:95%; }
    .col3-layout .col-wrapper .col-main { float:left; }
    * html .col-left {left: 230px;  /* RC width */
    }
    See any major issues with this idea?

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's the xhtml

    Code:
    <div class="main-container col3-layout">
               <?php echo $this->getChildHtml('breadcrumbs') ?>
    		  
    
    		   <div class="main">
                    <div class="col-wrapper">
                        <div class="col-main">
                            <?php echo $this->getChildHtml('global_messages') ?>
                            <?php echo $this->getChildHtml('content') ?>
                        </div>
                        <div class="col-left sidebar"><?php echo $this->getChildHtml('left') ?></div>
                    </div>
                    <div class="col-right sidebar"><?php echo $this->getChildHtml('right') ?></div>
              </div>
            </div>

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the code actually creates an unwanted extra gap on the right side of the center column. I can't figure out how to fix it, i can live it but I would prefer 10px on each side.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    622
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    just a quick guess

    float your right col to left and give a left margin

    Code:
    .col-right { float:left; width:230px; margin-right: -230px; margin-left:20px; }
    vineet

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, our good friend Magento : (

    I think your wide gutter is from the right column being TOO far to the right... see how there's no space between the right side of the right column and the right side of the page? At least not on my 17" monitor.

    Did you just do that new upgrade they had? I had just done a bunch of work moving someone's main col to first-in-source and wrapping the sidebars, and now Magento's gone and done it in the upgrade. I don't understand the float: right AND the margin-right: -230px...

    I see what Vineet is doing and it may work, if the right side is floated left then it will try to hug the wrapper. However, the wrapper should have been wide enough to fill the gap in the first place.

    I also notice that, if you were to give all these major boxes ugly background colours, you'd see that col-main is actually sticking out of wrapper... maybe because wrapper was made a hair too small. If you keep a backup copy somewhere, you should be able to try out Vineet's code and see how that works for you (use the ugly background colours though so you can SEE the boxes you are playing with!!). If it breaks as you play with it, you can always go back to what you have now, because you will have a backup.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes. I did a fresh install of 1.4 and used their blank template. I think attempted to adjust their 3 column layout following this as a guideline http://www.alistapart.com/articles/holygrail/

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally think I should just put the 3 columns into a table. That would solve all of my problems but I was really attempting to stick to pure css layout.

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I implemented the code about and now my right column is not slammed against the edge of the screen. I also applied a green bg color to the .col-wrapper, which is set at 95&#37;. I notice it is shorter that the .col-main, but if I set it to 100%, the right column gets stuck to the bottom.

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

    This can#t be correct.

    Code:
    .col3-layout .col-main { width:100&#37;; margin-left:10px;  }
    How can anything fill 100% of the available space and then move 10px more. It's just impossible. Nothing can be bigger than 100%. Remove the 10px margin-left.

    You'll also need to set a min-width for the page to stop the column dropping.

    Why did you choose such a complicated 3 column layout unless you specifically wanted that middle column first in source arrangement?

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    done. Helps.

    Ad to answer your question, this layout was basically already in the template. And I did like the fact that the content was the first in the source, although i'm not positive if it should be first or second for the sake of seo, but basically I was trying to keep with the template as much as I could for the moment and I could re-evaulate later. It is complicated and I pray it works cross browser.

  11. #11
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would still like to get the right column slammed against the right side of the screen. I'm decent with css, but this layout is really funky and now it's totally Frankenstein'd..

  12. #12
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and I still don' understand how this is all better than tables.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by plasma800 View Post
    and I still don' understand how this is all better than tables.
    Who said it was better

    It is better in a lot of ways but in some situations tables do behave better but they shouldn't be abused for layout.

    The problem here is that you have picked something that is overly complicated and the dynamics are quite hard to get a grasp on if you haven't seen the method before.

    To make room and a gap you need to increase the padding on the main element into which the column is dragged. The center column needs to be 100&#37; and not 95%.


    Code:
    .wrapper {}
    .page { width:100%; margin:0 auto; padding:0 0; text-align:left; }
    .page-print { background:#fff; padding:20px; text-align:left; }
    .page-empty { background:#fff; padding:20px; text-align:left; }
    .page-popup { padding:20px; text-align:left; }
    .main-container {}
    .main { margin:10px 0; padding-left: 230px;   /* LC width */
      padding-right: 240px;  /* RC width */
     }
    
    /* Base Columns */
    .col-left { float:left; width:230px; margin-left: -100%; right:240px; position:relative; /*border:1px solid #ddd; padding:5px 5px 0;*/ }
    .col-main { float:left; width:736px;/* border:1px solid #ddd; padding:5px;*/ }
    .col-right { float:right; width:230px; margin-right:-240px;  /*border:1px solid #ddd; padding:5px 5px 0;*/ }
    
    /* 1 Column Layout */
    .col1-layout .col-main { float:none; width:auto; }
    
    /* 2 Columns Layout */
    .col2-left-layout .col-main { float:right; }
    .col2-right-layout .col-main {}
    
    /* 3 Columns Layout */
    .col3-layout .col-main { width:100%; /*margin-left:10px;*/  }
    .col3-layout .col-wrapper { float:left;  width:100%; background-color:#00FF66;}
    .col3-layout .col-wrapper .col-main { float:left; }
    * html .col-left {left: 230px;  /* RC width */
    }
    That should line it up unless I've missed something
    Last edited by Paul O'B; Mar 24, 2010 at 16:17.

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It's not the OP's fault, Paul. I have a friend (who I met here at SP asking for help with his Magento pages) who I've been spending the last several months on-and-off tweaking this Magento thing. Recently there was a large upgrade and many people complained that their pages broke (including the friend's). At first I thought they were doing Holy Grail but it's not: A box wrapping main and left is floated left, while a right col is floated right. Inside the wrapping box, main first-in-source is floated right and left col floated left. The problem comes in when pages have one, two and three columns. The CSS just piles up. Users like the OP are supposed to load several pages of CSS and then put any changes they themselves want into a maintheme.css... ug!

    Magento is almost a reason to go to tables... it's practically an abuse of CSS, even though individual parts make plenty of sense. Or maybe I'm biased because it's the first of this kind of nasty template-for-everyone that I've actually had to get into up to my elbows. Magento has increased my use of Firebug in amazing ways.

  15. #15
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah my last template design on this platform, I just used a 3 column container table, and that worked great. I was abashed by purists, but really in the end, isn't it about making money first? So get site up and go

  16. #16
    SitePoint Zealot
    Join Date
    Dec 2004
    Location
    houston
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You my friend, are a genius. that solved it just fine.


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
  •