...

View Full Version : layout problem



georgey
09-30-2007, 06:20 PM
So its a habbohotel fansite. the problem is when i type more links into the navigation, the content area on the right goes down,. how could i make it stay at the top? here is the index.php


<!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=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"> &raquo; 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=habboween">Habboween 2007</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"> &raquo; 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">
&raquo; 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>

abduraooft
09-30-2007, 07:02 PM
Just try after adding a style float:left to your #leftcontainer

georgey
09-30-2007, 08:11 PM
edit: thanks ive done it :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum