Thread: Scalabilty

Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9

    Smile Scalabilty


    Hello,

    To ensure my website is accessable by all i need it to expand, so that the design can compensate for users that increase the font size, or if the content spans more than just the screen (i.e. requiring the user to scroll down).

    However i cant get my head around divs and 100% heights. I.ve set placements and holders so that the min height should be 100%

    But alas it doesnt work.

    There are no errors in the coding, so i can only assume ive entered in some wrong values or my containers are in the wrong place, or missing some.

    aranock-online[dot]com/gameg/aranock/
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,105
    Rep Power
    4306
    Welcome to DevShed Forums, Danny.

    Why do you have two <head> elements on that page? That's not valid.

    I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

    Since you mention height, check these out:
    Height and Min-Height
    Internet Explorer and the Expanding Box Problem
    Min-Height for IE5-6/Win
    The overflow declaration

    Comments on this post

    • sephers181 agrees
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    Originally Posted by Kravvitz
    Why do you have two <head> elements on that page? That's not valid.

    I can only find one set of opening and closing tags. Maybe your reefering to my css tags? some of them are called Header, Left_header and so on.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,105
    Rep Power
    4306
    Nope. I meant what I said. Perhaps you don't understand how PHP includes work.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Aranock-Online.com - Free mmorpg based on Astonia V2</title>
    <meta name="copyright" content="2002-2008 Aranock online" />
    <meta name="keywords" content="V2, Astonia, MMORPG, Free mmorpg, Online game, aranock, thule, mercadia, astonia v2, free, game, online" />
    <meta name="description" content="Free online Graphical game (MMORPG) based on mercenaries of Astonia, or Astonia v2 as it was also known, fight with and against a range of monsters, wizards and warriors over a variety of different battle fields and plains." />
    <meta name="robots" content="index, follow" />
    <meta name="revisit-after" content="7 days" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="container2">
    
        <div id="header">
          <div class="logo"></div>
        </div>
        <div id="content">
          <html>
    <head>
    <link href="menu.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    		     <div class="m1"><a href="../index.php"> Home Page </a></div>
    
    			<div class="m2"><a href="../rules.php"> Rules </a></div>
                <div class="m3"><a href="../download.php"> Downloads </a></div>
                <div class="m4"><a href="../screen"> Screenshots </a></div>
      			<div class="m5"><a href="../search.php"> Search</a></div>
    			<div class="m6"><a href="../forum/"> Forum</a></div>
    
                <div class="m7"><a href="../contact.php"> Contact</a></div>
                <div class="m8"><a href="../faq.php"> FaQ's</a></div>
                <br /><hr />
    			<div class="m9"><a href="../start.php"> Starter Guide</a></div>
                <div class="m10"><a href="../rank.php">  Rank Requirements</a></div>
    
                <div class="m11"><a href="../armour.php"> Armour Requirements</a></div>
                <div class="m15"><a href="../weapon.php"> Weapon Requirements</a></div>
                <div class="m12"><a href="../race.php"> Character races</a></div>
                <div class="m13"><a href="../monster.php">  Monsters</a></div>
    			<div class="m14"><a href="../ring.php">  Rings</a></div>
    
                <div class="m16"><a href="../amulet.php">  Amulets</a></div>
               <div class="m17"><a href="../belt.php">  Belts</a></div>
    			<div class="m18"><a href="../potion.php">  Potions</a></div>
                <div class="m19"><a href="../misc.php"> Misc' Equipment</a></div>
                <div class="m20"><a href="../skills.php">  Skills</a></div>
    
                <div class="m21"><a href="../spells.php"> Spells</a></div>
                <div class="m22"><a href="../scrolls.php"> Scrolls</a></div>
                <div class="m23"><a href="../quest.php"> Quests</a></div>
    			<div class="m24"><a href="../clans.php">Clan Guide</a></div>
    </body>
    </html>    </div>
    
        <div id="footer"> </div>
        
      </div>
      <div id="container3">
        <div id="header2">
          <div class="logo2"></div>
        </div>
        <div id="content2">
          <div class="title">
    
                <div class="bullet">Welcome </div>
          </div>
    Aranock was left abandoned. The great hero's were gone, Shiva and her invaiding army flooded the city on the eve of a Bad Moon. The night was far worse then any prophecy has fortold, at the first sign of Gargoyles the Guards at the Outpost were unable to even shout for help before their bodys lay desicrated and left in a huge pile of graves. They entered the city in a giant roar, as the Townsfolk fled to the Unknown Eastern Exit of the City. Faced with a vast desert in the middle of the night, they moved on, watching from a distance at the destruction of their city, Aranock has fallen..
    <br /><br />
    The citizens continued their journey through the Desert for many days and nights before reaching an outpost. Discovering a new Land, the Citizens told their stories of the fearfull night.. A powerfull spellcaster invading their city like a plague, taking all that they had at any cost. They discovered the land they'd fled too was the Kingdom of Aran, a vast desert of caverns and mines, the city of Aran lays on the other side of the Forbidden Mountain just south of the Outpost. Months went by while the Aranockians stayed at this outpost, word of mouth traveled across the Kingdom of the defeat of Aranock. The Call for Hero's was given out once more...
    <br /><br />
    Shiva's power grew, as did her allys. Her Golem brigade explored the lower levels of the City for her allegiance and power. She agreed to give the Onyx King whom roamed the Waste Tunnels, Toxicus, Aranock in return for the Key to the Elysium. Toxicus, not knowing what the key was for, handed it over to the dark power of Shiva, Saying it was just random find. Shiva happily leaving Aranock, with her Key to the Elysium back to her Stronghold to begin mapping out where the Mountain of the God's was located. Toxicus and his Onyx Gargoyles rushed up to the daylight which shined over the land of Aranock, blinded by such vast light they retreated to their dark tunnels. Calling for the aid of the Spider King, Arach, their faithfull ally, Instructing them to protect their city inreturn of a share to the waste which flooded the tunnels of the Onyx Kingdom...
    <br /><br />
    <div class="title">
                <div class="bullet">What is Aranock?</div>
      </div>
    
    <br />
    Aranock online is a free online role playing game (RPG) with multiplayer access (MMORPG). Aranock is based off of the now closed game called Astonia. Astonia v2, or mercenaries of astonia was a much loved game and aranock aims to improve on it with all new graphics, quests and game play, although Astonia v2, or mercenaries of astonia is closed, its legacy continues, and we have many origial astonia players, playing aranock as well as many new players, why not join them?
    <br /><br />
    <div class="title">
                <div class="bullet">What was Astonia? </div>
      </div>
    <br />
    Astonia, astonia v2 or mercenaries of astonia as it was also known was an MMORPG game developed in the late 90's (is now closed), it was an emensly popular free online role playing game (MMORPG), with a fan base thats well over 14 years old. Aranock is a clone of astonia v2 with many improvements to carry on its legacy as a great game for everyone to enjoy!
    <br /><br />
    <div class="title">
                <div class="bullet">News and Updates </div>
      </div>
    
      <table>
                <tr>
                <td class="td1">March 8, 2008</td>
                <td>Original armour sprite optional download is now online.</td>
                </tr>
                 <tr class="tr1">
                <td>February 29, 2008</td>
    
                <td>Forbidden cave, Level I has been released.</td>
                </tr>
                 <tr>
                <td>January 12, 2008</td>
                <td>Page tweaking and improvements to the navigation throughout the website.</td>
                </tr>
                 <tr class="tr1">
    
                <td>January 11, 2008</td>
                <td>Design tweaks and various data errors have been corrected.</td>
                </tr>
      </table>
        </div>
        
        <div class="bottomlogo">
          <div id="foot">
          
          <div id="copy"> &copy; 2008 aranock-online.com </div>
    
        </div>
        </div>
          <div id="container4">
        <div id="header4">
          <div class="logo4"></div>
        </div>
        <div id="content4">
          
        </div>
        <div id="footer4"> </div>
    
      </div>
    </div>
    </body>
    </html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    oh lol, yeah was editing my old index page to be the menu and obviously just forgot to remove them. Thanks for that.

    But back to my original topic:


    Ive also tried the height link you provided, but it wasnt very helpful. Ive also tried to follow another tutorial but they all end up the same.. Im clearly doing something wrong but i cant figure out what.

    I think its got something to do with my incorrectly setting the position variable, and ive been playing around with it, but i cant seem to figure it out, all i can manage is to get one side to work, but even then the footer doesnt stay at the bottom of the page.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    Any one able to help? or is this just a lost cause..
  12. #7
  13. meep!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    on the good ship lollypop
    Posts
    244
    Rep Power
    34
    Originally Posted by Danny5uk
    Any one able to help? or is this just a lost cause..
    I'm not entirely sure of what you're trying to accomplish... What exactly do you need to expand? Right now you have a menu and a long column of text? Maybe you could elaborate a bit more?
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    I want the design to span 100% in height and width. So that if the content is small, it stays the to the size of the screen, but if the content is large, it expands. But still keeping the footer at the bottom of the scrolled down page so that there are no gaps at the bottom of the content when you scroll down.
  16. #9
  17. meep!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    on the good ship lollypop
    Posts
    244
    Rep Power
    34
    Originally Posted by Danny5uk
    I want the design to span 100% in height and width. So that if the content is small, it stays the to the size of the screen, but if the content is large, it expands. But still keeping the footer at the bottom of the scrolled down page so that there are no gaps at the bottom of the content when you scroll down.
    I'm sorry, I don't know if I quite follow you. I think some visual aids might help.
    Is it something like the following attachment? I don't quite understand what you're saying, because it already scrolls with the long "column" of text?
    Attached Images
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9

    Talking


    Here:


    However the current design when the content, is large and causes the screen to increase in height, the left and right nav dont expan downwards, they stay as they are, leaving huge gaps at the bottom.


    aranock-online[dot]com/design.bmp

    aranock-online[dot]com is what its supposed to look like. I just want to convert it from tables, to valid css.

    but as you can see from

    aranock-online[dot]com/gameg/aranock its doesnt :P
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    new users cant post images or urls, sorry
  22. #12
  23. meep!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    on the good ship lollypop
    Posts
    244
    Rep Power
    34
    OK, I get what you mean, finally!
    You will need to do something like this (using a background "trick" to make it look like the background stretches). There are other solutions out there, some are better than others, some involve Javascript.

    You could, I think, improve this idea by reorganizing the order of the columns, so the content column appears first in the document order (or provide a "skip to content" link somewhere). You could also turn your menu into a list, eg:
    Code:
    CSS:
    =====
    /* Turning your menu items into lists (definition list with nested unordered lists) */
    #left_menu_items dt {
    display: none;
    }
    
    #left_menu_items dd {
    padding-bottom: 2em;
    }
    
    #left_menu_items li {	
    padding-left: 55px;
    }
    
    #left_menu_items li a {	
    font-family: Verdana, sans-serif;
    font-size: small;
    color: #FFF;
    text-decoration: none; 
    }
    
    /* Make sure you define the other list link states here (visited, hover, focus, active) */
    
    
    
    CODE:
    ======
    <div id="left_menu_items">
    <dl>
    <dt>Site Navigation</dt>
    <dd>
    <ul>
    <li><a href="http://www.aranock-online.com/index.php"> Home Page </a></li>
    <li><a href="http://www.aranock-online.com/rules.php"> Rules </a></li>
    <li><a href="http://www.aranock-online.com/download.php"> Downloads </a></li>
    <li><a href="http://www.aranock-online.com/screen"> Screenshots </a></li>
    <li><a href="http://www.aranock-online.com/search.php"> Search</a></li>
    <li><a href="http://www.aranock-online.com/forum/"> Forum</a></li>
    <li><a href="http://www.aranock-online.com/contact.php"> Contact</a></li>
    <li><a href="http://www.aranock-online.com/faq.php"> FaQ's</a></li>
    <li><a href="http://www.aranock-online.com/donate.php">  Donate</a></li>
    </ul>
    </dd>
    <dt>Game guide</dt>
    <dd>
    <ul>
    <li><a href="http://www.aranock-online.com/start.php"> Starter Guide</a></li>
    <li><a href="http://www.aranock-online.com/rank.php">  Rank Requirements</a></li>
    <li><a href="http://www.aranock-online.com/armour.php"> Armour Requirements</a></li>
    <li><a href="http://www.aranock-online.com/weapon.php"> Weapon Requirements</a></li>
    <li><a href="http://www.aranock-online.com/race.php"> Character races</a></li>
    <li><a href="http://www.aranock-online.com/monster.php">  Monsters</a></li>
    <li><a href="http://www.aranock-online.com/ring.php">  Rings</a></li>
    <li><a href="http://www.aranock-online.com/amulet.php">  Amulets</a></li>
    <li><a href="http://www.aranock-online.com/belt.php">  Belts</a></li>
    <li><a href="http://www.aranock-online.com/potion.php">  Potions</a></li>
    <li><a href="http://www.aranock-online.com/misc.php"> Misc' Equipment</a></li>
    <li><a href="http://www.aranock-online.com/skills.php">  Skills</a></li>
    <li><a href="http://www.aranock-online.com/spells.php"> Spells</a></li>
    <li><a href="http://www.aranock-online.com/scrolls.php"> Scrolls</a></li>
    <li><a href="http://www.aranock-online.com/quest.php"> Quests</a></li>
    <li><a href="http://www.aranock-online.com/clans.php">Clan Guide</a></li>
    </ul>
    </dd>
    </dl>
    </div>
    Hope this helps a bit. Remember to validate your code and fix it before you do anything else. Good luck!
    Last edited by miseria; April 6th, 2008 at 08:47 PM.
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    Thanks for the menu tip, ill try it out, if i added the menu icons rather than the bullets, would it still slow down the content from loading?.

    As for the first website resource you posted, how would i get the footer to stay at the bottom, because on that one, when the content is small the footer snugs up under the content, so there is a huge gap between the footer and the bottom of the screen.
  26. #14
  27. meep!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    on the good ship lollypop
    Posts
    244
    Rep Power
    34
    Technically, adding all the little menu icons would add to the loading time, but they're so small, I don't think under normal circumstances it would be noticeable.

    Mm, could you post the page link/code where you're having problem with the footer?
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2008
    Posts
    44
    Rep Power
    9
    ok im stumped... I just cant get it to work...

    All i want to do is convert www.aranock-online.com into full CSS but i just cant seem to get it to work.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo