Expanding Table Layout with Content?

[ackerley1]

I am designing a site that uses table layouts (I know CSS is the way to go but...) and I am having trouble getting the bottom to extend without creating gaps in the graphics on either side? Preferably I would like the graphics to continue as it extends.

Any suggestions?

Here is the link: http://www.asi-interiors.net/2005/asi-layout.html

[DrTandem1]

You are going to need to create extra rows in the columns that contain your images. Right now, it looks like they are 304 pixels in height. Or, you need to recreate the graphics to exceed the length of the center cell.

Another way to do this is to recreate the bottom of the graphic so that it fades into the page background color.

[Weedy Lady]

I don't know what you are using to generate your code, but you are not really using tables as they need to be used for that layout. You need probably three sets of columns <td>: one for the too wide left side graphic, one for the middle where the information is, and one for the right side graphic section. Like this:

<table align="left" width="15%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width ="100%" height="" >
<table......here is where you do all the stuff for your right hand column>
<tr>
<td,,,etc.,etc.>
</td>
</tr>
</table>
</td>
</tr>
and so forth, so that the result is one table for the page, with three nested sub tables.

This is definitely not the most up to date way of writing code but it WILL work! Especially if you do not know css.

You can check out the lower part of my home page coding to see what I mean about the three sub tables within a master table. I don't know css either, but I sure do know how to line things up properly using tables.

Good luck.

[delstu]

Originally Posted by Weedy Lady

I don't know what you are using to generate your code, but you are not really using tables as they need to be used for that layout. You need probably three sets of columns <td>: one for the too wide left side graphic, one for the middle where the information is, and one for the right side graphic section. Like this:

<table align="left" width="15%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width ="100%" height="" >
<table......here is where you do all the stuff for your right hand column>
<tr>
<td,,,etc.,etc.>
</td>
</tr>
</table>
</td>
</tr>
and so forth, so that the result is one table for the page, with three nested sub tables.

This is definitely not the most up to date way of writing code but it WILL work! Especially if you do not know css.

You can check out the lower part of my home page coding to see what I mean about the three sub tables within a master table. I don't know css either, but I sure do know how to line things up properly using tables.

Good luck.

--------------------------------------

did you get in a hurry or am I missing something?

looks like your 15% and 100% should reverse locations

and it looks like this setup is overly complicated for the page design

How About:

<table align="left" width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width ="15%">
here is where you do all the stuff for your left hand column
</td>
<td width="75%">
content for text area here
</td>
<td width="10%">
stuff for left hand column
</td>
</tr>
</table>

all 3 portions of the table will be the same height and will expand or contract to accomodate content

[wsmeyer]

Here's another technique you can try:

Currently your table cells are set up like this...


Make the 6 cells on the far left into one large cell that spans the 6 rows with the background as one of the small images, like this...

<td rowspan="6" background="http://www.asi-interiors.net/2005/images/asi-layout_24.gif" width="58"></td>

The background image will continually repeat and adjust itself as the table expands or shrinks with content.

You can also use this technique on the three lower right cells and the horizontal cell with the green line.

William.

[Weedy Lady]

To delstu: YEP, I got in a hurry. Those numbers should be reversed. That's the trouble with composing these posts on line. My humble apologies. And yes, it could be done with just 3 <td> and no enclosed tables, using
between any sections of each <td>

To: wsmeyer.......If you use "background=" in a <td> the page will not validate. I have that problem on my site and am sure not going to recommend it to anyone else when it is not absolutely needed for a specific graphic effect.

[DrTandem1]

Originally Posted by Weedy Lady

To: wsmeyer.......If you use "background=" in a <td> the page will not validate. I have that problem on my site and am sure not going to recommend it to anyone else when it is not absolutely needed for a specific graphic effect.

To get a cell background to work/validate, use CSS. For instance, here's one I named ".tdback" short for <td> background:

.tdback {
background-image : url(../images/your-image.jpg);
}

[wsmeyer]

I agree 100% with the idea of writing valid code but he stated in his post

I know CSS is the way to go but...

so I based my suggestion on the code he was already using.

To get the page to validate he would have to move all these attributes he is already using to CSS;

<body> - leftmargin
<body> - topmargin
<body> - marginwidth
<body> - marginheight
<table> - height
<td> - background

Without adding to the validation issue my suggestion could be re-written as...

<td rowspan="6" width="58" style="background: url(http://www.asi-interiors.net/2005/im...-layout_24.gif) repeat-y;"></td>

William.

[Weedy Lady]

when every page on a site is different, you need a different css page for each of your urls, right???? And when you have as many as 6 or 8 different <td backgrounds> on one page, how do you handle that in css?

[DrTandem1]

Originally Posted by wsmeyer

I agree 100% with the idea of writing valid code but he stated in his post

so I based my suggestion on the code he was already using.

To get the page to validate he would have to move all these attributes he is already using to CSS;

<body> - leftmargin
<body> - topmargin
<body> - marginwidth
<body> - marginheight
<table> - height
<td> - background

