layout issues

[ADoozer]

hi, im currently building my first web page (written not through program) and im having a few problems.

i have all my images (corner pieces, fill pieces, headers etc) and i know exactly how it SHOULD look however

using tables: i cant get my fill pieces to repeat (100,*,400,*,100 pixels) and my second row (with 3 columns divided up into more columns and rows) wont display as required (ie the 3 TD sections are on top of each other rather than side by side)

here is the nesting

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
			<TBODY>
				<TR Width="100%">
					<TD WIDTH="100"><IMG SRC="./Pictures/Layout/Top Left Corner.jpg"></TD>
					<TD><IMG SRC="./Pictures/Layout/Top Horizontal Fill.jpg"></TD>
					<TD WIDTH="400"><IMG SRC="./Pictures/Layout/Logo 400X90.jpg"></TD>
					<TD><IMG SRC="./Pictures/Layout/Top Horizontal Fill.jpg"></TD>
					<TD WIDTH="100"><IMG SRC="./Pictures/Layout/Top Right Corner.jpg"></TD>
				</TR>
				
				<TR WIDTH="100%">
					<TD WIDTH="200">
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Left Vertical Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Top.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Left Fill.jpg"></TD>
							<TD><IMG SRC="./Pictures/Layout/Menu Right Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Bottom.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Left Vertical Fill.jpg"></TD>
						</TR>
					</TD>
					
					<TD><IMG SRC="./Pictures/Layout/AVP2 Background.jpg"></TD>
					
					<TD WIDTH="200">
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Right Vertical Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Top.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Left Fill.jpg"></TD>
							<TD><IMG SRC="./Pictures/Layout/Menu Right Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Bottom.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Right Vertical Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Top.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Left Fill.jpg"></TD>
							<TD><IMG SRC="./Pictures/Layout/Menu Right Fill.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Menu Bottom.jpg"></TD>
						</TR>
						<TR>
							<TD><IMG SRC="./Pictures/Layout/Right Vertical Fill.jpg"></TD>
						</TR>
					</TD>
				</TR>
				
				<TR WIDTH="100%">
				</TR>
			</TBODY>
		</TABLE>

i also tried using frames but that went even worse.

any help appreciated.

If somethings hard to do, its not worth doing - Homer Simpson
adoozer.servebeer.com

 

[nawlej]

Do you have a working example you coul show us so we get the idea of what the jigsaw is supposed to look like. Im sure its just a few attributes that need ot be changed.

___________________________________
[morse]--... ...--[/morse], Eric.

 

[ADoozer]

um its supposed to look something like this

http://adoozer.servebeer.com

(sorry for crappy drawing i aint no artist lol)

If somethings hard to do, its not worth doing - Homer Simpson
adoozer.servebeer.com

 

[ChrisHunt]

I'm not really all that much the wiser looking at your drawing, but I can see that your table is all messed up. You can't do this:

<TR WIDTH="100%">
  <TD WIDTH="200">
    <TR>
      <TD><IMG SRC="./Pictures/Layout/Left Vertical Fill.jpg"></TD>
    </TR>

If you want to have a single table cell split into multiple rows, nest a second <table> inside it or (better) use the rowspan attribute:

<table border="1">
  <tr>
    <td>Row A</td>
    <td rowspan="2">This cell covers<br />both rows</td>
  </tr>
  <tr>
    <td>Row B</td>
    <!-- not declaring a second column here, as it's defined above with a rowspan -->
  </tr>
</table>

PS. A good technique when debugging tables is to set the table's [tt]border="1"[/tt] so you can see the cell boundaries.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk