Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Table layout to Div & CSS

Started by Andy82, Jun 30 2008 09:44 AM

You cannot reply to this topic
Go to first unread post

1 reply to this topic

#1 Andy82

Young Padawan

Members
13 posts

Posted 30 June 2008 - 09:44 AM

Hey,

I am completely new to this and have only ever made one table layout before so please go easy on me . I found this free layout online and am trying to learn how to change it into DIV's and CSS. I have been trying for days now but am going round in circles. The code is extremely untidy and I have made it even worse. I have read some tutorials on here and understand how I need to change this but I am struggling when it come to aligning and order.

An image of what it looks like

The HTML/XHTML mess…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<title>Page Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta content="" name="robots" />
<meta content="" name="description" />
<meta content="" name="keywords" />
<link href="style.css" type="text/css" rel="stylesheet" />
<meta content="mshtml 6.00.6000.16674" name="generator" />
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" border="0">
  <tbody>
	<tr>
	  <td><img alt="" height="20" src="images/border_1.gif" width="20" /></td>
	  <td width="100%" background="images/border_2.gif"></td>
	  <td><img alt="" height="20" src="images/border_3.gif" width="20"></td>
	</tr>
  </tbody>
</table>
<table cellspacing="0" cellpadding="0" align="center" border="0">
  <tbody>
	<tr>
	  <td background="images/border_4.gif"><img alt="" height="2" src="images/border_4.gif" width="20" /></td>
	  <td width="100%" bgcolor="#cfdfee" colspan="2"><table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
		  <tbody>
			<tr>
			  <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
				  <tbody>
					<tr>
					  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="0" width="100%" border=0>
						  <tbody>
							<tr>
							  <th class="thcornerl"> <table cellspacing="0" cellpadding="0" width="100%">
								  <tbody>
									<tr>
									  <th style="padding-left: 4px" nowrap align="left" height=25> top header content</th>
									  <th style="padding-right: 4px" nowrap align="right" height="25">date </th>
									</tr>
								  </tbody>
								</table></th>
							</tr>
							<tr>
							  <td class="logo"><a href="" border="0"><img alt="" title="logo" height="94" src="images/logo.gif" width="295" border="0" /></a></td>
							</tr>
							<tr>
							  <td class="catLeft" colspan="2" height="28" style="text-align: center"><span class="menu">bottom header content</span></td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table></td>
			</tr>
		  </tbody>
		</table>
		<img alt="" height="3" src="" width="1" />
		<table cellspacing="0" cellpadding="0" width="100%">
		  <tbody>
			<tr>
			  <td class="side-border-left" valign="top" width="170"><table cellspacing="0" cellpadding="0" width="100%" border="0">
				  <tbody>
					<tr>
					  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="3" 
						width="100%" border="0">
						  <tbody>
							<tr align="right">
							  <td class="catHead" align="left"><span 
							  class="nav">left box header</span></td>
							</tr>
							<tr>
							  <td class="style4" bgcolor="#abc5e2">left box content</td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table></td>
			  <td class="main-bg" valign="top"><table cellspacing="0" cellpadding="0" width="100%" border="0">
				  <tbody>
					<tr>
					  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="3" 
						width="100%" align="center" border="0">
						  <tbody>
							<tr align="right">
							  <td class="catHead" align="left"><span class="nav"> announcement </span></td>
							</tr>
							<tr align="left">
							  <td class="side-body" bgcolor="#abc5e2">announcements 
								content</td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table>
				<table cellspacing="0" cellpadding="0" width="100%">
				  <tbody>
					<tr>
					  <td height="8"></td>
					</tr>
				  </tbody>
				</table>
				<table cellspacing="0" cellpadding="0" width="100%" border="0">
				  <tbody>
					<tr>
					  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="3" 
						width="100%" align="center" border="0">
						  <tbody>
							<tr align="right">
							  <td class="catHead" align="left"><span 
							  class="nav">welcome</span></td>
							</tr>
							<tr align="left">
							  <td class="side-body" bgcolor="#abc5e2">welcome box 
								content</td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table>
				<table cellspacing="0" cellpadding="0" width="100%">
				  <tbody>
					<tr>
					  <td height="8"></td>
					</tr>
				  </tbody>
				</table></td>
			  <td class="side-border-right" valign="top" width="170"><table cellspacing="0" cellpadding="0" width="100%" border="0">
				  <tbody>
					<tr>
					  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="3"
						width="100%" border="0">
						  <tbody>
							<tr align="right">
							  <td class="catHead" align="left"><span 
							  class="nav">right box header</span></td>
							</tr>
							<tr align="left">
							  <td class="style4" bgcolor=#abc5e2>right box content</td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table>
				<table cellspacing="0" cellpadding="0" width="100%">
				  <tbody>
					<tr>
					  <td height="8"></td>
					</tr>
				  </tbody>
				</table></td>
			</tr>
		  </tbody>
		</table>
		<table cellspacing="1" cellpadding="2" width="100%" border="0">
		  <tbody>
			<tr>
			  <td align="middle" width="100%"><table cellspacing="0" cellpadding="0" width="100%" align="center" 
			border="0">
				  <tbody>
					<tr>
					  <td><table cellspacing="0" cellpadding="0" width="100%" border="0">
						  <tbody>
							<tr>
							  <td class="forumlinemain"><table class="forumline" cellspacing="1" cellpadding="0" 
						width="100%" border="0">
								  <tbody>
									<tr>
									  <td class="main-bg" height="28" style="text-align: center"> footer text</td>
									</tr>
								  </tbody>
								</table></td>
							</tr>
						  </tbody>
						</table></td>
					</tr>
				  </tbody>
				</table></td>
			</tr>
		  </tbody>
		</table>
	  <td background="images/border_5.gif" />
	  <img alt="" height="2" src="images/border_5.gif" width="20" />
