-
Layout problem :p
OK so my site is www.aceodea.com
and if theres more than one line in the navigation, the content box on the right moves down, as you can see. any help to make it fixed? here is index.php.
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Free Habbo CSS Layout by Invent! -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aceodea.com - Your friendly Habbo Fansite</title>
<style type="text/css">
<!--
body {
background-position: top;
background-image: url(images/backgroundtreees.png);
background-repeat:repeat-x;
background-color: #548d00;
margin-top: 6px;
}
#top {
background-image: url(images/top.gif);
background-repeat: no-repeat;
background-position: bottom;
width: 781px;
max-height: 7px;
min-height: 7px;
}
#middle {
background-image: url(images/middle.gif);
background-repeat: repeat-y;
width: 781px;
}
#bottom {
background-image: url(images/bottom.gif);
background-position: top;
background-repeat: no-repeat;
width: 781px;
height: 7px;
}
#banner {
background-image: url(images/bannor.gif);
width: 764px;
height: 126px;
}
#container {
width: 100%;
margin-top: 15px;
text-align: left;
}
#leftcontainer {
text-align: left;
width: 300px;
padding-left: 10px;
}
#rightcontainer {
margin-top: -110px;
margin-left: 248px;
}
/* Box DIVS */
#top_box {
background-image: url(images/left_box_top.gif);
background-repeat: no-repeat;
width: 221px;
height: 22px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
padding-top: 6px;
padding-left: 10px;
}
#box_mid {
background-image: url(images/left_box_mid.gif);
background-repeat: repeat-y;
width: 221px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 6px;
padding-right: 6px;
}
#box_bot {
background-image: url(images/left_box_bot.gif);
background-repeat: no-repeat;
width: 221px;
height: 10px;
}
/* End of boxes */
/* //////////// */
/* Content box DIVS */
#content_top {
background-image: url(images/content_box_top.gif);
background-repeat: no-repeat;
width: 523px;
height: 22px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
padding-top: 6px;
padding-left: 8px;
}
#content_mid {
background-image: url(images/content_box_mid.gif);
background-repeat: repeat-y;
width: 510px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: left;
padding-left: 6px;
}
#content_bot {
background-image: url(images/content_box_bot.gif);
background-repeat: no-repeat;
width: 522px;
height: 10px;
}
/* End of content box divs */
/* ////////////////////// */
/* Disclaimer box */
#disclaimer {
margin-top: 10px;
}
#disc_top {
background-image: url(images/disc_top.gif);
background-position: bottom;
background-repeat: no-repeat;
width: 762px;
height: 11px;
}
#disc_mid {
background-image: url(images/disc_mid.gif);
width: 762px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#disc_bot {
background-image: url(images/disc_bot.gif);
background-position: top;
background-repeat: no-repeat;
width: 762px;
height: 11px;
}
/* Font styles */
#title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
color: #003366;
font-weight: bold;
}
#subtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: italic;
color: #003366;
}
span {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
span a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-style: normal;
text-decoration: none;
}
span a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
span a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-style: normal;
text-decoration: none;
}
#disclaimer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
#disclaimer a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-style: normal;
text-decoration: none;
}
#disclaimer a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
#disclaimer a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-style: normal;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="sitecontainer" align="center">
<div id="top"></div>
<div id="middle">
<!-- Banner -->
<div id="banner"></div>
<!-- End of banner -->
<!-- Page container -->
<div id="container">
<!-- ///////////////////// -->
<!-- Content box -->
<div id="leftcontainer">
<!-- Navigation box -->
<div id="navigation">
<!-- Top of navigation box (title) -->
<div id="top_box"> » Navigation </div>
<!-- End of top -->
<!-- Navigation box -->
<div id="box_mid">
<a href="index.php?page=home">Home</a><br />
<a href="index.php?page=habbouk">Habbo UK</a><br />
<a href="index.php?page=habbouk">Habbo UK</a><br />
<a href="index.php?page=habbouk">Habbo UK</a><br />
<a href="index.php?page=habbouk">Habbo UK</a><br />
<a href="index.php?page=habbouk">Habbo UK</a><br />
</div>
<!-- End of navigation box -->
<!-- Bottom of box -->
<div id="box_bot"></div>
<!-- End of bottom of box -->
</div>
<!-- End of navigation box -->
<div id="spacer" style="padding-top: 10px;"></div>
<!-- Radio player box -->
<div id="rp_box">
<!-- Top of radio player box (title) -->
<div id="top_box"> » Radio Player </div>
<!-- End of top -->
<!-- Radio player box -->
<div id="box_mid">lolcopters</div>
<!-- End of radio player box -->
<!-- Bottom of box -->
<div id="box_bot"></div>
<!-- End of bottom of box -->
</div>
<!-- End of radio player box -->
</div>
<div id="rightcontainer">
<div id="content_top">
» Content
</div>
<div style="padding-right: 6px;" id="content_mid">
<?php
if($_GET['page']) {
$page = $_GET['page'];
$page = str_replace(".", "", $page);
$page = "".$page.".php";
if(file_exists($page)) {
include("$page");
} else {
include("404.php");
}
}
else {
include("home.php");
}
?>
</div>
<div id="content_bot"></div>
</div>
<!-- End of content box-->
</div>
<!-- End of page container -->
<!-- Please do not remove ANY copyright disclaimers on the disclaimer page or on this page -->
<div id="disclaimer">
<div id="disc_top"></div>
<div id="disc_mid">
<? include("disclaimer.php"); ?>
</div>
<div id="disc_bot"></div>
</div>
</div>
<div id="bottom"></div>
</div>
</body>
</html>
<!-- Free Habbo CSS Layout by Invent! -->
-
lol same layout as im using and i have exactly the same problem lol
-
lol ace if i find out ill let you know
-
mm why don't people just code using tables =]
