iDenning
07-11-2008, 09:10 PM
Hello,
Got a slight problem, coded this layout etc etc, but i need to shorted the width to make room for content boxes on either sides, top/bottom content image = no problem, side = BIG PROBLEM, i know the problem but dont know how to solve it, the table width is making it expand that way --> and i want it this way <-- A diagram is below of whats happened, the red is my problem.
Thanks to anyone that help, +REP.
Coding:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>JoinHabbo » Version one!</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="files/ajax.js"></script>
<link href="form.css" rel="stylesheet" type="text/css">
<link href="news-1.0.css" rel="stylesheet" type="text/css">
<!--[if gte IE 5]><link rel="stylesheet" href="news-1.0-ie.css" type="text/css" /><![endif]-->
<link rel="stylesheet" href="emx_nav_right.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="pages/home.html">Home</a> | <a href="pages/staff.html">Meet the team</a> | <a href="pages/about.html">About us
</a> | <a href="pages/alterations.html">Alterations</a> | <a href="pages/linkus.html">Link us</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="news/habbo.html">Habbo uk</a> | <a href="news/real.html">Real life news</a> | <a href="news/sport.html">Sport
</a> | <a href="news/latest.html">Latest news</a>
</div>
<div id="subglobal5" class="subglobalNav">
<a href="/polls/">Polls</a> | <a href="pages/donators.html">Donators list</a> | <a href="pages/competitions.html">Competitions
</a> | <a href="pages/group.html">Group</a> | <a href="pages/fansites.html">Fansite links</a> | <a href="pages/lottery.html">lottery
</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="goodies/">Status signatures</a> | <a href="/imager">Habbo imager</a> | <a href="goodies/views.html">Hotel views
</a> | <a href="/goodies/downloads.html">Random downloads</a> | <a href="/goodies/backgrounds.html">Backgrounds</a> | <a href="/goodies/news.html">News viewers
</a> | <a href="/text">Habbo font generator</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="/forum">Visit</a> | <a href="/forum/register.php">Register</a>
</div>
</div>
<p><br>
</div>
</p>
<p> <!-- end masthead -->
<!--end pagecell1--></p>
<p align="center"></p>
<div align="right">
<table width="582" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="582"><div align="center"><a href="index.html"><img src="img/dockimg/home.gif" alt="Home" width="40" height="29" border="0"></a> <a href="news.html"><img src="img/dockimg/news.gif" alt="News" width="30" height="29" border="0"></a> <a href="radio.html"><img src="img/dockimg/radio.gif" alt="Radio" width="39" height="32" border="0"></a> <a href="goodies.html"><img src="img/dockimg/goodies.gif" alt="Goodies" width="36" height="31" border="0"></a> <a href="events.html"><img src="img/dockimg/events2.gif" alt="Events" width="36" height="31" border="0"></a> <a href="/forum"><img src="img/dockimg/forum.gif" alt="Forum" width="29" height="28" border="0"></a><br>
</div>
</P></td>
</tr><br>
<td width="582"><img src="tl_curve_white.png" width="582" height="24"></td>
</tr>
<tr>
<td width="582" background="sides.PNG"><table width="538" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="10"> </td>
<td width="517">
<center>
<p align="left"><font face="Verdana" size="1"> <br>
<br>
twst
</font></p>
</center>
<p align="center">
<center>
</center>
<font size="1" face="Verdana"><strong><br>
</strong></font>
<center></center></td>
<td width="11"> </td></tr></tbody></table></td></tr>
<tr>
<td width="582"><img style="width: 666px; height: 9px" height="9" alt="" width="582" src="bottom.png"></td>
</tr><td width="582"></tbody>
</table>
</div></td>
</tr></tbody></table>
</body>
</html>
http://www.joinhabbo.co.uk/mySite/prob.PNG
Got a slight problem, coded this layout etc etc, but i need to shorted the width to make room for content boxes on either sides, top/bottom content image = no problem, side = BIG PROBLEM, i know the problem but dont know how to solve it, the table width is making it expand that way --> and i want it this way <-- A diagram is below of whats happened, the red is my problem.
Thanks to anyone that help, +REP.
Coding:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>JoinHabbo » Version one!</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="files/ajax.js"></script>
<link href="form.css" rel="stylesheet" type="text/css">
<link href="news-1.0.css" rel="stylesheet" type="text/css">
<!--[if gte IE 5]><link rel="stylesheet" href="news-1.0-ie.css" type="text/css" /><![endif]-->
<link rel="stylesheet" href="emx_nav_right.css" type="text/css">
<script type="text/javascript">
<!--
var time = 3000;
var numofitems = 7;
//menu constructor
function menu(allitems,thisitem,startstate){
callname= "gl"+thisitem;
divname="subglobal"+thisitem;
this.numberofmenuitems = 7;
this.caller = document.getElementById(callname);
this.thediv = document.getElementById(divname);
this.thediv.style.visibility = startstate;
}
//menu methods
function ehandler(event,theobj){
for (var i=1; i<= theobj.numberofmenuitems; i++){
var shutdiv =eval( "menuitem"+i+".thediv");
shutdiv.style.visibility="hidden";
}
theobj.thediv.style.visibility="visible";
}
function closesubnav(event){
if ((event.clientY <48)||(event.clientY > 107)){
for (var i=1; i<= numofitems; i++){
var shutdiv =eval('menuitem'+i+'.thediv');
shutdiv.style.visibility='hidden';
}
}
}
// -->
</script>
</head>
<body onmousemove="closesubnav(event);">
<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>
<!-- end globalNav -->
<div id="subglobal1" class="subglobalNav">
<a href="pages/home.html">Home</a> | <a href="pages/staff.html">Meet the team</a> | <a href="pages/about.html">About us
</a> | <a href="pages/alterations.html">Alterations</a> | <a href="pages/linkus.html">Link us</a>
</div>
<div id="subglobal2" class="subglobalNav">
<a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2 link</a> | <a href="#">subglobal2
link</a> | <a href="#">subglobal2 link</a>
</div>
<div id="subglobal3" class="subglobalNav">
<a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3 link</a> | <a href="#">subglobal3
link</a> | <a href="#">subglobal3 link</a>
</div>
<div id="subglobal4" class="subglobalNav">
<a href="news/habbo.html">Habbo uk</a> | <a href="news/real.html">Real life news</a> | <a href="news/sport.html">Sport
</a> | <a href="news/latest.html">Latest news</a>
</div>
<div id="subglobal5" class="subglobalNav">
<a href="/polls/">Polls</a> | <a href="pages/donators.html">Donators list</a> | <a href="pages/competitions.html">Competitions
</a> | <a href="pages/group.html">Group</a> | <a href="pages/fansites.html">Fansite links</a> | <a href="pages/lottery.html">lottery
</a>
</div>
<div id="subglobal6" class="subglobalNav">
<a href="goodies/">Status signatures</a> | <a href="/imager">Habbo imager</a> | <a href="goodies/views.html">Hotel views
</a> | <a href="/goodies/downloads.html">Random downloads</a> | <a href="/goodies/backgrounds.html">Backgrounds</a> | <a href="/goodies/news.html">News viewers
</a> | <a href="/text">Habbo font generator</a>
</div>
<div id="subglobal7" class="subglobalNav">
<a href="/forum">Visit</a> | <a href="/forum/register.php">Register</a>
</div>
</div>
<p><br>
</div>
</p>
<p> <!-- end masthead -->
<!--end pagecell1--></p>
<p align="center"></p>
<div align="right">
<table width="582" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="582"><div align="center"><a href="index.html"><img src="img/dockimg/home.gif" alt="Home" width="40" height="29" border="0"></a> <a href="news.html"><img src="img/dockimg/news.gif" alt="News" width="30" height="29" border="0"></a> <a href="radio.html"><img src="img/dockimg/radio.gif" alt="Radio" width="39" height="32" border="0"></a> <a href="goodies.html"><img src="img/dockimg/goodies.gif" alt="Goodies" width="36" height="31" border="0"></a> <a href="events.html"><img src="img/dockimg/events2.gif" alt="Events" width="36" height="31" border="0"></a> <a href="/forum"><img src="img/dockimg/forum.gif" alt="Forum" width="29" height="28" border="0"></a><br>
</div>
</P></td>
</tr><br>
<td width="582"><img src="tl_curve_white.png" width="582" height="24"></td>
</tr>
<tr>
<td width="582" background="sides.PNG"><table width="538" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="10"> </td>
<td width="517">
<center>
<p align="left"><font face="Verdana" size="1"> <br>
<br>
twst
</font></p>
</center>
<p align="center">
<center>
</center>
<font size="1" face="Verdana"><strong><br>
</strong></font>
<center></center></td>
<td width="11"> </td></tr></tbody></table></td></tr>
<tr>
<td width="582"><img style="width: 666px; height: 9px" height="9" alt="" width="582" src="bottom.png"></td>
</tr><td width="582"></tbody>
</table>
</div></td>
</tr></tbody></table>
</body>
</html>
http://www.joinhabbo.co.uk/mySite/prob.PNG