SitePoint Sponsor

User Tag List

Page 3 of 66 FirstFirst 12345671353 ... LastLast
Results 51 to 75 of 1630
  1. #51
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks!
    You're welcome - glad you found it useful.

    Paul

  2. #52
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Could I ask you why you don't want to use tables?

    surely using something like this
    Code:
    <style type="text/css">
    body {padding:0px;margin:0px}
    thead { height:auto;background:yellow;margin:0px }
    .ltd { width:100px;background:red; }
    .mtd { width:auto;background:green; }
    .rtd { width:100px;background:blue; }
    tfoot { height:auto; background:purple;color:white }
    td { padding:0px;border:0px;margin:0px }
    </style>
    <body>
    <table cellspacing="0">
    <thead><td colspan=3><h1>Header</h1></td></thead>
    <tr>
    <td class="ltd">left content left content left content left content left content left content left content </td>
    <td class="mtd">middle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle content
    middle content middle content middle content middle content middle content</td>
    <td class="rtd">right content right content right content right content</td>
    </tr>
    <tfoot><td colspan=3>footer</td></tfoot>
    </table>
    </body>
    is alot more versatile/crossbrowser/better looking/allows greater text ranges/doesn't loose header when increased/expands side menu when text doesn't fit....

    Why use css and cause loads of problems?

    Paul, when I look at your script with large text it's quite hard to read......

    Anyway, I'm only asking why use css instead? Not dissing 'cause it's good, but why?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #53
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Markdidj
    Could I ask you why you don't want to use tables?

    is alot more versatile/crossbrowser/better looking/allows greater text ranges/doesn't loose header when increased/expands side menu when text doesn't fit....

    Why use css and cause loads of problems?

    Paul, when I look at your script with large text it's quite hard to read......

    Anyway, I'm only asking why use css instead? Not dissing 'cause it's good, but why?
    I tend to agree with you Mark, and the only benefit I see to doing this type of layout in CSS is that you can reorder the columns in your source code however you want (which is a big plus for SEO). However, sometimes that benefit alone is big enough to necessitate the use of CSS.

  4. #54
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Gotcha vinnie.... I understand. Wouldn't affect the people that use js includes though
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  5. #55
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Could I ask you why you don't want to use tables?
    Yes certainly ! I hate tables

    Paul

  6. #56
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Perhaps I'd better explain more fully.

    The purpose of the thread was to produce the type of table layout using css that was previously thought to be impossible. (Your table layout doesn't actually do the same job as mine as a lot of my code was in producing the 100% footer - the layout would be much simpler without it and all the elements could be more fluid and allow for all the things you mentioned.)

    I could easily have made a table layout with another table layout but where would be the point in that .

    I agree that some layouts are simpler with tables and may be more cross/browser friendly but your version doesn't display correctly in Opera6 (neither does mine ). (Although its probably easy to fix.) So the truth isn't always obvious as most people don't check their table layouts and I've seen many table layouts that are incorrect.

    Where css layouts do score is in accessibility and as the w3c say "tables should only be used for tabular data" not for layouts. That's good enough for me! but I don't expect everyone else to agree. Do what you like see if I care It's not a hospital - it's not as though anyone is going to die (I can't remeber who said that first.)

    While I've got nothing against tables the sole purpose of this thread was to show that the 3 column equalising layout could be produced in CSS. The code has also proved to be quite robust and works in over 90% of browers.

    If tables work for you then use them. I personally won't use tables (unless for tabular data ) and usually resort to designs that work best with css.

    I could quote a number of designs that tables can't produce but that css can do easily but I don't see the point. Use whatever medium you want and are happy with and does the job best for you.

    I'll stick with CSS

    Paul

    Edit:


    PS: And as if to defeat my own argument take a look at this thread where I have said that tables would be more suitable:
    http://www.sitepoint.com/forums/showthread.php?t=148031

  7. #57
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    producing the 100% footer
    I hate it when someone tries to make a point, but doesn't think that one more step ahead.... ( added: or presumes I can't )
    Code:
    table {height:100%}
    (not for NS4)
    But I probably do they same at times.....
    Quote Originally Posted by w3c
    • 5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). [Priority 2]
    • 5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. [Priority 2]
    source:http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout


    A good read......

    I think for this instance it is better, apart from the reasons vinnie gave.....

    IMHO, for this instance tables are good......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    table {height:100%}
    Doesn't do it for me
    I hate it when someone tries to make a point, but doesn't think that one more step ahead.... ( added: or presumes I can't )
    What's your point? I was explaining that my example was more complicated because of accounting for the 100% footer and that you hadn't included it in your example. I wasn't trying to be clever.

    & from your own post:
    Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent
    How can a 3 column layout ever make sense when linearised? The left or right columns are usually used for navigation and the centre column is used for content. Therefore the content in cell one should lead to the content in cell 2 and then to the content in cell 3. But it won't because it isn't data.

    Anyway you're still missing the point!!!

    This was an example of how this type of layout could be achieved with CSS. I've already acknowledged that this type of layout is easier with tables and don't want to argue the semantics of tables versus css (although you obviously do .

    I agree some layouts are simpler with tables as I've already said above so there's no argument there

    Let me say once again "Use tables if you want and if its easier". Just don't expect me to agree to use them when there are other means available. If there are no other means available then I will use a table.

    We'll just have to agree to differ as I'm tired and I don't really want to argue anymore

    Paul

  9. #59
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Goodnight then Paul.

    for others:- I have tried
    Code:
    table { height:100% }
    on IE6, NS7.1, MF, and Opera7, it works the same in all (places footer at bottom of page). IMO it works better than Pauls, less difficult to implement, and when viewed in MF still looks good when text is increased.

    So now you know of alternatives, it's up to you to decide. I know which I would go for. ( the easier & better layout ). But then I'm not a SEO (who might go for Pauls).

    You did a good job though Paul, must of taken you ages.

    added: SP competitors Exp-Exc have their layout in tables, works for them ok. And in my opinion has one of the best layed out sites there is. They also use the js includes method. I suppose that is why they can accomodate a large text size.

    IMO, the table is linearized, taken as a whole picture, the table's about your site....... one column leads to the next.....

    more info on tables for full page layout here: http://www.sitepoint.com/forums/showthread.php?t=148172 as this is about full page css layout
    Last edited by Markdidj; Jan 17, 2004 at 08:30.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  10. #60
    SitePoint Zealot midnight9's Avatar
    Join Date
    Jan 2003
    Location
    2nd seat, 3 rows back
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul's layout used in a real-world, client situation:
    http://www.livewellbefree.net/idiuser

    The design isn't all that impressive, as it's a templated website builder system that allows the site owner to control most of the design. But at least it all works well.

    Thanks, Paul. Credit is given in the primary CSS file.

  11. #61
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone tell me how this behaves in NS4.7? The browser won't run on my machine here and I need to develop a tableless 3 col site which will degrade gracefully in NS4.7.

  12. #62
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks, Paul. Credit is given in the primary CSS file.
    Glad you found it useful and nice to see a layout with it

    Quote Originally Posted by daz
    Can anyone tell me how this behaves in NS4.7? The browser won't run on my machine here and I need to develop a tableless 3 col site which will degrade gracefully in NS4.7.
    I haven't made any concessions to netscape 4 so I would think it would blow apart. (I haven't got a copy of 4.7 either so I can't offer a fix.)

    Here are some links to 3 column layouts that are supposed to work on NN4:

    http://www.fu2k.org/alex/css/index.mhtml
    http://www.realworldstyle.com/

    You may be better off with these designs because they are specifically targeted at the nn4.7 browsers.

    Hope that helps.

    Paul

  13. #63
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your layout actually works reasonably well Paul. All the columns rendered, just a bit of overlapping with the header which could be fixed.

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Your layout actually works reasonably well Paul. All the columns rendered, just a bit of overlapping with the header which could be fixed.
    Thanks for that Daz. If I get time I might download NN4.7 just so I know what it looks like

    Paul

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

    Just added a three column all fluid layout to this (if anyone's still interested) thanks to a request from Chris

    http://www.pmob.co.uk/temp/3colfluidtest_4.htm

    Theres a simpler example here that doesn't use the 100% height and is much easier to use:
    http://www.pmob.co.uk/temp/3columnfluid_simple_1.htm

    Feel free to use and abuse the code.

    Paul

  16. #66
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Daz
    Your layout actually works reasonably well Paul. All the columns rendered, just a bit of overlapping with the header which could be fixed.
    If this problem could be sorted I would use it. The only reason I have stuck with tables is because of this.

    How's it going Paul, any luck on the header?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  17. #67
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    How's it going Paul, any luck on the header?
    Hi Markdidj,

    I haven't got around to downloading NN4.7 yet but I'll try this weekend and see if theres anything that can be done.

    I've made a simpler version of the fluid 3 column layout which I have linked to in my above post. This doesn't use the 100% height (footer at bottom of window technique) and is easier to use.

    I was thinking that if I did the same for my original design (2 columns fixed, middle fluid) then it would be more compatible across browsers and easier to use. I'll have a playaround this weekend

    Paul

  18. #68
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to call the Left and Right after the Center column

    Need to call Center column first if possible.

    Hi Paul,

    I'm trying to use css to achieve a 3 col layout because I run ads in the left and right columns. Unfortunately the ads take much longer to load than any content I have in the center.

    What I'd like to do is to call the left and right columns AFTER the center column. I remember after scanning this thread that you mentioned that the floats needed to be called first, and am wondering if there's a good clean way around that so I can load my center content first without having to wait for the left and right channels to load. (try doing _that_ in tables)

    Thanks for any help you can provide in your 'copious' spare time.

    Here's an example (please excuse the mess as I'm still tinkering):
    http://www.onesixthwarriors.com/inde...ayout02a.shtml

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

    The only way to get the centre content first is to lose the footer and then absolutely place the left and right columns at the end of the html.

    I'll have a think on it but I think I've tried this before.

    Paul

  20. #70
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way with the 3-column CSS layout to make the center column, say, 600 pixels wide, then have the left and right columns immediately adjacent to the center column, and have the whole thing centered in the page?

    The table equivalent:

    HTML Code:
    <table align="center">
     <tr>
      <td width=120>left</td>
      <td width=600>center</td>
      <td width=120>right</td>
     </tr>
    </table>

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

    Do you mean something like this:

    http://www.pmob.co.uk/temp/3colfixedtest_centred.htm

    (Haven't tested fully yet but looks ok in ie5 - 6, Mozilla/firebird and OPera7).

    Paul

  22. #72
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, something like that . Can the center column auto-expand if its content happens to be bigger than the minimum width?

  23. #73
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI, in Firebird 0.7 the center column overlaps the left column, and doesn't extend all the way to the bottom (see attached PNG).
    Attached Images Attached Images

  24. #74
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,387
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Can the center column auto-expand if its content happens to be bigger than the minimum width?
    Hmm, that might be pushing the envelope a bit too far

    FYI, in Firebird 0.7 the center column overlaps the left column, and doesn't extend all the way to the bottom (see attached PNG).
    Thanks dor the pic, it obviously needs more work but I won't be able to get to it for a couple of days now. The 100% height does seem to be a problem for mozilla/firebird in this layout. It only seems to like the 100% on the body and not the extra container that was put in to centralise the layout.

    I will get back to it but I'm away for 2 days now (sorry).

    Paul

  25. #75
    Non-Member
    Join Date
    Aug 2002
    Location
    USA
    Posts
    544
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure thing .

    My two cents on the CSS vs. tables - the primary reason I use CSS is to make my pages more responsive (load faster). I use remote images, scripts, etc. If they're in a table, the entire thing won't render until everything is loaded. Sometimes a remote server goes down, or is really slow, causing the entire page to be blank (at least in IE anyway), or stall partially loaded (Firebird).

    CSS also reduces page sizes a fair amount (not a big deal for me, but the smaller amount of markup does make editing them easier).


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
  •