PDA

View Full Version : 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:

<!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(navigat or.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+FFextr aHeight;
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
<!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
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..


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 xD
Calon
10-09-2008, 07:38 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 xD
<, D, I, V, getting the drift?

Edited by Hayd93 (Forum Super Moderator): Please do not be rude.
L?KE
10-09-2008, 08:14 PM
<, D, I, V, getting the drift?

That wasn't really helpful or constructive.

http://www.habboxforum.com/showthread.php?t=453923
http://www.habboxforum.com/showthread.php?t=515762

http://www.csstutorial.net/css_tutorial_part2.php
http://css.maxdesign.com.au/floatutorial/

:)
Luke
11-09-2008, 02:56 PM
<, D, I, V, getting the drift?

wow, you're hard. :rolleyes: get a life you stuck up idiot.


That wasn't really helpful or constructive.

http://www.habboxforum.com/showthread.php?t=453923
http://www.habboxforum.com/showthread.php?t=515762

http://www.csstutorial.net/css_tutorial_part2.php
http://css.maxdesign.com.au/floatutorial/

:)

Thanks for those, top one realy, doesn't help (it does in some element but y'know, since i'm coding a pretty advanced layout lol)
second improves and i should get something out :P

haven't see toher two currently of posting this, but i'm sure they'll help.

Thanks for helping and +rep

Want to hide these adverts? Register an account for free!