SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flogging a dead horse

    I have been trying for sometime now to make a truly elastic 3 column site that works in IE6 and FF without resorting to javascript and am coming to the conclusion it's nigh on impossible without seriously compromising the way the site is going to look. Can anybody point me to a fully functioning 3 column site that has images in and rounded corner boxes etc; by that I mean not a site built mainly with <p></p> and a few tiny images. Please don't point me to a site where they explain the theory (yet oddly their own sites are built with tables) because I have tried most of them and they don't work. I may sound defeated but thats far from the truth, I guess I'm looking for reassurance that I am not flogging a dead horse
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

  2. #2
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm assuming you're going for a fluid layout, in which case I'd like to know the answer myself. As for a fixed width layout, there's always absolute positioning with background images, but I'm not sure if that's what you want to do...
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  3. #3
    SitePoint Enthusiast mrsmiley's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about the 3 column layout on Blue Robot? Pretty sure its CSS only from memory

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mobyme
    (yet oddly their own sites are built with tables)
    That should be telling you something right there.

    You can do CSS layout three, four, five columns so long as only ONE of the columns is dynamic width, you don't care about vertical positioning of the content, don't mind having to spend a couple hours dicking with the code if you want styled backgrounds stretching the full height of the longest column, and are willing to add in extra DIV for positioning... Though often that adds up to so many DIV it would be faster, simpler and easier to...

    JUST USE A TABLE.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mobyme
    I have been trying for sometime now to make a truly elastic 3 column site that works in IE6 and FF without resorting to javascript and am coming to the conclusion it's nigh on impossible without seriously compromising the way the site is going to look. Can anybody point me to a fully functioning 3 column site that has images in and rounded corner boxes etc; by that I mean not a site built mainly with <p></p> and a few tiny images. Please don't point me to a site where they explain the theory (yet oddly their own sites are built with tables) because I have tried most of them and they don't work. I may sound defeated but thats far from the truth, I guess I'm looking for reassurance that I am not flogging a dead horse
    Flogging a dead horse, no. Beating a dead horse, no. Kicking a dying horse to prevent it from spending its last moments in peace before heading to the Purina factory, no.

    It can be done. In fact, I have an example right here (perfect for sidebars with advertisements and "secondary" information):
    http://www.sitepoint.com/forums/show...35&postcount=6

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol - You should take heed of your own signtaure :
    If you don't think you can, you probably can't.
    Your question is a bit too vague and generic to offer any real advice.

    Can anybody point me to a fully functioning 3 column site that has images in and rounded corner boxes etc;
    Perhaps you can point to a table site that we can see as an example of what you want then we can say whether css is the right tool for the job.

    If you want all the behaviours of tables with equalising columns and stretchy cells and stretchy height etc etc.... Then you may as well use a table!

    I can say that I code an average of 3 new site templates a week for clients and haven't needed to use a table layout in the last 4 years. Of course I may have made some sacrifices and design changes to accomodate this but the end result was always greeted enthusiastically and performed well.

    The three column demo thread shows some techniques you can use or there are a load of layouts here to look at.

    http://blog.html.it/layoutgala/

    If you are specifically looking for three fluid columns with equalising height columns with rounded corners then your best bet is to still use a table for this but use css for all the stying and inner elements etc.

  7. #7
    <code></code><WoW></WoW> nukeemusn's Avatar
    Join Date
    Apr 2006
    Location
    Honolulu, HI
    Posts
    329
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow

    JUST USE A TABLE.
    *Gasp* Away with you, evildoer! (Just kidding, of course)

    When I first started, I learned to use tables. Then I head about standards compliance anc CSS and everthing that goes with it. I'm a slightly obsessive-compulsive person. When I decided that I wasn't going to use tables anymore, I jsut stopped using them. There have been SO MANY times that I've been tempted to use them again, but I have resisted, and will continue to resist. Just out of principle.

    It's kind of like quitting smoking. The cravings never go away, even though you know the stuffs bad for you.
    My Blog
    The Obsidian Order - WoW Guild on US-Nagrand
    nukeemusn = Nuclear Electricians Mate US Navy

  8. #8
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Perhaps there's life in the old nag yet

    Thanks for the feedback everybody
    I dont have a problem with CSS per se, in fact I think it's brilliant especially when you compare it to nested tables. I know which one I would prefer to deal with when something has gone wrong or needs changing, CSS wins hands down. My query was based on my own experience of trying to make a fluid/elastic 3 column site that will work in IE6 and FF (I'm not really concerned about the rest) and still look good when resized in the browser. The first bit is no problem getting the site to look good in both options, but resize and they look garbage or at least mine do in explorer; fix this and firefox goes to hell in a handcart on the resize. My point about sites that only have small images and are mostly text is although the problems are the same they don't look so obviously bad. Paul, my problem is I do believe it can be done and if I am to find the answer it will probably be provided by someone in this forum. Your right I should have been more specific. I am trying to make a fluid centre column that will hold four 101px x 89px images side by side with a little padding to keep them apart, something you see everyday on sites made in tables, but my efforts with CSS looks positively evil on resize. I have been working with a layout from layoutgala. Dan I am going to take a shot at your example. Finally going back to my original question does anybody know of a fluid/elastic three column commercial site with images or is it a format that is going to have to wait in the wings until there is some form of browser convergence on css standards
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

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

    I am trying to make a fluid centre column that will hold four 101px x 89px images side by side with a little padding to keep them apart,
    If it were simply to hold 4 images of fixed width and centred then that is no problem at all and is just basic css. However I think what you are asking is that you want 4 images that are evenly spaced across the 100% width of the available space and then expand and contract evenly as the window is opened and closed. This is in fact classic table behaviour and only browsers that support display:table could manage this. Ie doesn't support this and neither does ie7.

    You could use percentage percentage margins and approximate something but it wouldn't be quite the same.

    However you stated that you wanted a fluid layout and this behaviour of tables is anything but fluid. It will allow those 4 images to spread evenly across the page but on a 1600px screen (which mine is set to) then i get 4 silly images spread right across the page. Then when I close the window up i still get 4 images which I have to scroll to see. I don't see that that behaviour is fluid at all

    Tables cannot wrap images (while evenly spacing them) and also allow more images to appear alongside in the way that floats do. Therefore I would argue that floats are a much better fluid option and suit all screen sizes much better than a table layout.

    The problem with floats is at some stage the page will collapse on itself and the only option is to apply a min-width before that happens. Of course ie6 doesn't understand min-width (ie7 does so this won't be an issue for long as ie7 is to be distributed via automatic update and there will be a sudden and massive swicth from ie6 to ie7) but we can use an expression for now to accomplish this.

    This is the way I would do a 3 column fluid central column layout that needs to display multiple images. (Bear in mind I've just cobbled this together in a few minutes from a couple of old layouts )

    http://www.pmob.co.uk/temp/3col/3col-fixed-side-em.htm

    You can ignore the ie specific code as that was part of a vertical centering example that doesn't really bare relation to the example. However the expression is necessary to keep the pahge open before overlap occurs.

    You could centre groups of images but it doesn't look very good all though I could space them out better than this example.

    http://www.pmob.co.uk/temp/3col/3col-fixed-side-em2.htm

    If you look at the first example and resize the text to largest the layout should accomodate the changes without looking too bad.

    However I still think that you are looking to have images spread only 4 at a time and evenly across the screen and as at present there is no reliable way to do this in IE. Of course as mentioned above I would change the rules a bit and just float the images and let them line up depending on the width of the screen.

    Regarding sites that use css the new yahoo site scales very well in ie when you resize the text although the site is by no means valid and it doesn't mainly use tables for layout although there is the odd table in there.

    http://www.yahoo.com/

  10. #10
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it's only right and proper that I should come back and eat my humble pie in public, however it's humble pie with a dollop of cream. Yes, I take back what I said about flogging the dead horse trying get a 3 column elastic/fluid site with large images to look the same in FF & IE6 and still look reasonable when resized in a smaller browser. Paul is right it can be done, after dissecting everything that Paul has ever written about CSS on SP, I've done it. I am still yet to find a commercial site that uses the format though. I am amazed at how many sites there are still using tables and I am talking about a lot of sites built in the last 6 months would you believe. Anyhow, thanks Paul for keeping me on the straight and narrow. I think I've finally got CSS nailed and should be able to help others now
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think I've finally got CSS nailed and should be able to help others now
    That would be much appreciated and glad that we could help

    CSS is far from perfect but I am constantly surprised by its flexibility and if IE had been better behaved from the start I'm sure the tables debate would have ended long ago.

    Some people won't ever convert from tables but there are lots of new designers who are just delving straight into css and probably never coded a table layout of old.

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,832
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow
    JUST USE A TABLE.
    Unfortunately, there are limitations with CSS and Tables cannot be completely done away with.

    On my site I have a fixed-width left column (100px) for a navigation bar and a variable width right column to fit the rest of the content. The problem was with CSS that if the width of the right column exceeded screen width - 100px that it wouldn't shrink to fit, it would float beneath the navbar. The only way to get it right was to wrap everything in a table with a fixed-width td on the left so the right td would constrain the content to keep it on the same line.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Negative margins are capable of correcting that problem. You just have to know how to use them properly (the HTML and CSS for it is VERY complex, and not for the light-hearted; even explaining it will take a long-winded post to illustrate properly).

  14. #14
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude
    On my site I have a fixed-width left column (100px) for a navigation bar and a variable width right column to fit the rest of the content. The problem was with CSS that if the width of the right column exceeded screen width - 100px that it wouldn't shrink to fit, it would float beneath the navbar.
    That just sounds like a simple two-column, left-column floated layout which should be accomplished without tables no problem.

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that I've had a chance to re-read it, you're right Tyssen. I originally read it as a three-column layout problem (with the menu above the content, and the sidebar below it).

    Ugh... talk about having a bad day.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here is an example that doesn't suffer from float drop and doean't need a table

    http://www.pmob.co.uk/temp/2col-nofloatdrop.htm

  17. #17
    I hate Spammers mobyme's Avatar
    Join Date
    Apr 2004
    Location
    Sunny Snowdonia
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My recent foray into the dark recesses of CSS convinces me that virtually anything is possible, the only thing that limits it is our knowledge. I guess that's where forums like this come into their own allowing us to pick each others brains for free. I put my hands up and admit that I was just about to give up when suddenly it seemed like a veil was lifted and I finally started to understand. Yes, it's incredibly difficult but the results are definitely worth it. It's probably been suggested lots of times before but it is a brilliant exercise. Take an old tables site and reproduce it in CSS, then play with it, I think the results would convert any cynic, especially when you consider how long those changes would have taken you using tables.
    There are three kinds of men:
    The ones that learn by reading.
    The few who learn by observation.
    The rest of us have to pee on the electric fence.

  18. #18
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, BTW, when I say 'just use a table' I'm not saying 'abandon using CSS' - there is NO reason that a table layout cannot be as clean as the so-called 'purecss' solutions... and generally it should only take one more tag depth than the CSS one - and use a LOT less hacks and CSS to pull it off.

    Take this example of HTML usually found in so called "pureCSS" versions
    Code:
    <style type="text/css">
    	#center_area {
    		clear:both; /* just in case */
    	}
    	#right_column {
    		float:right;
    		width:192px;
    	}
    	#left_column {
    		float:left;
    		width:192px;
    	}
    	#center_column {
    		margin:0px 192px;
    	}
    </style>
    <div id="center_area">
    	<div id="left_column">
    		left column content
    	</div>
    	<div id="right_column">
    		right column content
    	</div>
    	<div id="center_column">
    		center column content
    	</div>
    </div>
    if you do that as a table, there is NO reason you cannot be almost as clean. Cellpadding, cellspacing, border, valign, align - these can all be done from the CSS as well, so just don't use them.

    Code:
    <style type="text/css">
    	#center_area {
    		width:100%;
    		border-collapse:collapse;
    		table-layout:fixed;
    	}
    	#right_column {
    		width:192px;
    	}
    	#left_column {
    		width:192px;
    	}
    </style>
    <table id="center_area">
    	<tr>
    		<td id="left_column">
    			left column content
    		</td>
    		<td id="center_column">
    			center column content
    		</td>
    		<td id="right_column">
    			right column content
    		</td>
    	</tr>
    </table>
    At which point, the term 'splitting philisophical hairs' comes to mind... of course, let's see somebody make a DIV version that pays attention to vertical-align:bottom; in a predictable fashion cross-browser... In fact, the table might be MORE appropriate in the same way that a UL is more appropriate for a list than just dumping the items out, as you are using tags that mean rows and columns, when you are making 1 row of 3 columns.

    Which is usually when I'll draw the line - I'll generally try to use non-table layout as much as possible, but the moment I have to resort to a browser specific conditional or want to align the content vertically (not the container), that's when I'll resort to a table... To me, using CSS that you have to 'hide' from other browsers or worse, use a conditional to load an entirely different stylesheet... That's an indication you are likely doing something wrong in the first place, and it's time to rethink your inks.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    While I'll agree that tables have some very good and useful behaviours such as you mention (vertical align and equalising columns etc) and I would not hesitate to use them when I want things done that can't be done in css or are maybe are too convoluted in css, but for me, the actual use of tables for anything other than tabular data is in fact just one major hack that would outweigh any number of css hacks.

    There is no correlation between columns and using tables for layout will still confuse screenreaders and it has been recommeded since about 1999 by the wc3 that tables should not be used for layout when other methods exist.

    Whether or not you agree with that or not is another matter but for me I will take advice from people that know a lot more than me and avoid tables unless there is no alternative.

    Semantic html is far more important to me than any number of css hacks in my opinion and i believe that is what we should be striving for

    Browsers are improving and the needs for hacks diminishing especially when ie7 is to be spread via automatic update and will be the major browser within months. It needs fewer (or no hacks in some cases) and in a short while support for ie6 and under can be dropped and the >ie6 only stylesheets dropped from the pages in seconds.

    The other thing to remember about tables is that once its in the html its there forever and can't be changed. You can't change the order of the columns and you can't move stuff around without changing the html.

    Of course the above is my personal opinion and you are free to differ but my main concern is semantic html, and tables (for anything other than tabular data) just fall at the first hurdle or maybe they never even get out of the starting blocks


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
  •