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 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Location
    Oregon
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Broken website. Sidebar alignment/table help

    Ok...So I'm just gonna list some things that I need accomplished.
    1. I need the 'affiliates' header image to always be the topper of the right sidebar, without the background being visible from behind. (A temporary work-around was to simply add the height of the topper onto the background image and try to make it very long. That did not work)
    2. I need the sidebars to be independant of the length of the middle space of the table. The sidebars move down the page as the content fills up more space.

    A visual aid: http://xtwilightx.xt.funpic.org/fara...st%20page.html
    The page with minimal text: http://xtwilightx.xt.funpic.org/farawayforestexample/

    See how it works out?

    Code for the longer page:
    Code:
    
    <html>
    <head>
    <title>Faraway Forest</title>
    
    <style type="text/css">
    
    
    body {
    color:#FFFFFF;
    font-family:verdana, arial, helvetica;
    font-size:12pt;
    background-color:#345437;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/background-1.png");
    margin:0px 0 0px 0;
    }
    
    
    td {
    color:#FFFFFFFF;
    font-family:verdana, arial, helvetica;
    font-size:12pt;
    vertical-align:left;
    div-align:"top";
    padding:10px;
    }
    
    
    a:link, a:visited {
    text-decoration:none;
    color:#DEE5AE;
    }
    
    a:active, a:hover {
    text-decoration:none;
    color:#FFFFFF;
    }
    
    img {
    border:0px;
    }
    
    
    
    #header {
    text-align:left;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/banner-bg.png");
    border:0px;
    
    }
    
    #leftmenu {
    width:200px;
    padding:0px 0 0 10;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-3.png");
    height: 100%;
    float:left;
    }
    
    
    #content {
    padding:20px;
    background-color:#6d8c6d;
    border:5px solid #393f39;
    color:#0f100f;
    background-image:url("http://i338.photobucket.com/albums/n418/dragon-samo/contentboxbg-2.png");
    width:800px;
    height:100%;
    }
    
    #rightmenu {
    padding:0px 0 0 0;
    width:211px;
    background-image: url("http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-right-3.png");
    height:100%;
    float:right;
    }
    
    
    
    #footer {
    clear:both;
    padding:1px;
    background:#181818;
    font-size:7pt;
    color:#666666;
    }
    
    
    
    </style>
    
    </head>
    <body>
    <div align="left">
    <table id="layout" cellspacing="0">
    <tr>
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/banner-9.png">
    </td>
    </tr>
    
    <tr>
    <td id="leftmenu"><div align="top"><body background="http://i338.photobucket.com/albums/n418/dragon-samo/sidebar-3.png">
    
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/sitely.png"><br>
    <a href="url">>>Home</a><br>
    <a href="url">>>Updates</a><br>
    <a href="url">>>FAQ</a><br>
    <a href="url">>>Staff</a><br>
    <a href="url">>>Link to Us</a><br>
    <a href="url">>>Affiliate</a><br>
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/interactive.png"><br>
    <a href="url">>>Oekaki</a><br>
    <a href="url">>>Forums</a><br>
    <a href="url">>>Chat</a><br>
    <a href="url">>>Contact Us</a><br>
    <a href="url">>>Our Mascot</a><br>
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/roleplay.png"><br>
    <a href="url">>>R.P. Oekaki</a><br>
    <a href="url">>>Weapon Shop</a><br>
    <a href="url">>>Wardrobe Shop</a><br>
    <a href="url">>>Species Ref.</a><br>
    <a href="url">>>How it works</a><br>
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/fun.png"><br>
    <a href="url">>>Don't Click!</a><br>
    <a href="url">>>Ask Krackle</a><br>
    <a href="url">>>Advice</a><br>
    <a href="url">>>Celeb <br>  ***Photoshop</a><br>
    </p>
    </td>
    
    <td id="content">
    
    <center><h2><font color="cce5cc">The Races of Ironomia</font></h2><br></center><hr><br>
    <sub><i><p>Like any other world born of the fantasies of an artist, Ironomia has its own races of inhabitants. 
    The things that they can do depend on what species they are, so choose your roleplay character carefully. 
    Please remember that your character should start out in the simplest clothing possible, as more extravagant
    clothes are available for sale. It's the fair way to start out the game! More information on the different 
    type of warrior classes can be found <a href="url">here</url>.</sub></i><hr><br><br>
    
    <center><h3><font color="cce5cc">Humans</font></h3><br></center><hr>
    <center><sub>Humans are a new subspecies that seemed to have stemmed from Elves. They are very well rounded characters.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Archer<br>
    Swordsman<br>
    Knight<br>
    Shield-Weilder<br>
    Martial Artist<br>
    Beast Tamer<br>
    Minstrel<br>
    Viking</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Holy Magician<br>
    Fire Dancer<br>
    Siren<br>
    Necromancer<br>
    Summoner<br>
    Elemental Mage<br>
    Beast Master<br>
    Enchanter<br>
    Illusionist</center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Elves</font></h3><br></center><hr>
    <center><sub>Elves are a species that are more inclined to the magical side of things. They are one with nature always.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    
    Archer<br>
    Swordsman<br>
    Shield-Weilder<br>
    Beast Tamer<br>
    Minstrel<br>
    </center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Holy Magician<br>
    Fire Dancer<br>
    Siren<br>
    Necromancer<br>
    Summoner<br>
    Elemental Mage<br>
    Beast Master<br>
    Enchanter<br>
    Illusionist</center><br><br>
    
        </td>
        </tr>
    </table><hr><hr>
    
    
    <center><h3><font color="cce5cc">Twilightes</font></h3><br></center><hr>
    <center><sub>Furry creatures that somewhat resemble chipmunks with rabbit ears. They are quick and nimble.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Swordsman<br>
    Knight<br>
    Shield-Weilder<br>
    Martial Artist<br>
    Beast Tamer<br>
    Minstrel<br>
    </center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Holy Magician<br>
    Summoner<br>
    Elemental Mage<br>
    Beast Master<br>
    Illusionist</center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Werewolves</font></h3><br></center><hr>
    <center><sub>A very proud people. At a glance, they appear human, or appear to be normal wolves, but their beastly in-between forms prove otherwise.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Swordsman<br>
    Knight<br>
    Beast Tamer<br>
    </center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Fire Dancer<br>
    Siren<br>
    Elemental Mage<br>
    Beast Master<br>
    Enchanter<br>
    </center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    <center><h3><font color="cce5cc">Merpeople</font></h3><br></center><hr>
    <center><sub>Beutiful creatures; mermaids and mermen. On land, they gain legs but keep other fish-like qualities</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Swordsman<br>
    Knight<br>
    Beast Tamer <sub>(only sea creatures)</sub><br>
    Minstrel<br>
    </center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Holy Magician<br>
    Siren<br>
    Necromancer<br>
    Summoner<br>
    Elemental Mage <sub>(only Water/Air)</sub><br>
    Beast Master<sub>(only sea creatures)</sub><br>
    Enchanter<br>
    </center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Minotaurs</font></h3><br></center><hr>
    <center><sub>Beastly bull-like creatures that are incredibly strong, but not so bright or graceful</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Knight<br>
    Shield-Weilder<br>
    Viking</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    <br><br><br>None</center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br>
    
    <center><h3><font color="cce5cc">Centaurs</font></h3><br></center><hr>
    <center><sub>Odd creatures that seem to be horses that have a human from the torso up where their heads should be... </center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Archer<br>
    Swordsman<br>
    Knight<br>
    Shield-Weilder<br>
    Beast Tamer<br>
    Viking</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Necromancer<br>
    Elemental Mage<br>
    Beast Master<br>
    Illusionist</center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Femandibles</font></h3><br></center><hr>
    <center><sub>Named so because they are all humanoid insect-people who eat their men after mating. Almost strictly female.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    Warrior<br>
    Gladiator<br>
    Archer(Female Only)<br>
    Swordsman<br>
    Knight<br>
    Martial Artist<br>
    Beast Tamer<br>
    Minstrel<br>
    Viking (Male Only)</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician (female Only)<br>
    Holy Magician (Male Only)<br>
    Fire Dancer (female Only)<br>
    Siren (female Only)<br>
    Necromancer<br>
    Summoner(only insect-like Summonings)<br>
    Beast Master(only Insects)<br>
    Enchanter<br>
    </center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Warbits</font></h3><br></center><hr>
    <center><sub>Large and buff rabbit-creatures who are incredibly intelligent and very smart. Females tend to be homemakers, so there are no female fighters.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    
    Gladiator<br>
    Swordsman<br>
    Knight<br>
    Martial Artist<br>
    Beast Tamer<br>
    Minstrel<br>
    Viking</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Necromancer<br>
    </center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    <center><h3><font color="cce5cc">Manifests</font></h3><br></center><hr>
    <center><sub>The manifestation of souls of children who died prematurely. Always appear in the form of young children.</center></sub><hr><br>
    <h4><font color="cce5cc">Fighter Vocations:</font></h4><br>
    
    <table width="100%" cellpadding="0" cellspacing="10" border="0">
        <tr>
            <td width="50%" valign="top">
                <center><b><u>Melee Vocations</u></b><br>
    <br><br><br>none</center>
            </td>
            <td width="50%" valign="top">
               <center><b><u>Majik Vocations</u></b><br>
    Dark Magician<br>
    Holy Magician<br>
    Fire Dancer<br>
    Siren<br>
    Necromancer(only other Manifests)<br>
    Summoner<br>
    Elemental Mage<br>
    Beast Master<br>
    Enchanter<br>
    Illusionist</center></center>
    
    
            </td>
        </tr>
    </table>
    
    
    <hr /><hr /><br><br>
    
    
    </td>
    </tr></table></table>
    </div>
    
    
    <td id="rightmenu">
    <div align="right"><img src="http://i338.photobucket.com/albums/n418/dragon-samo/right-top-1.png"><center>
    <div align="right"></div>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    <a href="url">Link</a><br>
    
    <img src="http://i338.photobucket.com/albums/n418/dragon-samo/shoutbox.png">
    <!-- BEGIN CBOX - www.cbox.ws - v001 -->
    <div id="cboxdiv" style="text-align: center; line-height: 0">
    <div><iframe frameborder="0" width="150" height="267" src="http://www4.cbox.ws/box/?boxid=3865247&amp;boxtag=fj0k7m&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#020205 1px solid;" id="cboxmain"></iframe></div>
    <div><iframe frameborder="0" width="150" height="133" src="http://www4.cbox.ws/box/?boxid=3865247&amp;boxtag=fj0k7m&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#020205 1px solid;border-top:0px" id="cboxform"></iframe></div>
    </div>
    <!-- END CBOX -->
    
    
    </center>
    </tr>
    
    
    </table>
    
    <div id="footer">
    <center><b>Copyright Notice</b>
    <br>Unless otherwise stated,all images are drawn by Sam M (a.k.a. xTWILIGHTx). <br>
    Do not use any original content from this site without written consent from the owners.<br>
    <sub>Faraway Forest and all things related to it are ©2007-2010 Samuel D. Marcus & Kylie S. DeHart</sub></p>
    <p></center>	
    </p>
    </div>
    
    </div>
    <!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
    </html>
    Last edited by Senshi-San; 02-02-2011 at 12:17 AM. Reason: wrong first link; fixed more of coding


 

Tags for this Thread

Posting Permissions

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