Jump to content


layout coding

Started by syndrome, Jun 30 2005 03:44 PM

16 replies to this topic

#1 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 30 June 2005 - 03:44 PM

This is the part i love of making website ;)

Sliced it pretty ok apart from not splitting the border.

ok now iv come across this problem:

Posted Image


this is how iv set the tables out:


Posted Image

if u need the code just shout

#2 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 01 July 2005 - 07:28 PM

I'd like to look at the code ;)

#3 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 02 July 2005 - 03:32 AM

Yey i was hoping you'd have a look Raenef :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Syndrome Designs</title>
<style type="text/css">

BODY {margin-top: 0px;}

</style>
</head>

<body>
<!-- main, header,nav,borders -->
<table width="850"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3" valign="top" background="images/left_border.jpg" width="22" height="758"></td>
	<td valign="top"><img src="images/header_left.jpg" width="408" height="97"></td><td><img src="images/header_right.jpg" height="97" width="400"></td>
	<td rowspan="3" valign="top" background="images/border_right.jpg" width="22" height-"725"></td>
  </tr>
  <tr><td colspan="2"><img src="images/link_home.jpg"><img src="images/link_tutorials.jpg"><img src="images/link_portfolio.jpg"><img src="images/link_downloads.jpg"><img src="images/link_affiliates.jpg"><img src="images/link_forum.jpg"></td></tr>
  <tr>
  
<td valign="top" colspan="2"> 


<!-- Site stats -->
<table cellpadding="0" cellspacing="0" valign="top">
<tr><td colspan="3"><img src="images/site_statistics_top.jpg"></td></tr>
<tr><td background="images/site_statistics_left.jpg" width="9" height="131"></td>
<td background="images/site_statistics_content.jpg" width="155 height="131"></td>
<td background="images/site_statistics_right.jpg" width="10" height="131"></td>
<tr><td colspan="3"><img src="images/site_statistics_bottom.jpg"></td></tr></table>


<!-- content -->
<center><table cellpadding="0" cellspacing="0" valign="top">
<tr>
<td colspan="3"><img src="images/content_top.jpg" width="431" height="42"></td></tr>
<tr valign="top">
<td background="images/content_left.jpg" width="9" height="323"></td>
<td background="images/content_content.jpg" width="412" height="323" cellpadding="1">&nbsp;</td>
<td background="images/content_right.jpg" width="10" height="323"></td></tr>
<tr>
<td colspan="3"><img src="images/content_bottom.jpg" width="431" height="10"></td>


</tr>

</table></center>


<!-- affiliates -->
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td colspan="3"><img src="images/affiliates_top.jpg"></td>
</tr>
<tr>
<td background="images/affiliates_left.jpg" width="9" height="130"></td>
<td background="images/affiliates_content.jpg" width="155" height="130"></td>
<td background="images/affiliates_right.jpg" width="10" height="130"></td>
</tr>
<tr>
<td colspan="3"><img src="images/affiliates_bottom.jpg"></td>
</tr>
</table>




</td>
  </tr>
</table>
</center>
</body>
</html>

sorry if its a little messy even with the labels ;)

#4 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 12:46 AM

Okie I'll have a look at the code; Im guessing you want the site statistics, content, and affiliate windows next to each other instead of the diagnol thing you have going now? :ph34r:


Edit: Well I've had a look at your code and it was pretty correct, except for one minor thing. Putting each of the tables in its own td table cell. So I've tried to rework the code (with none of the images); Have a go at it and let me know how it turns out k?:
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Syndrome Designs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>

	<body>

	<table width="850" border="0" cellpadding="0" cellspacing="0">
	<tr>
	<td rowspan="3" valign="top" background="background="images/left_border.jpg" width="22" height="758"></td>
	<td valign="top"><img src="images/header_left.jpg" width="408" height="97"></td><td><img src="images/header_right.jpg" height="97" width="400"></td>
	<td rowspan="3" valign="top" background="images/border_right.jpg" width="22" height-"725"></td>
	</tr>

	<!--Changed to colspan="6"-->
	<tr>
	<td colspan="6"><img src="images/link_home.jpg"><img src="images/link_tutorials.jpg"><img src="images/link_portfolio.jpg"><img src="images/link_downloads.jpg"><img src="images/link_affiliates.jpg"><img src="images/link_forum.jpg"></td>
	</tr>

	<tr>

