Div/Layout Coding Help

Luke · 09-09-2008, 07:14 PM

Well, after MANY attempts to divs, i gave up and turned to tables, now, i coded the layout in tables, it messed up. I coded fresh, this time trying to do every like tihng in css (height, width, background, valign etc) again, it messed up

So, i'm here to ask if anyone could, convert these tables into divs
Source:

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}
body {
	background-image: url(images/bg.PNG);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#main {
background:url(images/main_bg.PNG);
width:800px;
border:0px;
margin-left: auto;
margin-right: auto;
}
#main_top {
background:url(images/main_top.PNG);
width: 800px;
height: 12px;
vertical-align:top;
}
#logo {
width: 214px;
height: 81px;
vertical-align:top;
}
.main_title {
font-size: 20px;
	color: #313E5B;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	width: 282px;
	height: 24px;
	vertical-align:top;
}
#spacer {
width: 776px;
height: 12px;
background-color:#FFFFFF;
vertical-align:top;
}
#navbar {
background: url(images/navigation/spacer.PNG);
height: 7px;
width: 776px;
vertical-align: top;
}
#banner {
width: 776px;
height: 115px;
vertical-align:top;
}
.style5 {	color: #FFFFFF;
	font-weight: bold;
}
.style3 {
	color: #767A98;
	font-size: 10px;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a.top:link {
	color: #767A98;
}
a.top:visited {
	color: #767A98;
}
a.top:hover {
	color: #767A98;
}
a.top:active {
	color: #767A98;
}
-->
</style>
<script type="text/javascript">
var iframeids=["login", "middle"]

var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>
</head>

<body onLoad="goforit()">
<br />
<table id="main" width="800" border="0" cellpadding="0" cellspacing="0" height="649"><!--DWLayoutTable-->
<tr>
<td colspan="10" id="main_top" style="height: 12px; width: 800"> </td>
	</tr>
	<tr>
<td rowspan="4" valign="top">&nbsp; </td>
<td rowspan="4" valign="top" id="logo" style="height: 81; width: 214px"><img src="images/logo.PNG" width="214" height="81" alt="" /></td>
<td height="17" colspan="7" valign="top">
<p align="right">&nbsp;<span class="style3">   <a href="user/news.php" target="middle" class="top">» NEWS</a> <a href="user/links.php" target="middle" class="top">» LINKS</a> <a href="user/downloads.php" target="middle" class="top">» DOWNLOADS</a> » CONTACT INFORMATION</span></td>
<td rowspan="4" valign="top">&nbsp; </td>
		</tr>
		<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
<td>&nbsp;</td>
<td height="26">&nbsp;</td>
<td rowspan="2">&nbsp; </td>
<td rowspan="2">&nbsp; </td>
		</tr>
		<tr>
<td></td>
<td width="137"></td>
			<td valign="top" width="145"><i>&quot;Your taxiway to takeoff&quot;</i></td>
<td></td>
<td height="14"></td>
		</tr>
		<tr>
  <td width="12">&nbsp;</td>
<td valign="top" class="main_title" style="height: 24; width: 282px" colspan="2">1409 (CONSETT) SQUADRON</td>
		<td valign="top" width="48">BETA</td>
  <td width="30">&nbsp;</td>
  <td>&nbsp;</td>
  <td height="24">&nbsp;</td>
	</tr>
	<tr>
  <td valign="top"></td>
<td id="spacer" colspan="8" style="height: 12; width: 776"> </td>
<td valign="top" height="12"></td>
	</tr>
	<tr>
  <td></td>
<td colspan="8" valign="top"><a href="home.htm" target="middle"><img src="images/navigation/home.PNG" width="84" height="25" border="0" onmouseover="this.src='images/navigation/home_1.PNG'" onmouseout="this.src='images/navigation/home.PNG'" alt="" /></a><img src="images/navigation/about.PNG" width="93" height="25" onmouseover="this.src='images/navigation/about_1.PNG'" onmouseout="this.src='images/navigation/about.PNG'" alt="" /><img src="images/navigation/cadet.PNG" width="98" height="25" onmouseover="this.src='images/navigation/cadet_1.PNG'" onmouseout="this.src='images/navigation/cadet.PNG'" alt="" /><a href="user/members.php" target="middle"><img src="images/navigation/members.PNG" width="92" height="25" border="0" onmouseover="this.src='images/navigation/members_1.PNG'" onmouseout="this.src='images/navigation/members.PNG'" alt="" /></a><img src="images/navigation/atc.PNG" width="146" height="25" onmouseover="this.src='images/navigation/atc_1.PNG'" onmouseout="this.src='images/navigation/atc.PNG'" alt="" /><img src="images/navigation/activities.PNG" width="84" height="25" onmouseover="this.src='images/navigation/activities_1.PNG'" onmouseout="this.src='images/navigation/activities.PNG'" alt="" /><img src="images/navigation/events.PNG" width="84" height="25" onmouseover="this.src='images/navigation/events_1.PNG'" onmouseout="this.src='images/navigation/events.PNG'" alt="" /><img src="images/navigation/pav.PNG" width="95" height="25" onmouseover="this.src='images/navigation/pav_1.PNG'" onmouseout="this.src='images/navigation/pav.PNG'" alt="" /></td>
  <td height="25"></td>
  	</tr>
	<tr>
  <td></td>
<td colspan="8" valign="top" id="navbar" style="height: 7; width: 776"><img src="images/navigation/spacer.PNG" width="1" height="7" alt="" /></td>
  <td height="7"></td>
  		</tr>
	<tr>
        <td></td>
<td colspan="8" id="banner" style="height: 117; width: 776"><img src="images/banner.gif" width="776" height="115" /> </td>
  <td height="117"></td>
		</tr>
	<tr>
		<td></td>
  <td colspan="8" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
		<td height="12"></td>
		</tr>
	<tr>
		<td></td>
  		<td valign="top" colspan="6"><p style="margin-top: 0">
       <iframe id="middle" src="home.htm" name="middle" scrolling="no" frameborder="no" align="center" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none" marginwidth="0" marginheight="0"></iframe> <br />
      </p>
		</td>
  		<td width="17">&nbsp;</td>
  		<td valign="top" width="181">
  		  <table width="165" border="0" cellpadding="0" cellspacing="1" style="margin-bottom: 0">
            <tr>
              <td height="25" background="images/header_login.PNG"><p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp; <span class="style5"> Cadet Login</span></p></td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF"><p align="center" style="margin-top: 0">
                  <iframe id="login" marginwidth="0" marginheight="0" src="user/login.php" name="login" scrolling="No" frameborder="no" align="center" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
                 
              </p></td>
            </tr>
          </table>
  		  <table border="0" width="165" cellspacing="1" cellpadding="0">
            <tr>
              <td height="25" background="images/sub_header.gif"><p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp;&nbsp; <span class="style5">Time and Date</span></p></td>
            </tr>
            <tr>
              <td bgcolor="#F3F4F6"><p style="margin-top: 0; margin-bottom: 0">
                  <script>

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<b>&nbsp;&nbsp;"+hours+":"+minutes+":"+seconds+" "+dn
+"<br />&nbsp;&nbsp;"+dayarray[day]+", "+montharray[month]+" "+daym+" </b>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

          </script>
                  <span id="clock"></span></p></td>
            </tr>
          </table>
  		  <p align="center" style="margin-top: 0">&nbsp;<br />
              <img src="images/itv.png" alt="" width="155" height="100" /></p>
	  <p align="center">Click to watch the report on Consett that includes us! </p></td>
        <td height="364"></td>
		</tr>
		<tr>
			<td></td>
		<td valign="top" colspan="8" id="navbar" style="height: 7; width: 776">
		<img border="0" src="images/navigation/spacer.PNG" width="1" height="7"></td>
			<td height="7"></td>
		</tr>
		<tr>
		<td valign="top" width="8">&nbsp;</td>
		<td valign="top" colspan="8">
		<!-- MSCellType="empty" -->
		&nbsp;</td>
			<td height="12" width="8"></td>
		</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td width="800" height="8" valign="top"><img src="images/main_bottom.PNG" width="800" height="8" /></td>
  </tr>
</table>
</body>
</html>

or code it freshly (i'll give layout image).

Many Thanks
Luke

Meti · 10-09-2008, 01:25 PM

It'd be better if you removed the javascript codes, so we could see the actual code.

Luke · 10-09-2008, 02:34 PM

HTML Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}
body {
	background-image: url(images/bg.PNG);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#main {
background:url(images/main_bg.PNG);
width:800px;
border:0px;
margin-left: auto;
margin-right: auto;
}
#main_top {
background:url(images/main_top.PNG);
width: 800px;
height: 12px;
vertical-align:top;
}
#logo {
width: 214px;
height: 81px;
vertical-align:top;
}
.main_title {
font-size: 20px;
	color: #313E5B;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	width: 282px;
	height: 24px;
	vertical-align:top;
}
#spacer {
width: 776px;
height: 12px;
background-color:#FFFFFF;
vertical-align:top;
}
#navbar {
background: url(images/navigation/spacer.PNG);
height: 7px;
width: 776px;
vertical-align: top;
}
#banner {
width: 776px;
height: 115px;
vertical-align:top;
}
.style5 {	color: #FFFFFF;
	font-weight: bold;
}
.style3 {
	color: #767A98;
	font-size: 10px;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
a.top:link {
	color: #767A98;
}
a.top:visited {
	color: #767A98;
}
a.top:hover {
	color: #767A98;
}
a.top:active {
	color: #767A98;
}
-->
</style>
</head>

<body onLoad="goforit()">
<br />
<table id="main" width="800" border="0" cellpadding="0" cellspacing="0" height="649"><!--DWLayoutTable-->
<tr>
<td colspan="10" id="main_top" style="height: 12px; width: 800"> </td>
	</tr>
	<tr>
<td rowspan="4" valign="top">&nbsp; </td>
<td rowspan="4" valign="top" id="logo" style="height: 81; width: 214px"><img src="images/logo.PNG" width="214" height="81" alt="" /></td>
<td height="17" colspan="7" valign="top">
<p align="right">&nbsp;<span class="style3">   <a href="user/news.php" target="middle" class="top">Â» NEWS</a> <a href="user/links.php" target="middle" class="top">Â» LINKS</a> <a href="user/downloads.php" target="middle" class="top">Â» DOWNLOADS</a> Â» CONTACT INFORMATION</span></td>
<td rowspan="4" valign="top">&nbsp; </td>
		</tr>
		<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
<td>&nbsp;</td>
<td height="26">&nbsp;</td>
<td rowspan="2">&nbsp; </td>
<td rowspan="2">&nbsp; </td>
		</tr>
		<tr>
<td></td>
<td width="137"></td>
			<td valign="top" width="145"><i>&quot;Your taxiway to takeoff&quot;</i></td>
<td></td>
<td height="14"></td>
		</tr>
		<tr>
  <td width="12">&nbsp;</td>
<td valign="top" class="main_title" style="height: 24; width: 282px" colspan="2">1409 (CONSETT) SQUADRON</td>
		<td valign="top" width="48">BETA</td>
  <td width="30">&nbsp;</td>
  <td>&nbsp;</td>
  <td height="24">&nbsp;</td>
	</tr>
	<tr>
  <td valign="top"></td>
<td id="spacer" colspan="8" style="height: 12; width: 776"> </td>
<td valign="top" height="12"></td>
	</tr>
	<tr>
  <td></td>
<td colspan="8" valign="top"><a href="home.htm" target="middle"><img src="images/navigation/home.PNG" width="84" height="25" border="0" onmouseover="this.src='images/navigation/home_1.PNG'" onmouseout="this.src='images/navigation/home.PNG'" alt="" /></a><img src="images/navigation/about.PNG" width="93" height="25" onmouseover="this.src='images/navigation/about_1.PNG'" onmouseout="this.src='images/navigation/about.PNG'" alt="" /><img src="images/navigation/cadet.PNG" width="98" height="25" onmouseover="this.src='images/navigation/cadet_1.PNG'" onmouseout="this.src='images/navigation/cadet.PNG'" alt="" /><a href="user/members.php" target="middle"><img src="images/navigation/members.PNG" width="92" height="25" border="0" onmouseover="this.src='images/navigation/members_1.PNG'" onmouseout="this.src='images/navigation/members.PNG'" alt="" /></a><img src="images/navigation/atc.PNG" width="146" height="25" onmouseover="this.src='images/navigation/atc_1.PNG'" onmouseout="this.src='images/navigation/atc.PNG'" alt="" /><img src="images/navigation/activities.PNG" width="84" height="25" onmouseover="this.src='images/navigation/activities_1.PNG'" onmouseout="this.src='images/navigation/activities.PNG'" alt="" /><img src="images/navigation/events.PNG" width="84" height="25" onmouseover="this.src='images/navigation/events_1.PNG'" onmouseout="this.src='images/navigation/events.PNG'" alt="" /><img src="images/navigation/pav.PNG" width="95" height="25" onmouseover="this.src='images/navigation/pav_1.PNG'" onmouseout="this.src='images/navigation/pav.PNG'" alt="" /></td>
  <td height="25"></td>
  	</tr>
	<tr>
  <td></td>
<td colspan="8" valign="top" id="navbar" style="height: 7; width: 776"><img src="images/navigation/spacer.PNG" width="1" height="7" alt="" /></td>
  <td height="7"></td>
  		</tr>
	<tr>
        <td></td>
<td colspan="8" id="banner" style="height: 117; width: 776"><img src="images/banner.gif" width="776" height="115" /> </td>
  <td height="117"></td>
		</tr>
	<tr>
		<td></td>
  <td colspan="8" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
		<td height="12"></td>
		</tr>
	<tr>
		<td></td>
  		<td valign="top" colspan="6"><p style="margin-top: 0">
       <iframe id="middle" src="home.htm" name="middle" scrolling="no" frameborder="no" align="center" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none" marginwidth="0" marginheight="0"></iframe> <br />
      </p>
		</td>
  		<td width="17">&nbsp;</td>
  		<td valign="top" width="181">
  		  <table width="165" border="0" cellpadding="0" cellspacing="1" style="margin-bottom: 0">
            <tr>
              <td height="25" background="images/header_login.PNG"><p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp; <span class="style5"> Cadet Login</span></p></td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF"><p align="center" style="margin-top: 0">
                  <iframe id="login" marginwidth="0" marginheight="0" src="user/login.php" name="login" scrolling="No" frameborder="no" align="center" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
                 
              </p></td>
            </tr>
          </table>
  		  <table border="0" width="165" cellspacing="1" cellpadding="0">
            <tr>
              <td height="25" background="images/sub_header.gif"><p style="margin-top: 0; margin-bottom: 0">&nbsp;&nbsp;&nbsp; <span class="style5">Time and Date</span></p></td>
            </tr>
            <tr>
              <td bgcolor="#F3F4F6"><p style="margin-top: 0; margin-bottom: 0">
                  <span id="clock"></span></p></td>
            </tr>
          </table>
  		  <p align="center" style="margin-top: 0">&nbsp;<br />
              <img src="images/itv.png" alt="" width="155" height="100" /></p>
	  <p align="center">Click to watch the report on Consett that includes us! </p></td>
        <td height="364"></td>
		</tr>
		<tr>
			<td></td>
		<td valign="top" colspan="8" id="navbar" style="height: 7; width: 776">
		<img border="0" src="images/navigation/spacer.PNG" width="1" height="7"></td>
			<td height="7"></td>
		</tr>
		<tr>
		<td valign="top" width="8">&nbsp;</td>
		<td valign="top" colspan="8">
		<!-- MSCellType="empty" -->
		&nbsp;</td>
			<td height="12" width="8"></td>
		</tr>
</table>
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td width="800" height="8" valign="top"><img src="images/main_bottom.PNG" width="800" height="8" /></td>
  </tr>
</table>
</body>
</html>

ok, that's the xhtml and css code.

L?KE · 10-09-2008, 03:09 PM

You'll never get anywhere if you just give up on your original idea.

Excellent2 · 10-09-2008, 03:14 PM

Originally Posted by Meti

It'd be better if you removed the javascript codes, so we could see the actual code.

What? Are you just trying to get your postcount up? You can see the actual code as the Javascript is above it..

Originally Posted by L?KE

You'll never get anywhere if you just give up on your original idea.

Agreed.

Luke · 10-09-2008, 03:16 PM

i'm not giving up my origional idea, it's just everytime i seem to try and code this layout it mucks up, so i've turned for help. I'm not giving up at all, as i've worked hard to create this site, the design is just a small bit.

L?KE · 10-09-2008, 03:37 PM

I meant giving up on the divs...

Luke · 10-09-2008, 03:43 PM

because i'm crap at them, i only partially understasnd them and tihs is the first time i've used them.

L?KE · 10-09-2008, 03:46 PM

Fair enough I guess.

Might be a good idea to learn them though, rather than have to use tables because it is your only means of doing it.

Luke · 10-09-2008, 03:57 PM

yeh, you se i udnerstand tables, especially as you can use a GUI tool to do it for you such as Dreamweaver,a d i understand the structure of the tables in code as wlel.

I haven't a CLUE where to start with divs

Thread: Div/Layout Coding Help

Thread Tools

Div/Layout Coding Help

Posting Permissions