Need Help align tables

@TagUK2006May 24.2008

Hi Guys,

Im trying to slice an image and fit it into 3 tables so it looks like the image is 1 but the center table can grow with data so the Image will appear to grow with it..

I did have this working but Im getting a gap between the top table and second??

What Ive done is places a table on a page as a container and inside it i have 3 tables with the backgrounds set tomy images using varables..

If anyone can five me a better way to do this so I dont have a tear id appreciate the pointers..

Here is my HTML

[code] <table width=”614″ height=”276″ border=0 cellspacing=0 cellpadding=0 > <tr> <td width=”694″ height=”270″ valign=”top”> <table width=”614″ height=”65″ style=”background:URL(<%=BannerPathTop1%>) no-repeat” border=0 cellspacing=0 cellpadding=0 > <tr> <td width=”622″ height=”70″></td> </tr> </table> <table width=”614″ height=”127″ style=”background:URL(<%=BannerPathTop2%>)” border=0 cellspacing=0 cellpadding=0 > <tr> <td></td> </tr> </table> <table width=”614″ height=”65″ style=”background:URL(<%=BannerPathTop3%>) no-repeat” border=0 cellspacing=0 cellpadding=0 > <tr> <td height=”48″></td> </tr> </table></td> </tr> </table>

[/code]

Thanks..

to post a comment

CSS

12 Comments(s) _↴

@TagUK2006authorMay 24.2008 — #Sorry I got this should have looked at the code a bit harder , the HTML editor changed one of the TD's height and I never saw it...!!

Thanks if you looked in to help...

Im still up for a better way to do this I know tables are not prefereed these days but have never had time to figure out a better way to do this manually..

Thanks :-)

@CentauriMay 24.2008 — #Looks like misuse of tables to me... Do you have an image of what this actually looks like (or an example online) ? - then we may be able suggest an alternate (and possibly simpler) way.

@TagUK2006authorMay 24.2008 — #Hi,

Yes I realise its not good to do this with tables these days, when I was at college we did very little CSS and most layouts were taught to us using tables and ive not ever had a chance to catch up realy its just a spare time thing.. But would like to know how to do this in a better way as you mention.

The pages are not online for this at the moment but whats happens Is I have data that comes from a database so there is a section on the page that needs to grow depending on how manyrecords are returned..

So my image that needs to be used is more or less a rounded rectangle with some filter effects and then ive taken 3 slices out of it One from the top and bottom of the rectangle image and a center section from it that will stretch inside the table as the data fills and give the illusion that its always the same size no matter how much data gets returned this background image will fit..

So as I say I used the 3 tables to set this up and its on an Include file so there is nothing else on this page except this code..

I do have this running now and it looks fine for what I want but know its not the most efficient way to do it so tips are welcome.

Thanks again.. :-)

<i>
 </i>&lt;%
 dim BannerPathTop1
 dim BannerPathTop2
 dim BannerPathTop3
 dim LinksBG1
 
 BannerPathTop1="/pics08/linksbarTop.jpg"
 BannerPathTop2="/pics08/linksbarMiddle.jpg"
 BannerPathTop3="/pics08/linksbarBottom.jpg"
 
 
 %&gt;
 
 &lt;table width="614" height="65" style="background:URL(&lt;%=BannerPathTop1%&gt;) no-repeat top left " border=0 cellspacing=0 cellpadding=0 &gt;
 &lt;tr&gt;
 &lt;td width="622" height="65"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;table width="614" height="127" style="background:URL(&lt;%=BannerPathTop2%&gt;) repeat top left " border=0 cellspacing=0 cellpadding=0 &gt;
 &lt;tr&gt;
 &lt;td valign="top"&gt;&lt;!--#include file="includes/inc_Links.asp" --&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;table width="614" height="65"  style="background:URL(&lt;%=BannerPathTop3%&gt;) no-repeat top left " border=0 cellspacing=0 cellpadding=0 &gt;
 &lt;tr&gt;
 &lt;td  height="48"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;

@CentauriMay 24.2008 — #Can you attach the 3 images you are using ? - it is a little difficult to see what is happening here due to conflicting sizes in the table code. I am assuming the images are 614px wide, but the top table is trying to contain a td that is 622px wide?, and the bottom table the td height is less than table height...

Basically, it should work something like :

[CODE]<div class="box">
 <div class="top"></div>
 ..content here..
 <div class="bottom"></div>
 </div>[/CODE]

