table to div layout

nev02 · 16-Oct-2007, 11:18 AM #1

can any one help make my table within my editable region a div layout

<div class="thrColLiqHdr" align="left" id="mainContent">
<table width="770" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="227" rowspan="2">d</td>
<td colspan="2">d</td>
</tr>
<tr>
<td width="234">d</td>
<td width="209">d</td>
</tr>
</table>
<p> </p>
 </div>

thats what i have now but i'm confused on how to position the divs as it it would look in table layout and put divs within a div.

if anyone can help that would be great.

tomdkat · 16-Oct-2007, 02:17 PM #2

This is a test page I came up with. I'm sure others will come up with something better.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>table-to-div</title>
  <style type="text/css">
.left {
  border-style: dotted;
  border-color: #3333ff;
  display: block;
  width: 227px;
  height: 94px;
  float: left;
  position: relative;
  margin-top: 10px;
  padding-left: 10px;
  margin-left: 15px;
}

.right {
}

.right-top {
  border-style: dotted;
  border-color: #cc33cc;
  display: block;
  position: relative;
  float: left;
  padding-left: 10px;
  margin-top: 10px;
  width: 470px;
  height: 31.5%;
  margin-left: 10px;
  margin-right: 0px;
  padding-right: 0px;
}

.right-bottom-left {
  border-style: dotted;
  border-color: #33cc00;
  display: block;
  position: relative;
  float: left;
  width: 234px;
  padding-left: 10px;
  margin-left: 10px;
  margin-top: 10px;
  height: 31.5%;
  margin-right: 0px;
  padding-right: 0px;
}

.right-bottom-right {
  border-style: dotted;
  border-color: #009900;
  display: block;
  float: left;
  position: relative;
  width: 209px;
  margin-top: 10px;
  margin-left: 10px;
  padding-left: 10px;
  height: 31.5%;
  margin-right: 0px;
  padding-right: 0px;
}


  </style>
</head>
<body>
<div
 style="border: 1px solid rgb(255, 0, 0); display: block; height: 125px; width: 770px;">
<div class="left">left - 227px</div>
<div class="right-top">right-top</div>
<div class="right-bottom-left">right-bottom-left</div>
<div class="right-bottom-right">right-bottom-right</div>
</div>
</body>
</html>

Peace...

nev02 · 17-Oct-2007, 04:47 AM #3

ah thats great cheers! thats brilliant almost there. i find that it doesn't push my footer down it just moves the header up so when i view it in a browser it shows the content within the div overlapping the footer. is there something i can do to change this ?

tomdkat · 17-Oct-2007, 10:23 AM #4

Well, keep in mind the example I posted was based solely on the table you posted above and didn't take into consider *the rest* of your page.

We'll have to see the entire page to best determine how to integrate DIVs based on how the other elements flow, etc.

Peace...

nev02 · 17-Oct-2007, 10:29 AM #5

ah sorry about that here is what i have so far

<body class="thrColLiqHdr">

<div id="container">
<div id="header">
<h1><img src="../images/header_image1.jpg" width="770" height="341" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="282,114,330,130" href="#" alt="home " />
<area shape="rect" coords="278,136,338,154" href="#" alt="gallery" />
<area shape="rect" coords="276,158,360,176" href="#" alt="technical" />
<area shape="rect" coords="278,182,334,198" href="#" alt="quote" />
<area shape="rect" coords="279,202,365,220" href="#" alt="contact us" />
<area shape="rect" coords="441,163,751,193" href="#" alt="sales@thepastrecast.com" />
</map>
</h1>
</div>
<div class="thrColLiqHdr" align="left" id="mainContent">
<div
style="border:rgb(255, 255, 255); display: block; height: 125px; width: 770px;">
<div class="left">
<p>contentleft</p>
</div>
<div class="right-top">content top right</div>
<div class="right-bottom-left">contentbottomleft</div>
<div class="right-bottom-right">contentbottomright</div>
</div>
</div>
<div id="footer">
<p><img src="../images/footer_menu.jpg" width="770" height="31" /></p>
</div>
<div align="right" id="footer2">
<table class="footertxt" width="770" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="right">
<p>home . gallery . quote . contact us<br />
(c) the past re-cast ltd<br />
site by: michaelassociates</p>
</div></td>
<td width="70"><div align="center"><img src="../images/footer_image.jpg" width="55" height="40" /></div></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.thrColLiqHdr #container {
width: 770px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
background-color: #FFFFD9;
border-left: #CCCCCC solid;
border-right: #CCCCCC solid;

}
.thrColLiqHdr #header {
background: #DDDDDD;
}
.thrColLiqHdr #header h1 {
margin: 0;
}
.thrColLiqHdr #mainContent {
width: 770px;
font-size:small;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
background-color: #FFFFD9;
height: auto;
}

.thrColLiqHdr #footer {
background:#DDDDDD;
}
.thrColLiqHdr #footer p {
margin: 0;
}
.footertxt { font-family:Arial, Helvetica, sans-serif; font-size: x-small; background-color:#FFFFD9; text-align:right;}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.left {

border-color:#FFFFD9;
display: block;
width: 227px;
height: auto;
float: left;
position:relative;
margin-top: 10px;
padding-left: 10px;
margin-left: 15px;
}

.right {
}

.right-top {
border-color:#FFFFD9;
display: block;
position: relative;
float: left;
padding-left: 10px;
margin-top: 10px;
width: 470px;
height: auto;
margin-left: 10px;
margin-right: 0px;
padding-right: 0px;
}

.right-bottom-left {

border-color: #FFFFD9;
display: block;
position: relative;
float: left;
width: 234px;
padding-left: 10px;
margin-left: 10px;
margin-top: 10px;
height: auto;
margin-right: 0px;
padding-right: 0px;
}

.right-bottom-right {
border-color: #FFFFD9;
display: block;
float: left;
position: relative;
width: 209px;
margin-top: 10px;
margin-left: 10px;
padding-left: 10px;
height: auto;
margin-right: 0px;
padding-right: 0px;
}

CarlyCarlyCarlyW · 19-Oct-2007, 07:37 AM #6

you should try looking at this website:

http://www.tutorialtastic.co.uk/tuto...bleless_layout
and
http://www.tutorialtastic.co.uk/tuto...bleless_layout

thats how I learnt.

tomdkat · 08-Nov-2007, 04:50 PM #7

Could you post a link to the "live" site so we can see how it looks with images and real content?

Thanks!

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Tag Cloud
acer blue screen boot bsod computer connection crash css dell display driver drivers email error ethernet excel firefox firefox 3 game hard drive hardware internet internet explorer itunes laptop linux malware monitor network networking outlook outlook 2003 outlook express partition password printer problem problems ram router slow sound trojan usb video virus vista windows windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)