WordPress.org

Ready to get started?Download WordPress

Forums

Table or not to Table - in TwentyEleven (9 posts)

  1. SLO_Rico
    Member
    Posted 2 years ago #

    Hello and thanks for this forum...

    I have looked around and have yet to find the best practices approach to my design goal. Here asking for some guidance. Created a child of TwentyEleven and making all modifications there as suggested.

    Created a Page and want to embed some script/widget code on that page. Got that to work but now want to style it differently than the default approach. The page is intended to be a weather/surf forecast page where I want to display data from several external forecast services.

    Using the WP HTML Editor, each widget is displayed "one atop of the other". This makes for a long scroll and is not the most pleasing for visitors. Alternatively, I would like to have some of the widgets align "side by side". So I started looking for the best way to do this to no avail. So I started to play with <table> and was able to embed the script/widget code into a cell. This allowed me to control the placement and align these widgets the way I wanted. Thought I was all good...

    Looking at unrelated support forum posts, I saw that using <table> is NOT recommended.

    esmi said: Don't use table markup for layout purposes.

    So, what is the best way to achieve this layout design?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. SLO_Rico
    Member
    Posted 2 years ago #

    OK, thanks...I think. Any further direction other than the ROOT of CSS?

    Do you have a suggestion for the type of CSS formatting that allows for multiple columns in a page (not sidebars)? Columns that are independent of each other. In other words, I don't want the content from column one to spill or overflow into the second. Are you suggesting "CSS Multi-column Layout Module"? Or is there something else that would work better?

    Once the CSS styling is defined, how does one define which widget goes where using the Page creation/WP HTML editor?

  4. SLO_Rico
    Member
    Posted 2 years ago #

    Additionally, do you know of any examples/sample code of doing this within WP. THIS would be very helpful!

  5. esmi
    Forum Moderator
    Posted 2 years ago #

    I'm sorry but it is beyond the scope of these forums to deal with these kinds of basic CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead.

  6. Digital Raindrops
    Member
    Posted 2 years ago #

    Also have a look at the way twenty eleven puts the three footer widgets side by side.

    in functions.php there is a function (line:457)

    twentyeleven_footer_sidebar_class()

    Based on the number of active widgets it will return a class, one, two or three

    Then look in style.css (line:2206 to 2224)

    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 48.1%;
    }
    #supplementary.two .widget-area + .widget-area {
    	margin-right: 0;
    }

    This is just s part the style block, you could use or copy these styles to use for your content areas, they will also be responsive when the browser is resized, not sure if it is #page or #content.

    /* Two Footer Widget Areas */
    #page.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 48.1%;
    }
    #page.two .widget-area + .widget-area {
    	margin-right: 0;
    }

    Add in a style to clear both

    .clear-both{
            clear:both;
    }

    So the divs will look like!

    <div class="two">
       <div class="widget-area">
          <!-- Content One Here -->
       </div>
       <div class="widget-area">
             <!-- Content Two Here -->
       </div>
    </div>
    <div class="clear-both"></div>

    HTH

    David

  7. SLO_Rico
    Member
    Posted 2 years ago #

    David thank you so much. Yes, this is very helpful. Off to investigate further and will respond with what I figure out for my layout needs. I think there may be others that would like to know how to do this as well. Again, thanks!

    As a side...why is it not recommended to use tables for this?

  8. Digital Raindrops
    Member
    Posted 2 years ago #

    I think the problem with tables is when you need to nest them, I cannot see why you should not use them for a simple row!

    There are basic table styles in the twenty eleven style.css, I think for me that divs are easier to understand, layout and to use!

    David

  9. SLO_Rico
    Member
    Posted 2 years ago #

    Thanks David, nice link. I have been looking into the table styling in the twenty eleven style.css and found:

    .entry-content table,
    .comment-content table {
    	border-bottom: 1px solid #ddd;
    	margin: 0 0 1.625em;
    	width: 100%;
    }

    I think there may even be additional styling in dark.css of twentyeleven.

    Pulled out the ".entry-content table" element and have been adding my own arguments. This has allowed me to control the styling but this is global and will affect all content tables, so not the best for my needs.

    I could add conditional styling for just this page via:

    body.page-id-XX #content div.entry-content {
        padding-left: ...;
    }

    (where 'XX' is the page ID) but that is more to manage in the CSS and don't think it is worth the effort of just this usage on one page.

    I think you have sent me in the right direction. Thanks again!

Topic Closed

This topic has been closed to new replies.

About this Topic