Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: layout problem

  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout problem

    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

    PHP 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=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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Just try after adding a style float:left to your #leftcontainer
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    edit: thanks ive done it
    Last edited by georgey; 09-30-2007 at 08:13 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •