PDA

View Full Version : I need help w/ a table layout

Rain
02-08-2000, 01:29 PM
I am having a problem with tables on a design. Any help would be very appreciated!
You can go to http://nurturethis.com/indexfamilychild.htm and see the look I am striving for...
I was having the same problems as Joel with the uneveness at the bottom.[nbsp][nbsp]In fact you can visit the pregnacy section and see the problems I was having.[nbsp][nbsp]I am using the Dreamweaver function of converting layers to a table. I attempted to simplify the design in light of the advice given to Joel74 in the thread about &quot;tables in Netscape.&quot;[nbsp][nbsp]At least I now know I need to finish off the bottom <tr>.[nbsp][nbsp]And use the general table structure, that was suggested...

<table width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;100%&quot; valign=&quot;top&quot; colspan=&quot;3&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Top section
[nbsp][nbsp][nbsp][nbsp] </td></tr>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;30%&quot; valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Left side
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;40%&quot; valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Center section
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;30%&quot; valign=&quot;top&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Right side
[nbsp][nbsp][nbsp][nbsp] </td></tr>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;100%&quot; valign=&quot;top&quot; colspan=&quot;3&quot; align=&quot;center&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Bottom section
[nbsp][nbsp][nbsp][nbsp] </td></tr>
</table>

So I gave up the look and simplified it...
[nbsp][nbsp]See the new look at http://nurturethis.com/tabletestbms2.htm. I can see where I can have the header the navigation tabs, the two sets of bars all in the &quot;top&quot; section of the table structure suggested to Joel74.[nbsp][nbsp]BUT...it's not that simple.[nbsp][nbsp]When I convert my layers to tables some of the columns extend the length of the page and I can not just paste those sections into the main table structure![nbsp][nbsp]ahhhhhhh![nbsp][nbsp]And I also really like those little overhangs- that look like gutters on the side. hehe
I have attempted to reformat this page into a series of nested tables. Unfortunately, the up and down tab structure I have for navigation got all screwy looking despite my best efforts.[nbsp][nbsp]
I am kind of at a loss.[nbsp][nbsp]I have tried all kinds of things, I won't bore you with the details.[nbsp][nbsp]It seems like every solution has it's own demons.[nbsp][nbsp]Do you have any advice for me?[nbsp][nbsp]I would like to keep the original design but at this point do not see how I can convert to tables and have cohesion when I add a page w/ larger images or text.[nbsp][nbsp]Ps the pages that actually do have cohesion, if you peruse the pregnancy section are the result of many hours and one big headache.
Furthermore, I am not sure if this matters or not...I am looking into using Drumbeat to eventually db integrate and create these pages dynamically.[nbsp][nbsp]I am completely in the dark about that process but maybe you are not and this will factor into the advice you bestow.[nbsp][nbsp]

A side problem...on the &quot;getaway&quot; section I have a background in the left section.[nbsp][nbsp]It does not show on Netscape.[nbsp][nbsp]Any suggestions there?

Thank you!!!!


[This message has been edited by Rain (edited 02-08-00@1:30 pm)]
Dan Kaplan
02-08-2000, 01:53 PM
Hi Rain,

I haven't put much time yet into analyzing the code, and I haven't used DreamWeaver, so I'm not familiar with the layer function, but let's see if I can provide a little help to get you going in the right direction...

The problem, as you're probably well aware by now, is that you have a rather complex table structure you're after.[nbsp][nbsp]The overhangs at the bottom require additional formatting to reserver the blank spaces and line everything up properly.[nbsp][nbsp]This isn't tested, but hopefully it's not too far off (just working form the &quot;nurture this... family and child&quot; horizontal bar and down):

(Colors should be replaced by &quot;real&quot; colors and table sizes are just a guess to make it easier to follow.[nbsp][nbsp]You could probably get away with some colspans and rowspans, but that's more complex than I would recommend beginning with.)

<table width=&quot;600&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;medium purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]top left medium purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;medium purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]top left medium purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;380&quot; valign=&quot;top&quot; bgcolor=&quot;medium purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]top left medium purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;dark purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]top right dark purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;white&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]right blank space
[nbsp][nbsp][nbsp][nbsp] </td></tr>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;white&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]left side white
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]left light purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;380&quot; valign=&quot;top&quot; bgcolor=&quot;white&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]inner table white
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;dark purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]right dark purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;white&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]right blank space
[nbsp][nbsp][nbsp][nbsp] </td></tr>
[nbsp][nbsp][nbsp][nbsp] <tr><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;medium-light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]bottom left medium-light purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]bottom left light purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;380&quot; valign=&quot;top&quot; bgcolor=&quot;medium-light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]bottom medium-light purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;100&quot; valign=&quot;top&quot; bgcolor=&quot;medium-light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]bottom right medium-light purple
[nbsp][nbsp][nbsp][nbsp] </td><td width=&quot;10&quot; valign=&quot;top&quot; bgcolor=&quot;medium-light purple&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]bottom medium-light purple
[nbsp][nbsp][nbsp][nbsp] </td></tr>
</table>

Whew, I hope that's right![nbsp][nbsp]:)[nbsp][nbsp]Of course, you will need to put an &amp;nbsp; or
in the table sections with no text to ensure that their background color shows up.[nbsp][nbsp]You might also want to add another bottom row for that little bottom overhang at the left.

Dvelop
Rain
02-08-2000, 02:18 PM
Thanks.[nbsp][nbsp]I'll try that. I take it I just make little spacer gifs to adjust the heights?[nbsp][nbsp]And make nested tables to layout any images and text?[nbsp][nbsp]

Really quick question about the colors.[nbsp][nbsp]First, why put the name vs the hex#?[nbsp][nbsp]I realize some browsers might display them a little bit differently, I didn't think I could achieve all of those variations on colors using the color name. DW gives you a palette of 216 browser safe colors, but I just don't see this site going w/ any of those. It needs to be much softer.
Also,[nbsp][nbsp]I put that code into dreamweaver and previewed in IE5 and Netscape3 and yikes the colors came out red and black![nbsp][nbsp]
Not sure if that schema is going to work w/ dreamweaver.[nbsp][nbsp]I just tried to change the top right blank space to make that match the top row color to &quot;dark purple&quot; to make a little overhang on the right top and got an error to use a hexadecimal or standard color.[nbsp][nbsp]hmmm.

any suggestions there?
Thanks for getting back to me!
:)
Raina
Dan Kaplan
02-08-2000, 02:32 PM
I take it I just make little spacer gifs to adjust the heights? I could be wrong, but I doubt that is necessary.[nbsp][nbsp]Invisible spacers are handy for width formatting, but you can usually accomplish height through text, images,
's,

's, etc.

Really quick question about the colors.[nbsp][nbsp]First, why put the name vs the hex#? Sorry if I was unclear in my parenthetical statement...[nbsp][nbsp]Instead of going through your code to find the hex #'s of the colors you used, I just threw in descriptions of the colors to be replaced by you.[nbsp][nbsp]Hex #'s are definitely the way to go.

Dan

through != threw

[This message has been edited by Dan Kaplan (edited 02-08-00@2:34 pm)]
Rain
02-09-2000, 02:37 AM
Thanks Dan.[nbsp][nbsp]It has definetly given me a start in the right direction.[nbsp][nbsp]Man talk about missing the forest for the trees.
I really appreciate your help.
Up untill now I have not even realized what a great resource this is...I can see why you read them all.[nbsp][nbsp]I have learned so much just skimming the past couple of days.
I have a few things to tweak on the tables.[nbsp][nbsp]
I think I am going to post a new.[nbsp][nbsp]I'm sure you'll probably see it![nbsp][nbsp]Any help there will also be greatly appreciated.
Thank you so much.