Without adding to the validation issue my suggestion could be re-written as...

<td rowspan="6" width="58" style="background: url(http://www.asi-interiors.net/2005/im...-layout_24.gif) repeat-y;"></td>

William.

No, that's not true. Yo can add the style simply by inserting it into the cell tag:

<td class="tdback"> It will validate and work with existing tables. Also, the body attributes can be added to the CSS. That is the beauty of CSS.

[DrTandem1]

Originally Posted by Weedy Lady

when every page on a site is different, you need a different css page for each of your urls, right???? And when you have as many as 6 or 8 different <td backgrounds> on one page, how do you handle that in css?

You only need one style sheet. You can have as many diffent backgrounds as you want. Just change the name and its attributes:

.tdback {
background-image : url(../images/your-image.jpg);
}

.tdbacka {
background-image : url(../images/your-next-image.gif);
}

.tdbackb {
background-image : url(../images/another-image.png);
}

You link the pages to an external style sheet. This sheet can hold all of the styles used for each page. Then, by changing any style on only one CSS page, you can change all of the pages with those associated styles.

[slideri812]

Hi,

DR is right. We use CSS more now for layout (say Mambo) but we still do high breeds using tabls and CSS. We leave the tables totally striped down with no styling applied directly in the HTML (usually). ALL style, size postion and other atributes and many effects are controled from the one page of CSS.

For slicing your images use Fireworks. It will generate all of the images sliced the way you need them AND give you the blue print for your CSS controled layout or tables.

Besides, even with some differences between sections in sites, some elements typicly remain constant such as the head mask and such. In theis case use <td id="mystyle"> for single and consistant control of unchanging areas.

Weedy: check out Style Master by Westciv http://www.westciv.com/style_master/index.html. Best money I ever spent on CSS ($60US?) Tought me all the basics and many advanced features of CSS. Granted I had a basic understanding of them going in. It is one of my three most used tools.

Here is a six tag page layout I tossed togeter in under 3 minutes (styles looks like it too).

Insted of BG colors you can point them to url's of images for the bg.

Place the CS in the CSS file and the rest of the code in index.html

I know more advanced CSS layouts can be a bit trying, but in the long run it is worth it.



<<---------------Begin CSS
body {margin: 0;
padding: 0;
font-family: sans-serif;
line-height: 1.4em;
font-size: small }

div#header {padding: 2%;
text-align: center;
background-color: #800000;
color: #e6e6e6;
border-bottom: dotted #000080 thin }

div#footer {padding: 2%;
text-align: center;
clear: both;
background-color: #800000;
color: #e6e6e6;
border-top: dotted #000080 thin }

div#maincontent {padding: 2%;
text-align: justify;
margin-left: 24%;
margin-right: 24%;
background-color: #e6e6e6;
color: #333333;
border-right: dashed #800000 medium;
border-left: dashed #800000 medium }

div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #ffffff;
color: #800000;
width: 20% }

div#rightcolumn {padding: 2%;
float: right;
background-color: #ffffff;
color: #800000;
width: 20% }

<<---------------end CSS


<<---------------begin HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body><div id="header">

here is the header</p></div>

<div id="leftcolumn">


(left column)</p>


home</p>


section 1</p>

</div>

<div id="rightcolumn">


(right column)</p>


home</p>


section 1</p>

</div>

<div id="maincontent">


Here is the body or main content area</p>
</div>

<div id="footer">

here is the footer</p></div>
</body>
</html>

<<---------------end HTML

sorry, nuf said for me

[Weedy Lady]

Thanks so much, guys, for the codes. I am totally new to css, and appreciate your help. I have copied both and will begin the long uphill learning journey very soon. Just got a new laptop and have been busy loading all my stuff into it to make it a clone of my desktop computer.

It is most interesting to see the difference in how my site displays on my 800x600 resolution computer compared to the new 1280x800 resolution laptop!!!! Everything stays "where it is supposed to", but the pages sure get small! Kind of cute that way.

I've been putting off the css project because I use about 700 different background images on my cards pages, and my css page is going to wind up larger than my sitemap.xml for Google is. The renaming/numbering of the background graphics files is going to be a big job. Also, each card page uses 6 to 8 different border sizes, from 1 pixel wide to 42 pixels wide.

The net result is going to be a file that is huge and I think it will slow down the loading of my pages rather than speed it up.

I'm thinking that css is realy meant for sites that have the same format on every page -- which mine does on about 100 pages. But each "card" page is unique.

But I am going to give it a whirl.

Thanks again.

[ackerley1]

All, thank you for the advise and the varying opinions and approaches. Greatly appreciated.

However, I am still having great difficulty with this layout... Almost have spent more time on this than I will get paid for the whole project :-(

Anyhow... I am trying to set it up now with 3 layers (left, center and right) and use CSS to position them, however they are not lining up horizontally, they are stacking vertically. Really pissing me off and I could use some help... I am not even sure if this CSS layout will help solve my initial problem!!

Argh!!! Help!!!

Thanks

Rob