<!--Site Stats Table-->
	<td valign="top">
<table cellpadding="0" cellspacing="0" valign="top">
<tr><td colspan="3"><img src="images/site_statistics_top.jpg"></td></tr>
<tr><td background="images/site_statistics_left.jpg" width="9" height="131"></td>
<td background="images/site_statistics_content.jpg" width="155" height="131"></td>
<td background="images/site_statistics_right.jpg" width="10" height="131"></td>
<tr><td colspan="3"><img src="images/site_statistics_bottom.jpg"></td></tr>
</table>
	</td>

	<!--Spacer table cell change width as needed; width = space between site stats and content-->
	<td width="35">&nbsp;</td>

<!--Content Table-->
    <td colspan="2" valign="top">
<table cellpadding="0" cellspacing="0" valign="top">
<tr>
<td colspan="3"><img src="images/content_top.jpg" width="431" height="42"></td></tr>
<tr valign="top">
<td background="images/content_left.jpg" width="9" height="323"></td>
<td background="images/content_content.jpg" width="412" height="323" cellpadding="1">&nbsp;</td>
<td background="images/content_right.jpg" width="10" height="323"></td></tr>
<tr>
<td colspan="3"><img src="images/content_bottom.jpg" width="431" height="10"></td>
</tr></table>
	</td>


	<!--Spacer Cell, change width as needed; width = space between content and affiliates-->
	<td width="34">&nbsp;</td>

<!--Affiliates Table-->
    <td width="150" valign="top">
<table cellpadding="0" cellspacing="0" align="right">
<tr>
<td colspan="3"><img src="images/affiliates_top.jpg"></td>
</tr>
<tr>
<td background="images/affiliates_left.jpg" width="9" height="130"></td>
<td background="images/affiliates_content.jpg" width="155" height="130"></td>
<td background="images/affiliates_right.jpg" width="10" height="130"></td>
</tr>
<tr>
<td colspan="3"><img src="images/affiliates_bottom.jpg"></td>
</tr>
</table>
	</td>
	</tr>
	</table>
	</body>
	</html>

Edited by raenef, 03 July 2005 - 01:29 AM.

#5 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 02:37 AM

Thanks loads raenef il have a look asap, i have a busy day today.

Thanks again,
Syndrome

#6 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 05:54 AM

:ph34r: not a problem, hopefully it all works out.

#7 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 06:52 AM

erm it kinda screwed it up big time

is there a way to get tables just to sit side by side?

Edited by syndrome, 03 July 2005 - 07:14 AM.

#8 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 12:42 PM

Sorry for the late responce, Im coding a bit here myself :D Ah, Im sorry it didnt work out too well for ya though. :(
There is a way to get the tables together side by side, I drew up a quick example that you can study/incorporate into your work:
Theres a working sample on my server http://67.177.143.166/test.html
(kinda ugly I know lols, but like I said 'quick example' :))
And the code for it is:
	<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>3 Table Run</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>

	<body>
	<table width="600" border="1" cellpadding="0" cellspacing="0" align="center">
	<!--DWLayoutTable-->

	<tr>
	<td height="63" colspan="3" valign="top" bgcolor="#00CCCC">Banner</td>
	</tr>

	<!--Left Table-->
	<tr>
	<td width="125" height="340" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
      <td width="125" height="25" valign="top">Left Table Head</td>
      </tr>
      <tr>
      <td height="287" valign="top">Left Table Content </td>
      </tr>
      <tr>
      <td height="25" valign="top">Left Table Foot </td>
      </tr>
      </table></td>

	<!--Content Table-->
	<td width="350" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
      <td width="350" height="25" valign="top" bgcolor="#009966">Content Table Head</td>
      </tr>
      <tr>
	<td height="290" valign="top" bgcolor="#009966">Content Table Content</td>
      </tr>
      <tr>
	<td height="25" valign="top" bgcolor="#009966">Content Table Foot</td>
      </tr>
	</table></td>

	<!--Right Table-->
	<td width="125" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
      <td height="25" colspan="2" valign="top" bgcolor="#9999FF">Right Table Head</td>
	</tr>
      <tr bgcolor="#9999FF">
      <td height="289" colspan="4" valign="top">Right Table Content</td>
      </tr>
	<tr>
      <td height="25" colspan="2" valign="top" bgcolor="#9999FF">Right Table Foot</td>
      </tr>
	</table></td>
	</tr>
	</table>
	</body>
	</html>