</table>
<table cellspacing="0" cellpadding="0" align=center border="0">
  <tbody>
	<tr>
	  <td><img alt="" height="20" src="images/border_6.gif" width="20" /></td>
	  <td width="100%" background=images/border_7.gif />
	  </td>
	  <td><img alt="" height="20" src="images/border_8.gif" width="20" /></td>
	</tr>
  </tbody>
</table>
</tr>
</body>
</html>

I started with this bit...

<table cellspacing="0" cellpadding="0" align="center" border="0">
  <tbody>
	<tr>
	  <td><img alt="" height="20" src="images/border_1.gif" width="20" /></td>
	  <td width="100%" background="images/border_2.gif"></td>
	  <td><img alt="" height="20" src="images/border_3.gif" width="20"></td>
	</tr>
  </tbody>
</table>

and tried using DIV's like this...

<div class="something">
	  <div class="border1"><img alt="" src="images/border_1.gif" /></div>
	  <div class="border2"></div>
	  <div class="border3"><img alt="" src="images/border_3.gif" /></div>
</div>

The CSS has...

 
BODY {
background-color: #97b9da; 
padding-right: 10px; 
padding-left: 10px; 
font-size: 11px; 
padding-bottom: 0px; 
margin: 0px; 
color: #000000; 
padding-top: 0px; 
font-family: Arial, Tahoma, Verdana, sans-serif;
}

#something {
 margin:0px auto;
 padding:0px;
 border:0px;
 border-collapse:collapse;
}

#border1 {
 width:20px;
 height:20px;
}

#border2 {
 background-image:url('images/border_2.gif');
 width:100%;
}

#border3 {
 width:20px;
 height:20px;
}

When I use that though the images all align to the left like...

border1
border2
border3

I have tried floating border1 to the left and border3 without any luck. Could someone please show me the structure to do this the correct way I am going mad trying to understand this.

Any help would be greatly appreciated.

Back to top

#2 shao

Original P2L Programmer

Members
49 posts

Gender:Male
Location:Canada

Posted 30 June 2008 - 11:00 PM

Ahh, the good ole days. I had trouble with CSS wayyy back. One thing you need to remember is that CSS is very strict (I call it Code Seems Simple).

Your "something" class need a WIDTH element for the border1, border2, border3 classes align into 3 columns. I would do something like:
.something { width: 300px; }
.border1 {width: 100px; float: left;}
.border2 {width: 100px; float: left;}
.border3 {width: 100px; float: left;}

If you add padding or margin to the border classes, just remember to keep track of the total px (which is 300px in this case), if you go over 300px total the border3 will get pushed to the next row. Try it and see.

Good luck!

Andy82, on Jun 30 2008, 03:44 PM, said:

Hey,

I am completely new to this …

When I use that though the images all align to the left like...

border1
border2
border3

I have tried floating border1 to the left and border3 without any luck. Could someone please show me the structure to do this the correct way I am going mad trying to understand this.

Any help would be greatly appreciated.

Back to top

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

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users