WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Coding & columns (17 posts)

  1. belenenses
    Member
    Posted 3 years ago #

    Hi Guys,

    As I am new to all this, I am trying to stack up, one-under-the-other, two four-column sections on a page. It won't work and they all merge.

    Do I need to put some kind of page break between the two sets of columns? If so, what's the magic code?

    Thanks,

    B

  2. David Ollenberger
    Member
    Posted 3 years ago #

    Hello,

    There are several ways you can do columns of content with HTML. The old way would be to use tables to create the columns. This isn't ideal and is a bit old school. Here is a standard way to do this with CSS and floating divs (make sure you use HTML view in the WordPress editor to do this).

    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
    <div class="clear"></div>

    Make sure you include the following CSS in your style sheet:

    .column {
    float: left;
    width: 200px;
    padding: 10px;
    }
    .clear {
    width: 100%;
    clear: both;
    }

    Just replace the width of the column with your own width and make sure you have enough room to fit 4 of those columns (plus the padding) horizontally. Good luck!

    Cheers,
    David

  3. belenenses
    Member
    Posted 3 years ago #

    Hi David,

    Many thnaks for your informative and helpful response. I'll note it for future reference.

    However, I'm using a theme that has custom shortcodes. The one for 4 columns is:

    [one_fourth] [one_fourth] [one_fourth] [one_fourth_last]

    But I cannot work out how to use this twice and put some padding between the two. I tried your <div class="clear"></div> but it isn't enough. Any ideas? I'd rather not touch the css if I can help it!

    Cheers,

    B

  4. David Ollenberger
    Member
    Posted 3 years ago #

    Hello,

    Ok, now I understand what you're trying to do. It all depends greatly on what HTML the shortcode is producing. Can you provide a URL with an example of the 4 columns? If so, I can take a quick look at the source and see if you can do anything with it.

    Cheers,
    David

  5. belenenses
    Member
    Posted 3 years ago #

    Hi,

    Here's the url:

    http://walking-holidays-france.com/wordpress/1786/walking-provence-west/

    If I just put 4 days across the page it works okay, but it's an 8-day tour!

    Many thanks,

    B

  6. David Ollenberger
    Member
    Posted 3 years ago #

    Hello,

    I can see you put in the div with a class of "clear" as I suggested:

    <div class="clear"></div>

    Did you put the matching CSS in for that div? Without that it won't do anything. If you didn't then you can do inline styling without touching the style sheet like this and it should work:

    <div style="width:100%;clear:both;"></div>

    Cheers,
    David

  7. belenenses
    Member
    Posted 3 years ago #

    Hi,

    Thanks for your efforts, but the inline styling without touching the style sheet by adding:

    <div style="width:100%;clear:both;"></div>

    Hasn't worked. Any further suggestions?

    Thanks,

    B

  8. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    double check your syntax with the shortcodes - the fourth and fifth day don't seem to be separated properly, and the last day has a typing error with an excess / in [/one_fourth_last]

  9. belenenses
    Member
    Posted 3 years ago #

    Hi,

    We'll it looks like it's just the separation issue that's now outdstanding. I'm sure there must be a simple way of separating the fourth and fifth days so Day 5 is pushed down in a series with 6 and 7.

    I've tried everything except touching the css as these are shortcodes.

    B

  10. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    what is the code that you type into the post editor?

    could you paste the code into a http://wordpress.pastebin.com/ and post the link to it here?

    for instance 'day4' does not seem to have the 'one-fourth-last' div/style; 'day5' seems to be within the 'day4' div, and 'day7' does have no 'one-fourth' div/style at all.

  11. belenenses
    Member
    Posted 3 years ago #

    Hi,

    The code we are told to input is:

    [one_fourth][one_fourth][one_fourth][one_fourth_last]

    Having done it, WP seems to have added the /s itself. I'm not sure whethetr it needs them or not.

    I have thus tried to simply input the code twise.

    B

  12. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    The code we are told to input is:

    [one_fourth][one_fourth][one_fourth][one_fourth_last]

    and you would add you other content just between these shortcodes?

    just wondering how the shortcode is supposed to know when the fourth column for instance is finished.

    if the shortcode came with the theme, is this a commercial theme?

    have you tried to get support from the theme author/seller?

  13. belenenses
    Member
    Posted 3 years ago #

    Yes, I just add text in between.

    Do you think the coding is incomplete?

    Yes, a commercial theme where some support is available, but very irregular. Thus my posting here.

  14. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    Do you think the coding is incomplete?

    your 'one_third' section seems to have gone ok.
    did you do anything different there?

    hard to judge without having access to the full theme templates, such as functions.php (?) to check the shortcode; or a possible 'readme' file.

    if you have the time, you could try:

    [one_fourth]contents[/one_fourth] [one_fourth]second column contents[/one_fourth] [one_fourth]third col content[/one_fourth] [one_fourth_last]last column contents[/one_fourth_last]

  15. belenenses
    Member
    Posted 3 years ago #

    Alchymyth,

    You've cracked it! Take a look now - it's resolved and I'm very grateful. As soon as I saw the...

    [one_fourth_last]last column contents[/one_fourth_last]

    I was optimistic and it made sense.

    I just wish I were so logical, but I'm prepared to remain a disciple!

    Many thanks for your valued input!

    B.

  16. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    well done ;-)

    please mark this thread as 'resolved'

  17. belenenses
    Member
    Posted 3 years ago #

    Resolved.

    Thanks to all who took the trouble to get involved. I've learned a lot.

    B

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.