If after a while you get frustrated I have a final offer if you're willing.
Since I dont like to leave problems unsolved, if you're willing to zip up the images/code you have so far/ well your site folder basically and send it to:
Cataclypse@gmail.com
I'll see what I can work with from there, and code it for ya. However I gotta warn ya, Im not too used to using tables anymore so I may end up coding in in XHTML/CSS but if thats not a problem and you're willing to wait a day or two then Im willing to do it.

All in all I hope to get your site resolved, and I wish you luck.

Edited by raenef, 03 July 2005 - 12:44 PM.

#9 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 02:25 PM

thanks for the offer but im not gonna take it *AT THE MOMENT* lol

I got the content boxes more or less sorted.

now this has happened without me knowin. the navigations moved down :)


Posted Image

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Syndrome Designs</title>
<style type="text/css">

BODY {margin-top: 0px;}

</style>
</head>

<body>
<!-- main, header,nav,borders -->
<table width="850"  border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td rowspan="3" valign="top" background="images/left_border.jpg" width="22" height="758"></td>
	<td valign="top"><img src="images/header_left.jpg" width="408" height="97"></td><td valign="top"><img src="images/header_right.jpg" height="97" width="400"></td>
	<td rowspan="3" valign="top" background="images/border_right.jpg" width="22" height"725"></td>
  </tr>
  <tr><td colspan="2" valign="top"><img src="images/link_home.jpg"><img src="images/link_tutorials.jpg"><img src="images/link_portfolio.jpg"><img src="images/link_downloads.jpg"><img src="images/link_affiliates.jpg"><img src="images/link_forum.jpg"></td>
  </tr>
  <tr>
  
<td valign="top" colspan="2">


<table cellpadding="0" cellspacing="0" align="center">
<tr>
<td valign="top" height="187" width="174">
<!-- Site stats -->
<table cellpadding="0" cellspacing="0" valign="top">
<tr><td colspan="3"><img src="images/site_statistics_top.jpg"></td></tr>
<tr><td background="images/site_statistics_left.jpg" width="9" height="131"></td>
<td background="images/site_statistics_content.jpg" width="155" height="131"></td>
<td background="images/site_statistics_right.jpg" width="10" height="131"></td>
<tr><td colspan="3"><img src="images/site_statistics_bottom.jpg"></td></tr></table>
</td>
<td rowspan=3>

<!-- content -->
<table cellpadding="0" cellspacing="0" valign="top">
<tr>
<td colspan="3"><img src="images/content_top.jpg" width="431" height="42"></td></tr>
<tr valign="top">
<td background="images/content_left.jpg" width="9" height="323"></td>
<td background="images/content_content.jpg" width="412" height="323" cellpadding="1"></td>
<td background="images/content_right.jpg" width="10" height="323"></td></tr>
<tr>
<td colspan="3"><img src="images/content_bottom.jpg" width="431" height="10"></td>


</tr>

</table>
</td>
<td valign="top">

<!-- affiliates -->
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="images/affiliates_top.jpg"></td>
</tr>
<tr>
<td background="images/affiliates_left.jpg" width="9" height="130"></td>
<td background="images/affiliates_content.jpg" width="155" height="130"></td>
<td background="images/affiliates_right.jpg" width="10" height="130"></td>
</tr>
<tr>
<td colspan="3"><img src="images/affiliates_bottom.jpg"></td>
</tr>
</table>

