SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 35 of 35
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    2.) In the example you gave me at this link...

    http://www.pmob.co.uk/temp/3col-stic...r-min-max2.htm

    I had a *really* hard time following your code - especially when it came to the absolute "faux" columns.
    You should refer to the original article for the details as it is still the same concept. It's the idea you need to understand as the implementation may vary slightly between layouts.
    My code and screenshots above seem to accomplish everything you were teaching me, but I felt like the final version of my code was much more streamlined and thus easier to follow, and yet it yielded the same end results.

    If I am missing something between my example and your example, please correct me.

    Here are some snippets of your code from the link above...

    ***Oops, it looks like you may have already edited your code from what I was going off of the other day, so my comments may be moot?! **


    I think you may be confusing it with another of the examples as the one above has never changed since I wrote it a 2 years ago. it is pretty clean but has one extra div to cater for the three source order floated columns (another complicated and advanced concept).

    One of the code examples I was going off of the other day had all of these funky "absolute coordinates"...

    You had Faux Column #1 with Left: 0, and then Faux Column #2 at like Left: 122 and then Faux Column #3 at like Left: 343 and it went against the logic of the absolute columns being "contained" in a relative column. It was almost as if the Faux Colored Columns were being absolutely placed on the screen??
    They are absolutely placed on the screen I'm not sure what you meant exactly.

    I think you may be thinking about one of these demos. The column colours are placed with the "left" position to match the floated columns positions. The left position is needed for each column because we are placing them inside the all encompassing parent container. Therefore we have to change the position of the overlay to match the position of the floated columns. We use the parent container for this (and not the column itself) because the parent container is the only element that will be as tall as the tallest column because all the columns are inside it. That's the basis of the technique.

  2. #27
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I think you may be confusing it with another of the examples as the one above has never changed since I wrote it a 2 years ago. it is pretty clean but has one extra div to cater for the three source order floated columns (another complicated and advanced concept).
    Yeah, I understand your use of the extra DIV now.

    They are absolutely placed on the screen I'm not sure what you meant exactly.

    I think you may be thinking about one of these demos. The column colours are placed with the "left" position to match the floated columns positions. The left position is needed for each column because we are placing them inside the all encompassing parent container. Therefore we have to change the position of the overlay to match the position of the floated columns. We use the parent container for this (and not the column itself) because the parent container is the only element that will be as tall as the tallest column because all the columns are inside it. That's the basis of the technique.
    This is hard to do online...

    My code which you blessed goes like this...

    Code HTML4Strict:
    	<body>
    		<div id="wrapperMinusFooter">
    			<div id="header"></div>
    			<div id="col1">COL1</div>
    			<div id="col2"></div>
    			<div id="col3">COL3</div>
     
    			<div id="one"></div>
    			<div id="three"></div>
    		</div>
    		<div id="footer">FOOTER</div>
    	</body>
    Code CSS:
    /* CREATE BACKGROUND COLOR FOR COLUMNS */
    #one{
    	clear: both;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	width: 150px;
    	background: yellow;
    }
     
    #three{
    	clear: both;
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	right: 0;
    	width: 150px;
    	background: #D685AD;
    }


    The other code I am referring to goes like this...

    Code HTML4Strict:
    <body>
    <div id="wrapper">
    	<div id="header"></div>
    	<div id="outer">
    		<div id="left"></div>
    		<div id="content"></div>
    		<div id="right"></div>
     
    		<div class="col one"></div>
    		<div class="col two"></div>
    		<div class="col three"></div>
    	</div>
     
    	<div id="footer"></div>
    </div>
    </body>


    Code CSS:
     
    .col {
    	width:200px;
    	position:absolute;
    	z-index:0;
    	left:10px;
    	bottom:0;
    	border:1px solid #000;
    	border-top:none;
    }
    .one {background:red;}
    .two {
    	background:#FF6600;
    	left:222px;
    	width:334px;
    }
    .three {
    	background:#CC3399;
    	left:568px;

    Now why is it done the way it is done in the second set of code above?

    Why all those Left: xxx when the first example doesn't need them?

    I'm lost...



    TomTees

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by TomTees View Post

    The other code I am referring to goes like this...

    Code HTML4Strict:
    <body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="outer">
            <div id="left"></div>
            <div id="content"></div>
            <div id="right"></div>
     
            <div class="col one"></div>
            <div class="col two"></div>
            <div class="col three"></div>
        </div>
     
        <div id="footer"></div>
    </div>
    </body>


    Code CSS:
     
    .col {
        width:200px;
        position:absolute;
        z-index:0;
        left:10px;
        bottom:0;
        border:1px solid #000;
        border-top:none;
    }
    .one {background:red;}
    .two {
        background:#FF6600;
        left:222px;
        width:334px;
    }
    .three {
        background:#CC3399;
        left:568px;

    Now why is it done the way it is done in the second set of code above?

    Why all those Left: xxx when the first example doesn't need them?

    I'm lost...



    TomTees
    Hi Tom,

    I'd need to see the example that the code above comes from to say why it needs the extra code but I'm guessing it's because the three columns are separate (have gaps between where no background shows) as in that last demo I linked to. For your example we don't need the middle column because the background from the parent shows through and provides that column color. It provides the background to all three columns actually but because we are overlaying the left and right then all we see is the middle.

    However if you wanted three separate columns colours with white gaps between then you would need to paint each column with the absolute column technique which would mean the middle column would be placed at leftxpx so that it matches the content of that column.

    In your example we only needed to place the first and last columns which we did with left:0 and then right:0. Of course in a fixed width layout we could have placed the right column with leftxpx of course as we know where it should be.

  4. #29
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi Tom,

    I'd need to see the example that the code above comes from to say why it needs the extra code but I'm guessing it's because the three columns are separate (have gaps between where no background shows) as in that last demo I linked to.
    Right! That code was from your link here:

    http://www.pmob.co.uk/search-this/ab...umns3-hide.htm


    For your example we don't need the middle column because the background from the parent shows through and provides that column color. It provides the background to all three columns actually but because we are overlaying the left and right then all we see is the middle.

    However if you wanted three separate columns colours with white gaps between then you would need to paint each column with the absolute column technique which would mean the middle column would be placed at leftxpx so that it matches the content of that column.

    In your example we only needed to place the first and last columns which we did with left:0 and then right:0. Of course in a fixed width layout we could have placed the right column with leftxpx of course as we know where it should be.
    Okay, that straighten things out for me!

    Thanks,



    TomTees

    P.S. Why is something that is visually so simple, so difficult to do and understand on the web?! GEESH!!!!

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    P.S. Why is something that is visually so simple, so difficult to do and understand on the web?! GEESH!!!
    Equal columns is a designers "eye" looking at things but in most cases we don't need to do that. CSS is all about the content taking control rather than putting content in a cage.

    Who says that if you have three columns then they all need to be the same height?

    Equal columns is a left over from the table age because that's the only way table cells work and designers had no choice but to make columns equal. CSS on the other hand frees your from this constraint. Columns can be as long as they need to be.

    There's often a trade-off between keeping things simple and at the same time trying to make then look good. A good designer can create great looking sites without needing to resort to tricks like equal columns.

    However css is still evolving and there will be easier ways to manage this in the future but for now we either use these tricks or we go for a simpler method.

  6. #31
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    A good designer can create great looking sites without needing to resort to tricks like equal columns.
    or 100&#37; min-height for that matter.

    It's about whether one embraces their inner artsy type or not -- what's more important? Conveying the information to the user in a clear/concise manner or hanging a bunch of goofy graphics around the content?

    There's a reason REAL websites (amazon, ebay, google) are light on the graphics -- they don't need it as they have content of value. It's why the approach to site building I advocate is content FIRST. Write your page content, mark it up semantically so people who won't see your goofy graphics and things like search engines have meaning, THEN create your layout in CSS, and finally last start up the goofy paint program to make graphics to go on your layout.

    The approach beats the tar out of creating a layout and then shoe-horning content into it.

    It's why PSD "designers" (and I use that word VERY loosely) with their pixel perfect designs are usually a miserable /FAIL/ right out of the gate. Not only do usually have zero knowledge of things like accessibility guidelines, they also tend to design elements that while very pretty in photoshop are impractical/overcomplicated to actually code into a page.

    Websites are only as complex as you make them -- and if you get your heart set on a certain layout effect you quite often have shot yourself in the foot before you've even started. You start with a layout with graphics and don't vary from it in the coding process, you're already tying your hands behind your back and lining yourself up for a kick in the balls.

  7. #32
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, and just to confuse matters more... here's my approach.

    http://www.cutcodedown.com/for_others/tomtees

    Which muddies the waters by adding semi-fluid capability to the layout, just to show how complex you can get. This approach is similar to Paul's but a little different in the placement logic. It uses a second inner wrapping DIV like Paul's, but puts the faux-column div's BEFORE the content so source order handles our depth sorting better (especially in legacy IE)... and they're nested so that you only need one ID to target all of them. I use three so you can set the center background separately if so desired and so you can more readily set all three appearances in the same 'spot'.

    The big trick on mine is to set #fauxColumns...
    <div id="fauxColumns"><div><div></div></div></div>

    ... to position:absolute; bottom:0; and then on the inner div just use margins and paddings to reveal the parent and constrain the innermost one (center column). Setting a uber-tall height (9999em) on the innermost one makes them all that tall, but because #fauxColumns is absolute positioned at the bottom anything that goes off the top is automagically cut off.

    If you browse through the CSS I tried to document anything and everything you might have questions as to what/why/how.

    Said code having the bonus of working all the way back to IE 5.01 with no bugs mostly through following several simple rules I have for writing compatible code. It also puts the content column first in the source order which is good if you have less relevant data in the sidebar -- which one can usually assume is the case if you have a menu across the top.

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks good Jason and well documented.

  9. #34
    SitePoint Evangelist TomTees's Avatar
    Join Date
    Apr 2010
    Location
    Iowa
    Posts
    553
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Looks good Jason and well documented.
    Who is Jason?

    Did I miss something?


    TomTees

  10. #35
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TomTees View Post
    Who is Jason?
    That would be me.

    Likely referring to my example:
    http://www.cutcodedown.com/for_other.../template.html

    and it's over-documented CSS
    http://www.cutcodedown.com/for_other...ees/screen.css


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
  •