styled like

[CODE].box {
 width: 600px;
 padding: 0 7px;
 background: url(/pics08/linksbarMiddle.jpg) repeat-y;
 }
 .box .top {
 height: 65px;
 margin: 0 -7px;
 background: url(/pics08/linksbarTop.jpg);
 }
 .box .bottom {
 height: 65px;
 margin: 0 -7px;
 background: url(/pics08/linksbarBottom.jpg);
 }[/CODE]

The side padding, and matching negative side margins space the contents away from the side border of the image.

@TagUK2006authorMay 24.2008 — #Hi,

Yes you have the width correct..

The top and bottom of the tables should be the same height and the center can be any height..

I have attached the 3 images im using, I could probably have sliced them up a little more but the page loading time isint realy an issue and havent had any problems so have kept them to these sizes to date..

Id be interested to see what you think..

Thanks again. :-)

[upl-file uuid=bf70d708-3a04-4fc5-ad43-f8749b80e710 size=4kB]linksbarBottom.jpg[/upl-file]

[upl-file uuid=662855fe-b3f1-4148-8457-e74ebe2735a3 size=1kB]linksbarMiddle.jpg[/upl-file]

[upl-file uuid=7b444c02-eaf7-4e5c-ae38-c647e379e8aa size=9kB]linksbarTop.jpg[/upl-file]

@CentauriMay 24.2008 — #Yes, those images should work with the code I gave.

@TagUK2006authorMay 24.2008 — #Thank you, I will try this later and see how i get on..

Much appreciated :-)

@CentauriMay 24.2008 — #Just looking at this with the images, due to the width of the side borders, a little more padding is in order :

[CODE].box {
 width: [COLOR="Red"]574px[/COLOR];
 padding: 0 [COLOR="Red"]20px[/COLOR];
 background: url(pics08/linksbarMiddle.jpg) repeat-y;
 color: #FFFF66;
 }
 .box .top {
 height: 65px;
 margin: 0 [COLOR="Red"]-20px[/COLOR];
 background: url(pics08/linksbarTop.jpg);
 }
 .box .bottom {
 height: 65px;
 margin: 0 [COLOR="Red"]-20px[/COLOR];
 background: url(pics08/linksbarBottom.jpg);
 }
 [/CODE]

@TagUK2006authorMay 24.2008 — #Thank you very much, I havent tried this as yet as im not at home but will do later, Just saw the email sitting and appreciate your feedback.. :-)

@TagUK2006authorMay 25.2008 — #Thanks I got this running today and its great!!

I always wonderd how I should change from using tables to help me layout!! Need a refresher course i think 2000 was such a long time ago.

The only thing that didnt work was your padding settings.. when I ran the code my images had stretched 20 pixels wider too and repeated a little..

So this changes fixed it, and I wondered how it worked for you and not me..

Thanks

<i>
 </i>&lt;div class="box"&gt;
 &lt;div class="top"&gt;&lt;/div&gt;
 &lt;span class="style16"&gt;&lt;div style="padding-left:20px;"&gt;..content here.. &lt;/div&gt; &lt;/span&gt;
 &lt;div class="bottom"&gt;&lt;/div&gt;
 &lt;/div&gt;

<i>
 </i>.box {
 width: 614px;
 padding: 0 0px;
 background: url(/pics08/linksbarMiddle.jpg) repeat-y;
 }
 .box .top {
 height: 65px;
 margin: 0 -0px;
 background: url(/pics08/linksbarTop.jpg);
 }
 .box .bottom {
 height: 65px;
 margin: 0 -0px;
 background: url(/pics08/linksbarBottom.jpg);
 }

@CentauriMay 25.2008 — #when I ran the code my images had stretched 20 pixels wider too and repeated a little..[/QUOTE]

Shouldn't have done. The 574px width plus the two lots of 20px padding should have added up to 614px - the image width. The outer div padding and the negative margins means that another internal div, such as you ended up with, is not needed.

Does your testing page have a full and valid doctype ?

@TagUK2006authorMay 25.2008 — #ahh pants!!!! I didnt see the 574 and used the image width myself!!!

Doh.. Im sure it will be fine.. sorry :-)

Also in #CSS _↴

Transparent Text boxes.Centering a floating div Style sheet for printing; unexpected behavior of asterisk

Success!

Help @TagUK2006 spread the word by sharing this article on Twitter...

Tweet This

Need Help align tables

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Need Help align tables

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