1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS and DIV Issue.

Discussion in 'CSS' started by X.Homer.X, Oct 25, 2007.

  1. #1
    First: Okay, so i have this site, and I am using div boxes for the content. The problem is, the bottom disclaimer box is controlled by the length of the main content box. If the main content box is shorter then the right column, the disclaimer covers up the left content boxes.
    SEMrush
    Is there any way to fix this problem?

    My website is: http://absolutehabbo.freehostia.com[
    A good example of the disclaimer cover up: http://absolutehabbo.freehostia.com/news.php

    my css is as follows

    <style type="text/css">
    <!--
    body {
    	background-attachment: fixed
    	margin-top: 6px;
    }
    #header {
    		background-image: url(images/header.gif);
    		background-repeat: no-repeat;
    		background-position: bottom;
    		width: 781px;
    	height: 158px;
    }
    #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;
    }
    #container {
    		width: 100%;
    		margin-top: 0px;
    		text-align: left;
    	min-height: 200px;
    }
    #rightcontainer {
    		margin-top: -233px;
    		margin-left: 240px;
    }
    #leftcontainer {
    		text-align: left;
    		width: 300px;
    		padding-left: 6px;
    }
    /* 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: 523px;
    		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;
    		padding-left: 3px;
    }
    #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>
    Code (markup):
     
    X.Homer.X, Oct 25, 2007 IP
    SEMrush
  2. tomcairns

    tomcairns Guest

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    to :

    #disclaimer {
    margin-top: 10px;
    padding-left: 3px;
    clear:both;
    }
     
    tomcairns, Oct 25, 2007 IP
  3. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ive tried that, and it didnt work :(

    i dont know what could be wrong.
     
    X.Homer.X, Oct 25, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Tom thought maybe you weren't clearing a float, which often looks like your page. However, you don't have any floats. To tell the truth, you html need a rewrite.

    First, you're starting with <head>, which seems fine if you don't know that every browser wants to see a <!DOCTYPE etc line at the top-- this also determines how Internet Explorer goes into different "modes" and each mode shows your page different anyway.

    Normally, you'd have a content div containing everything under your header. Then a floating left sidebar, then a wrapper for the rest of the content. The footer would be written last and would have the command Tom mentioned, except only clear:left because your float is left.

    Man, if I had time at work today... well, I'm going in early to catch up on my email and doing it unpaid anyway... how about I try to rewrite your site?

    I'm not as good as some of the other members here, and I probably don't explain things as well, but I can garentee that after a re-write, your page will be VAILD, will have a proper DOCTYPE, and the footer will always be below whichever part of your content is lower : )

    If I get it done, I'll post it here. If anyone else here sees an error or something could be better done with it, they can rewrite it further.

    Homer, have you ever written a page before this one?
     
    Stomme poes, Oct 25, 2007 IP
  5. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    lol i followed a tut for most of the css, and the index.php page was givin to mewith the divs in tact. i just built on that, and no i havent sritten a php page before this one. :p I mainly started this project because i really wanted to learn php and css. But your help and speedy reply is GREATLY appreciated :)

    Thanks alot :D
     
    X.Homer.X, Oct 26, 2007 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Almost done but can't do it on work time : ) If I don't get it done today, I hope to have it here or online by tomorrow.
     
    Stomme poes, Oct 26, 2007 IP
  7. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    :D Your amazing
     
    X.Homer.X, Oct 26, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    There are still problems, but here's what I've got (I'm about to leave, and it's not 100% what I want...)

    http://stommepoes.jobva.nl/XHomerX/xhomerx.html

    The css in in the html sheet just hit view source in your browser. I also didn't have time to test in other browsers (always bad).

    Before making 2 or three little changes it validated html4 strict and css too : )

    I hope to get back at this. I may have changed some of your images, see at http://stommepoes.jobva.nl/XHomerX/
     
    Stomme poes, Oct 26, 2007 IP
  9. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #9
    thanks, but its still kinda messed up :S

    actually, more so than before :p

    take a look: http://absolutehabbo.freehostia.com
     
    X.Homer.X, Oct 26, 2007 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Because the CSS was written for the new html too : )

    Your footer is still a "span" and it's not clearing anything because I floated "leftcontent" or leftcontainer or something.
    The page I linked to that I rewrote was new HTML too. However, since I'm not at work I can't test for IE, and I'd also like to see it in smaller screen rez too.

    On my laptop with it's huge-@$$ screen rez, my version of your page on my server looks okay on FireFox, Opera, and Konqueror (thus maybe also Safari). However on my Fake-IE-for_linux, there's an extra-bigger margin on the top of #rightcontent, pushing it down too far, and also there's something with padding or margin bottom on the top of the navigation. Also, when I built the page, I didn't download the little peeps in the menu, so I didn't test to see if there was enough room for them next to the menu list items.

    I'd love to know if real IE6 does this too (probably) and what IE7 does. So, I need to work on it some more. I'd also like to take the time to explain what I did in the HTML and CSS and why blah blah. Unfortunately this is a busy weekend (relatives celebrate turning 50, a friend is coming back from Afghanistan Sunday, another friend is getting his first cat...)

    Becuase the reason I rewrote it is so you know what's good, not good, and not mattering when you write a page (because who knows, you may start writing more pages : )
     
    Stomme poes, Oct 26, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Okay, here's the why's of the HTML (still don't have access to a WinIE7 machine so I haven't adjusted the CSS for Winblows, but the HTML would stay the same in any case:

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    <html>
    	<head>
    	<title>AbsoluteHabbo Under Construction</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="description" content="">
            <meta name="generator" content="gEdit">
    	<!--<link href='/includes/styles/style.css' rel='stylesheet' type='text/css' />-->
    	<style type="text/css">
    
    Code (markup):
    Here's what needs to be at the top of your document. There's a Doctype for HTML4.0 Strict, and an opening html tag (you have a closing </html> tag, but no opener).
    Charset (types of letters displayed) is set to an international version (utf-8) but if you want only English you can have charset=iso-8859-1 ). You need to save the document in whatever type you choose for the meta tags. Also, all the tag names should be lower case. No META= stuff. I commented out your stylesheet so mine could be used, but it's better to have the external link sheet like you had it. I only have mine together so it's easier to see.

    
    </style>
    	</head>
    
    <body>
      <div id="site_container">
      <div id="header">
      <h1>Welcome to AbsoluteHabbo!<span></span></h1>           
      </div>
    
    Code (markup):
    Actually, the site_container is not needed. I'm only using it to center for IE5 and I could probably do that with the body anyway. The header has your h1 (a title) and the image over it. The image is in the spans and hides the text. You only want google bots and people without images to see the text, so you want it there.

    Yeah, I'm going to take out that site_container since I've got a width on the header set and the header is centered anyway.

    <div id="wrapper">             
      <div id="leftcontainer">
      <div id="navigation">
      	<h2> &raquo; Navigation </h2>
    	  <ul>
    	    <li class="home"><a href="index.php">Home</a></li>
    	    <li class="radio"><a href="radio_main.php">Radio Main</a></li>
    	    <li class="forum"><a href="forum">Forum</a></li>
     	    <li class="staff"><a href="staff.php">Staff</a></li>
    	    <li class="disclaimer"><a href="disclaimer.php">Disclaimer</a>
    	    <li class="forum"><a href="news.php">News</a></li>
    	    <li class="staff"><a href="contact.php">Contact us</a></li>
    	    <li class="about_us"><a href="about.php">About Us!</a></li>
    	    <li class="goodies"><a href="goodies.php">Goodies</a></li>
    	  </ul>
      </div><!--navigation-->
    
      <div id="rp_box">
    	<h2> &raquo; Radio Player </h2>
    	<p><a href="http://absolutehabbo.freehostia.com/radio_popup.php">Tune in here!</a></p>
      </div>
    
      <div id="main_box">
    	<h2> &raquo; Login </h2>
    	<p>You are not logged in!</p>
    	<p><a href="login.php">Log in here</a></p> 
      </div>
      </div><!--leftcontainer-->
    
    Code (markup):
    The wrapper is used to contain everything below the header, setting a width and centering it below the header. The left_contianer is floated left, and inside are three boxes: navigation (with a proper list inside as you really have a List of links), radio box, and a login.

    
    <div id="right_container">
    	<h2>&raquo; Welcome!</h2>
    	<h3>Welcome to AbsoluteHabbo!</h3>
    	<span>Bringing you EVERYTHING Habbo. Now!</span>
    	<p>Guess what??!!! Opening day is soon  ;)  Friday October 26th to be exact! We hope to see you there! There will be Many competitions, Parties and GIVEAWAYS! Credits, Furniture, Rares And possibly a whole YEAR of HC. Check it out! Check back then!:) </p>
    	<p> &mdash; AbsoluteHabbo Management</p>  
    	<img src="/includes//styles/images/content_image.gif" width="160" height="100" alt="peeps">
      </div><!--rightcontainer-->
    
    Code (markup):
    Here's the rest of the page. Notice for everything that's a header for each box, I've used an h2. For the tagline in the main right container, I've made that an h3 although that doesn't have to be.

    
    <!-- Please do not remove ANY copyright disclaimers on the disclaimer page or on this page -->
       <div id="footer">
    	<p> Habbo®, Habbo Hotel®, Sulake and associated logos are trademarks of Sulake Group. All rights reserved. Copyright © AbsoluteHabbo 2007-2008</p>
      </div>
      </div><!--wrapper-->
      </div><!--site_container-->
    </body>
    </html>
    
    Code (markup):
    Here, I close the footer (with <p> tags around the disclaimer so I could style the text easier), the wrapper, body and html. Yeah and also the site_container but that really should be taken out (and I will).

    Why didn't I use spans? Because if I had a list I used the unordered list element (ul) with listers inside (li), I used p for paragraphs, and the h# for headers. There are a lot of different tags out there to use, and a span should generally be for something like
    <p>Here's a paragraph styled in the CSS, but <span>here I want the text bold or somehow different from the rest of the paragraph</span> so then I would use the span tag.</p>
    Then in the CSS you've got
    p {
    normal font in white colour for example;
    }
    p span {
    bold font and whatever other colour you want;
    }
     
    Stomme poes, Oct 28, 2007 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Aaand I think I know why IE makes the page look crappy while MOS looks good-- I'm setting a width on the Rightcontainer which I have to, and IE maybe is adding extra space or something so that it thinks there's not enough room to sit next to the float (thus pushing it down). I dunno if actually making rightcontainer smaller but keeping the set width will work in IE. I cannot NOT set a width with the way you've got borders and top-bottom images.
     
    Stomme poes, Oct 28, 2007 IP
  13. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    so is that code all good? :p the site im working on was supposed to have opened friday, butt, the owner (who doesnt know the first thing about web design) screwed it up. and instead of fixing it back up, i figured i could wait till u did your magic :)

    Thanks again :D
     
    X.Homer.X, Oct 29, 2007 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Well, it is... BUT.

    The HTML is absolutely good. There are some things in the css that you will have to change.

    First, I copied your images and set them on my server. So, you can see there are two copies of almost every image in the CSS.
    
    #navigation, #rp_box, #main_box {
      margin-top: 5px;
      margin-bottom: 5px;
      padding-bottom: 7px;
      width: 219px;
      /*background: url(/includes/styles/images/left_box_bot.gif) bottom no-repeat;*/
      background: url(left_box_bot.gif) bottom no-repeat;
    }
    
    Code (markup):
    Delete the one I'm using and remove the comments on the ones you will be using (and check that the paths to the images are correct... I may have mistyped some).

    Second, I did not copy your little navigation peeps. They may be bigger than the space I alloted for them. You can change the space I've given them in the css under ul li (and I have a comment there saying that the code makes some room for the peeps).

    Third and worst, while everything looks good in all browsers, your font is very very very small. Depending on if people have stuff like ClearType set On in ther computers, they may not be able to read your page. I did the same thing you did and copied your font size, except I made it in em's mostly so people can resize the text in Internet Exploder.

    BUT this totally breaks the layout. This is because I stuck the background images for the headers behind the headers and the bottom roundies on the boxes themselves (so I cannot also have the top image on the boxes too as most browsers do not let you have more than one background image at a time).


    Because of this last point, I offer you this:

    You can copy what I have as it is now from my server. The HTML you shouldn't have to change except to add more content as needed (always use a <p> for new paragraphs, not <br /> ). But the text size is a problem and I can try to re-write it (I'll make a new file) so that it's safer for larger fonts. What I would rather do is make the header-backgrounds (the background like behind Navigation, Radio Player, etc) BIGGER and also the default text size bigger. If mostly kids are going to be looking at this site, then the bigger fonts will mean they probably won't enlarge the font on their machines anyway. But if older people or anyone without the bestest eyesite will be visitors, then I also have to change my css to make the text pop out of place gracefully.

    However, you may have had a special reason to use microscopic font : )

    So, copy now and have something to show the boss now, but tell me do you want me to only re-arrange the images and keep the font size too tiny to read, or do you want me to re-arrange the images AND make the default font sizes bigger? Either way I plan to fix it so that text can enlarge and still look okay.
     
    Stomme poes, Oct 30, 2007 IP
  15. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #15
    well, cant it just be change in the html? like <font face=ariel size=2></font>

    or can it be changed in the CSS? because i would want the text the same size as it was. if this is possible :p

    ang again


    THANK YOU SO MUCH

    EDIT: hehe i tried to put it on my site. but it kind of crapped up on me :S

    http;//absolutehabbo.freehostia.com/new/

    ^ up there i put http;// instead of http:// cuz it wont let me post live links. xD
     
    X.Homer.X, Oct 30, 2007 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I coded the page very strict. You may not use <font face=ariel size=2></font> type styling anymore (it's been deprecated for a long time, but unfortunately you still see it).

    Currently it IS the size you had it before, with the only exception that instead of saying font size is 9px, I said .6em. Em is a measurement based on a browser's default font (so they're not all exactly the same, but pretty close). Unlike px, ems can be resized in IE.

    I will try to make the page not seperate with fonts enlarged. I can almost guarantee that people will resize the fonts because it's small and while for instance on my Unix machine it's okay (tho not great) on my Winblows machine at work in IE6 the letters are fuzzy. Fuzzy is not good.

    Yes, in css the size can be changed (easily for the paragraph text-- no problem) but if the headers are changed (Navigation, Radio Player, etc) then the text will be too big for the images behind them.

    In any case, just copy the code. Make the changes I said to and if you ar interested in learning some CSS, play with the code. Also, I have the CSS in the html page but of course you will want it in a seperate stylesheet (which I have commented out).

    *Edit oh yeah, you're using the correct html but the wrong CSS : ) The two have to work together with the same names etc. Also, the images are still not pathed right. You need to use the same paths you WERE using before : )

    AAAnnd I see something in the HTML... wherever there's the copyright symbol in the HTML, replace the copyright with &copy; because otherwise it might not show up on all machines (not on mine).
     
    Stomme poes, Oct 30, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I've made those changes in the html file on my server.

    Registered is &reg;
    copyright is &copy;

    Look at your CSS and you will see that it does not match the names of the boxes and elements in the HTML. See, that's how CSS works. In the HTML you have something like <div id="leftcontainer"> and then in the CSS you have #leftcontainer and then the styling for it.

    The # means that it's the name of an id (which can only come once in the html). If it's a class (like I made in your navigation... <li class="home">) then in the css it's li.home or simply .home if nothing else has that class name.

    Also, in the CSS you have, you don't have the "universal selector". It looks like this:
    * {
    margin: 0;
    padding:0;
    }

    Because every browser (firefox, internet exploder, etc) have their own defaults. So if you set padding and margins on something, but not something else, it might look one way in one browser and completely different in another!

    Can you get to a (decent) library? I urge you to get this book: Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. It will teach you alllll the basics and he does it well... you build a website as you go. Everything you learn in that book (or almost everything, I skipped the blog parts) you can use on your own sites too.
     
    Stomme poes, Oct 30, 2007 IP
  18. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #18
    ill just buy that book xD thanks anyway, and i did have that margin: 0; and padding: 0;, i just dont know where they went *scratches head*

    also, i copied the HTML right from your site. so i dont know what could be wrong :S

    ill try looking.

    EDIT: i looked through the CSS< im using the right divs. all the divs i use are in the CSS. :S i dunno what could be wrong.
     
    X.Homer.X, Oct 30, 2007 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Nah, the two don't match. If I go the the "new" page you have, the html says this: <link href='includes/styles/style.css' rel='stylesheet' type='text/css' />

    (which by the way,with html4 there can't be the little slash at the end... that's for xhtml).

    If I look at that stylesheet I see this:
    
    <style type="text/css">
    <!--
    body {
        background-attachment: fixed
        margin-top: 6px;
    }
    #header {
            background-image: url(images/header.gif);
            background-repeat: no-repeat;
            background-position: bottom;
            width: 781px;
    	height: 158px;
    }
    #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;
    }
    #container {
            width: 100%;
            margin-top: 0px;
            text-align: left;
    	min-height: 200px;
    }
    #rightcontainer {
            margin-top: -223px;
            margin-left: 240px;
    }
    #leftcontainer {
            text-align: left;
            width: 300px;
            padding-left: 6px;
    }
    /* 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: 523px;
            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;
            padding-left: 3px;
    }
    #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>
    
    Code (markup):
    In CSS, stuff that's commented out uses the /*

    /*this is commented out*/
    This is not commented out.

    In HTML, the <!-- --> is used.
    <!--this is commented out-->

    So first you have to take those out of your css : )

    Second, see the #middle and #bottom and #boxDIVs and #disclaimer stuff? That's NOT in my html. But it was in yours.

    Since you're testing out a new page (mine), you should keep new where it's at (seperate from the habbo page you have now), but ALSO give the new css a new name. That way, you can look at and play with the new code (mine) while not touching your old code.

    I think you're saving them with the same name or something. Call it style2.css or stylenew.css so they don't interact with your old pages.
     
    Stomme poes, Oct 30, 2007 IP
  20. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #20
    yeah, but, add the "includes/styles/style.css" to the new, and thats where the CSS is, anyway, i changed it to style-new.css now. it loads that css but it is still really messed up. I dont know why :S i took it directly from your html file. i didnt change anything.
     
    X.Homer.X, Oct 30, 2007 IP