Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Complex table structure


  #1  
Old Mar 27, 2011, 10:57 AM
vCopia's Avatar
vCopia
 
72 posts · Jan 2011
Long Island, NY
I have a table. It has 3 columns and 4 rows. The 3rd column spans all 4 rows. The 4th row spans the first 2 columns ( holds a single paragrah of running text)

Here's my dilemma...

The text in the 4th row expands below the area where the 3rd, spanned column ends. That makes it look like it is just dangling downward instead of wrapping around the bottom of the 3rd row. I want it to wrap around the empty white space under the end of col. 3 but can't figure out how to do that.

If I use nowrap, the 4th row text bleeds over the bottom of the 3rd columninstead of wrapping (to be expected). If I use colspan=3 (currently at colspan=2) for the 4th row, it also bleeds across the bottom of the 3rd column.

Object code doesn't work (or at least the way I tried it).
Trying to trick it by adding an empty row (to equal out the 4 cols and 4 rows of the span) doesn't work. The now 5th row of paragraph text still bleeds over the 3rd column - just a bit lower than before.

In essence, what I need is a 4th & 5th row grouped with a 3rd column for row 5 only.

I would simply reformat this to make it work for this page, but the page will become a template for a regular, weekly post where the size of the final paragraph of text will vary.

Anyone got any ideas? I'm stumped.
  #2  
Old Mar 28, 2011, 06:46 AM
vCopia's Avatar
vCopia
 
72 posts · Jan 2011
Long Island, NY
You're right STB, it isn't a virgin ATO question. I just tried to figure it out myself for a few hours yesterday w/o success, and since I see this forum as a kind of family - being that we are all connected by our use of theme and common tasks, I thought there may be someone here with an approach worth exploring.

If it pans out that no one does, or prefers not to respond to a non ATO Qs, I'd absolutely understand. And, to help, here is a visual.

Here's what it looks like now:


-----------------
Here's the same table, with borders, and the proposed "wrap" area color-coded:


I don't think I can do this purely in a table, but I just can't crack the nut for doing it with objects or another way.

Don't feel you have to reply STB. Just wanted to clarify after receiving your response.
  #3  
Old Mar 28, 2011, 07:29 AM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try a table in a table
First table has one row with two columns
First cell is a table with 5 rows each with 2 columns, except the last where the cell spans the two columns
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #4  
Old Apr 2, 2011, 11:49 AM
vCopia's Avatar
vCopia
 
72 posts · Jan 2011
Long Island, NY
I wanted to thank you Jughead for your suggestion. Surprisingly, your idea was how the current table had been set up... Great minds, and all. Alas, it was close but no cigar.

I finally DID figure it out and thought others in a similar situation may be able to utilize this resolve. Bottom-line. I used <div> tags with float attributes around each table, and a single cell table around the whole thing to contain the width of the non-floating, wrapped text at the bottom. Images below show you what I mean:

Demo screenshot - highlighted:


Cyan box = table around entire section
Red area = table with first floating <div> tag.
Yellow area = table with second floating <div> tag.

Sample code below:
PHP Code:
<table width=570 align=center><tr><td><div style="float: left; width: 370;">red table</div>
<
div style="float: right; width: 190;">yellow table</div>
Insert text you want to wrap.
<
div style="clear: both;"></div></td></tr></table

This article was great, and helped me put things in prospective: http://www.elated.com/articles/css-floats/


Actual Site Screenshot:




Thanks again to Jughead and everyone here at Bytes4All for your goodwill and assistance in this matter.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to Add Zebra Effect to Single Table with WP Table-Reloaded Plugin c12281 Plugins & Atahualpa 8 Aug 1, 2010 03:53 PM
Creating complex drop down menus ssoszka Page & Category Menu Bars 1 May 14, 2010 03:33 PM
Different structure/layout for posts firewalker1980 Center area post/pages 0 Mar 5, 2010 08:42 AM
Unlinking the file structure depedency for image directories in favor of DB values i.avi Atahualpa 3 Wordpress theme 1 May 21, 2009 05:02 PM


All times are GMT -6. The time now is 09:16 PM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.