WordPress.org

Ready to get started?Download WordPress

Forums

3 columns layout (42 posts)

  1. jpierre
    Member
    Posted 11 years ago #

    Totally new to WordPress. Know nothing about PHP. However, got WP installed, everything works fine. Changed things here and there. OK.
    Now, I want to start with a straight 3 columns (with header) type of layout. Someone could show me the way? Even in the most general terms?
    Thanks,
    JP

  2. flakkito
    Member
    Posted 11 years ago #

    Here is a great place to start-
    http://css-discuss.incutio.com/?page=ThreeColumnLayouts
    one thing you might want to consider is choosing a source ordered layout, meaning that if accessed from a wap or pda your page will show up like this:
    banner/nav
    content
    left column
    right column
    footer
    the reason I mention it is that alot of beautiful layouts use floats, in which case it affects the order of your source code, having to float the l/r columns with content last.
    :)

  3. OperaManiac
    Member
    Posted 11 years ago #

    http://www.searchenginejournal.com/ is using a 3 column layout. Made messy by it's very busy author but it is pretty cool...

  4. tcervo
    Member
    Posted 11 years ago #

    To add to flakkito's comment:
    It's also a good idea to include a "jump to" section at the top of your document, so when viewed from a cellphone, pda, text browser, speech browser, etc., the visitor can jump straight to the content, navigation, or whatever. This is sometimes referred to as a "skip links" section, but I don't like that name because it assumes you're ordering your links before your content. Here's an example that I use:
    In index.php, just after my header (although some people might put it just before the header...to each his/her own):
    <div id="skipNav">
    Skip to content | Skip to Category Links | Skip to Search
    </div><!-- closes skipNav -->

  5. Anonymous
    Unregistered
    Posted 11 years ago #

    Jpierre before we refer you to suitable portals how do you want these columns to behave? Do you want/need the columns to be different colors? If so do you want/need the color to stretch down to the footer regardless of content size? What browsers are you willing to exclude to get what you want (if any). Do you mind *hacks*. Does it need to validate xhtml and or css? Do you have any objections to using a bg image or do you want *pure* css. The more info we have the better we can help. The three column request is common in these parts. Good luck. Many people may be following this thread.

  6. tcervo
    Member
    Posted 11 years ago #

    "Do you have any objections to using a bg image or do you want *pure* css. "
    Not to be picky, but I wouldn't want those new to CSS to get the wrong idea: background images are very much *pure* CSS. The background property (and all its sub-properties like background-image, etc) are very much a part of the official CSS specifications. The middle "S" stands for "Sytle", after all ;-)
    The whole idea of CSS is to separate style (presentation) from content.
    I do, however, understand Anon's point about background images (at least I *think* I know what he/she was referring to.) Sometimes, in a 3-column layout, if the middle column is longer than the side columns (has more content), any background color assiciated with a side column (to create a sidebar effect) will stop at the end of the sidebar data. So, many designers will place a background image on the entire "wrapper", that will have a different color the width of the sidebar(s).
    Now, on to some resources. These are just some examples that I've found, aside from just seeing how others have done it. I make no claims as to how well these work. You'll want to experiment in as many situations/browsers as you can:
    http://positioniseverything.net/piefecta-rigid.html
    http://www.saila.com/usage/layouts/
    http://www.realworldstyle.com/
    http://glish.com/css/
    http://www.bluerobot.com/web/layouts/
    -Tony

  7. jpierre
    Member
    Posted 11 years ago #

    Thanks Tony, and thank you to all. I think I have enough to start tweaking things...
    As I said, for now I'm rather into getting a general picture of how layouts work. Thank's also to Anom., but there's no way I could get into the details your are refering to. Later, to be sure...
    JP

  8. Anonymous
    Unregistered
    Posted 11 years ago #

    Thanks. You might want to think about some of it now though. If you think too much step by step you may end up with a template which doesn't suit your needs. While it's in development you might want to park the css in index.php; then you are only dealing with one file and we can help more easily. Adapting WP to 3 cols might need a lot of *tweaking*. It always does. Good luck:-).
    @tcervo Did not really mean to suggest bgs are not *pure*. But background hacks do remind some people of gif spacers and they try and avoid them and implement in code only. I am all in favour of precision and you are spot on about the difference.

  9. OperaManiac
    Member
    Posted 11 years ago #

    Just in case you did not know.
    There was a competition here and some really awesome CSS layouts were developed.
    See if anything fits your requirement. Why reinvent the wheel if it suits you and the basic idea is to express yourself on ur Blog. That's what I feel though...
    http://www.alexking.org/blog/2004/01/25/wordpress-css-style-competition/

  10. Anonymous
    Unregistered
    Posted 11 years ago #

    @tcervo: Just checked your site. Very cool. You ain't one of them fancy web *designers* are you?
    Kidding. Beautiful work. :-)

  11. WillM
    Member
    Posted 11 years ago #

    Susubh: AFAIK there are no genuine 3-column layouts among the existing stylesheets. The winning design had a 3-column look but that was done using background images and one of the 'columns' had nothing in it but flowers. It's also possible to fudge a 3-column look with index.php by absolute-postioning the list ids, but it's much easier to grab a genuine 3-col template from glish or somewhere and add the PHP to that.

  12. Anonymous
    Unregistered
    Posted 11 years ago #

    @WillM. Amen to that. But:- link to the php index shurely?

  13. OperaManiac
    Member
    Posted 11 years ago #

    http://wordpress.org/support/7/2771
    here is a recently posted blog with 3 columns.

  14. Anonymous
    Unregistered
    Posted 11 years ago #

    Seems cool tcervo. Do you do carry out? :-)

  15. Anonymous
    Unregistered
    Posted 11 years ago #

    I've only briefly looked at them, but these two are promising layouts for the whole 3-column thing:
    http://www.pixy.cz/blogg/clanky/css-3col-layout/
    http://www.positioniseverything.net/piefecta-rigid.html

  16. Anonymous
    Unregistered
    Posted 11 years ago #

    Assuming you are following stop design and eric back to fixed width. Standby for complicated questions to do with matching the tags in index.php to the code:-)

  17. iKwak
    Member
    Posted 11 years ago #

    So how exactly can we turn out default template to a three column template, for version 1.01?
    I remember a WP member providing an index.php and css.css file to use.

  18. Anonymous
    Unregistered
    Posted 11 years ago #

    If you are unable to write css yet what folks here are suggesting is that you download a 3 column template of your choice from one of the sites given. Change the call in index.php so that it is loading your new style sheet. (It is going to look a mess at this stage) Then match all the tags in index.php to corresponding selectors in the css. For three cols you will need to alter both files. Where you are headed is that in index you will need three mid section divs lets call them content; menu, and adverts, for example and in the style sheet three divs of the same name. This is a relatively trivial task. The common difficulty is that even if the tags match; the cols need to be served to the css in the right order. Where we struggle in helping is we do not know which template you are using so we can't be more precise. Just remember for nearly every tag in the xhtml you are looking for a csss selector of the same name. Just to confuse you in the default layout #rap is not styled at all and it ends before the footer. A lot of folks also style their posts as a separate div not class. HTH :-)

  19. jpierre
    Member
    Posted 11 years ago #

    Thanks An. Been away fo a while, so... However, your last answer is exactly what I was looking for. Will experiment, and come back at a later time.
    JP

  20. Anonymous
    Unregistered
    Posted 11 years ago #

  21. jpierre
    Member
    Posted 11 years ago #

    OK. I'm using the default WP index, and I have uploaded the flexible-layout you just suggested. Now, as you said, it DOES look messy. Currently heading towards the relatively trivila task you mentionned. More later. JP :-)

  22. Anonymous
    Unregistered
    Posted 11 years ago #

    At least one prediction of mine was right then. Makes a change!

  23. jpierre
    Member
    Posted 11 years ago #

    Slightly passed the relatively trivial task... Looks a little less messy. Succeeded in displaying a 3 col layout by up-loading all 4 css files and by adding the matching lines in the index. Thanks A LOT. And I mean it! JP :-):-)

  24. Anonymous
    Unregistered
    Posted 11 years ago #

    Well done Jpierre. I hasten to point out that anon2 intervened with a URI of what looks like a very sophisticated but complicated layout. If you have it running then we take our hat's off to you. tcervo's posting just about covered the big five layout sites for quality and clarity.Still: You can not now in fairness leave us without a URI or better still your css to have a look. I am sure there is a little tweaking still to be done. :-)

  25. awh
    Member
    Posted 10 years ago #

    After much head banging against the web site, I've discovered a couple of things. I want to relate them here so maybe someone doesn't make the same mistakes.
    I wanted a layout for my WordPress blog that had the following features:
    * Header on top
    * Three column layout, all of the columns stretching all of the way to the bottom.
    * Footer always at the bottom, no matter which of the three columns was the longest on any one page.
    * No Javascript
    * No CSS hacks
    Eventually I ran across the solution. There is no solution. That combination is impossible.
    Maybe someday the Internet architects and the W3C will get together a create a solution for this, but it hasn't happened yet. There is no standard that allows the above, and there is no web browser out there that can implement any such thing, mostly because the standard does not exist.
    If you are willing to sacrifice one or more of the features in the combination I listed above, then your project might be feasible. Otherwise, forget it.
    I am dumping the idea of a three-column blog and moving to a two-column blog. Then I am going to try and make the best out of the situation.
    Sorry to be so stern, but if I would have read this basic message a long time ago, I wouldn't have wasted so much time.

  26. tcervo
    Member
    Posted 10 years ago #

    awh,
    You mean like this?:
    http://www.cantboilwater.com/
    No CSS hacks
    No Javascript for layout
    3 columns, with footer underneath the columns (no matter which is longest)
    Header on top
    Am I missing something?
    -Tony

  27. Anonymous
    Unregistered
    Posted 10 years ago #

    And some very tasty recipes! Some folks are never satisfied.

  28. awh
    Member
    Posted 10 years ago #

    That looks good.
    I need to add a couple of features to my list.
    * It can't use tables for laying out the columns. (cantboilwater.com does not use tables and thus meets this criterion)
    * The columns must be able to appear in any order in the HTML. For example if the columns were numbered from left to right as 1, 2, 3, the columns must be able to appear in the HTML in the order of 2, 1, 3, or any other variation without affecting the look of the site.
    The last one is important for accessibility. A "skip to content" link is a compromise that some will find acceptable, but I don't.
    I don't think the middle column of cantboilwater.com could be moved ahead of the two navigation links columns. Thus it doesn't meet the criteria.
    Nice blog, BTW.

  29. Anonymous
    Unregistered
    Posted 10 years ago #

    No problem. Can't be done with float but position absolute will do fine. Next?

  30. tcervo
    Member
    Posted 10 years ago #

    If I could live without the black lines separating the columns, then I could easily re-order the columns with nothing but minor tweaking. I all I wanted to do was put the main content first, I could simply create a different background image and still get my separator lines. So, it is possible, just not what I want to do.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.