</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td height="1">


</table>



</td>
  </tr>
</table>

</body>
</html>

Edited by syndrome, 03 July 2005 - 02:25 PM.

#10 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 03:13 PM

Thats strange, the only thing that changed between this working one, and the one that wasnt working (in the headers)
Is the space of the last </tr> in your nav/header part. Sometimes tables are touchy with whitespace, try and bring the tags closer together and see if that works example of what Im talking about:

<td rowspan="3" valign="top" background="images/left_border.jpg" width="22" height="758"></td>
<td valign="top"><img src="images/header_left.jpg" width="408" height="97"></td><td><img src="images/header_right.jpg" height="97" width="400"></td>
<td rowspan="3" valign="top" background="images/border_right.jpg" width="22" height-"725"></td>
 </tr>
 <tr><td colspan="2"><img src="images/link_home.jpg"><img src="images/link_tutorials.jpg"><img src="images/link_portfolio.jpg"><img src="images/link_downloads.jpg"><img src="images/link_affiliates.jpg"><img src="images/link_forum.jpg"></td>
</tr>
 <tr>

changed to (the last /tr tag):
<td rowspan="3" valign="top" background="images/left_border.jpg" width="22" height="758"></td>
<td valign="top"><img src="images/header_left.jpg" width="408" height="97"></td><td><img src="images/header_right.jpg" height="97" width="400"></td>
<td rowspan="3" valign="top" background="images/border_right.jpg" width="22" height-"725"></td>
 </tr>
 <tr><td colspan="2"><img src="images/link_home.jpg"><img src="images/link_tutorials.jpg"><img src="images/link_portfolio.jpg"><img src="images/link_downloads.jpg"><img src="images/link_affiliates.jpg"><img src="images/link_forum.jpg"></td></tr>
 <tr>

Thats a strange little error, and from a coding standpoint doesnt look like it should be happening lol :) But as I said tables are touchy.

Other tips:
Try to lessen the <enters> in your code, and the use of whitespace all together around your header area and see if that effects it.
Wish ya luck.

Edited by raenef, 03 July 2005 - 03:15 PM.

#11 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 03:49 PM

OK im not getting any closer to getting this right so im gonna send you the images and im gonna ask if you can code it for me if thats ok :) im afraid i cant offer any money.


I just wanna see what was bloody wrong.

#12 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 03:59 PM

lols sure not a problem, plus, I need no moneys I just dont like to leave problems unsolved. :)

#13 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 04:04 PM

thanks man its just wen i put sumat in a table it changes the header. cant understand it.

gotta learn css and the div thing instead of tables

#14 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 04:07 PM

:D I definately recomend div/css, its a lot easier to maintain in mine opinion. Ya should have a go at them sometime. But tables are pretty good for what they do too, speakin of which Im off to go work on your layout. :)

#15 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 03 July 2005 - 04:12 PM

oo thanks dude, there isnt any hurry for it so dont bend over backwards to do it :)

#16 raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 03 July 2005 - 04:54 PM

Not a prob not a prob, I should have it back to you no later than tomorrow night. :)
I've messed with it just a bit trying different things and for some reason its being a bit tricky here as well :) I'll figure it out though no worries.

EDIT: Ah-ha! Finally after staring at the code forever I found out why that big white space is appearing, however it brings up another problem: Its because of the left and right borders, take their height attribute out and the white space disapears, however if you do so the borders only go as far as the bottom of your layout, and dont reach the bottom of the page. :-\ New prob.

Edited by raenef, 03 July 2005 - 06:46 PM.

#17 syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 04 July 2005 - 02:03 AM

so basically your saying that i cant have the borders to expand?

O well, top notch job, i see you put that 1 px cell there so the content expands and the rest dont follow with it. I had that idea :)

Edited by syndrome, 04 July 2005 - 02:04 AM.

Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design