Why?

~~Jackboy~~ · 01-02-2009, 03:49 PM

I'm pretty sure it's occuring because you're referring to Mozilla Firefox as Mozilla.

Gangster · 01-02-2009, 03:52 PM

Originally Posted by kk.

just a tip for the future, use containers.

main container - all of it
header -everything in the header, normally nav up
main - pretty explanatory, all the main content
columns - left (add float left) right (add float right) and center (add float left i think)
footer - footer content (add clear -both)

I thought it has something to do with containers. How do you use containers?
Like what's the height/width.

kk. · 01-02-2009, 03:58 PM

widht of main is the width of the layout, as with footer, main container and header, and the columns is the width of the column. height should be used for footer and header whereas columns need to be flexible as well as the main container that holds em

Gangster · 01-02-2009, 04:18 PM

Originally Posted by kk.

widht of main is the width of the layout, as with footer, main container and header, and the columns is the width of the column. height should be used for footer and header whereas columns need to be flexible as well as the main container that holds em

So what's the css?

#main_container {
width: 123px;
}

Then in the HTML i do this.

<div id="main_container">

<div =" All the divs in the layout "></div>

</div>

kk. · 01-02-2009, 04:23 PM

yeh, but obviously the width isnt 123 lol. er, thats to contain all of it yeh, if you want it centred, add margin-left:0, margin right:0, or something like that.

Gangster · 01-02-2009, 04:40 PM

Originally Posted by kk.

yeh, but obviously the width isnt 123 lol. er, thats to contain all of it yeh, if you want it centred, add margin-left:0, margin right:0, or something like that.

You said the main content is the width of the whole layout, and it just the width of the main content?

Oh you didn't, you said main container, MB.

Gangster · 01-02-2009, 04:54 PM

Hmmm... I did all the containers, and when i type in the main content all of the divs that were placed after that go down with it, but the footer stays.

Here's my code.

HTML 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>
<title>MYHABBO // Its all YOURS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background:url(images/bg.PNG);
}

#main_container {
width: 998px;
margin-left: 0px;
margin-right: 0px;
}

#header_container {
width: 998px;
height: 31px;
margin-left: 0px;
margin-right: 0px;
}

#left_container {
width: 253px;
}

#content_container {
width: 509px;
margin-left: 0px;
margin-right: 0px;
}

#right_container {
width: 254px;
}

#footer_container {
width: 1007px;
height: 31px;
margin-left: 0px;
margin-right: 0px;
}

#top1 {
  background:url(images/top1.PNG);
  height:21px;
width:880px;
margin-left:-10px;
margin-top:-10px;
padding-left: 120px;
padding-right: 9px;
padding-top: 7px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
}

#banner {
  background:url(images/banner.PNG);
  height:157px;
width:960px;
margin-left:17px;
}

#alert1 {
  background:url(images/advert1.PNG);
  height:140px;
width:387px;
margin-left:95px;
margin-top: 20px;
}

#alert2 {
  background:url(images/advert2.PNG);
  height:140px;
width:387px;
margin-left:525px;
margin-top: -140px;
}

#djsays {
  background:url(images/dj_says.PNG);
height: 21px;
width: 897px;
font-family: Tahoma;
font-size: 11px;
color: #FFFFFF;
margin-left: -8px;
margin-top: 13px;
padding-top: 10px;
padding-left: 90px;
padding-right: 20px;
}

#nav1 {
background:url(images/nav1.PNG);
width: 253px;
height: 36px;
margin-left: -10px;
}

#nav2 {
background:url(images/nav2.PNG);
width: 203px;
margin-left: -10px;
padding-left: 20px;
padding-right: 30px;
padding-top: 3px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#nav3 {
background:url(images/nav3.PNG);
width: 253px;
height: 7px;
margin-left: -10px;
}

#sep1 {
background:url(images/sep.PNG);
width: 253px;
height: 12px;
margin-left: -10px;
}

#pc1 {
background:url(images/pc1.PNG);
width: 253px;
height: 32px;
margin-left: -10px;
}

#pc2 {
background:url(images/pc2.PNG);
width: 198px;
margin-left: -10px;
padding-left: 25px;
padding-right: 30px;
padding-top: 3px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#pc3 {
background:url(images/pc3.PNG);
width: 253px;
height: 7px;
margin-left: -10px;
}

#sep2 {
background:url(images/sep.PNG);
width: 253px;
height: 12px;
margin-left: -10px;
}

#rsp1 {
background:url(images/rsp1.PNG);
width: 253px;
height: 32px;
margin-left: -10px;
}

#rsp2 {
background:url(images/pc2.PNG);
width: 198px;
margin-left: -10px;
padding-left: 25px;
padding-right: 30px;
padding-top: 3px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#rsp3 {
background:url(images/rsp3.PNG);
width: 253px;
height: 20px;
margin-left: -10px;
}

#cont1 {
background:url(images/content1.PNG);
width: 485px;
height: 30px;
margin-top: -480px;
margin-left: 235px;
padding-left: 25px;
padding-top: 29px;
font-family: Arial;
font-size: 13px;
color: #FFFFFF;
font-weight: bold;
}

#cont2 {
background:url(images/content2.PNG);
width: 466px;
margin-left: 238px;
padding-left: 20px;
padding-top: 3px;
padding-right: 21px;
font-family: Verdana;
font-size: 9px;
color: #6c6a4d;
}

#cont3 {
background:url(images/content3.PNG);
width: 507px;
height: 27px;
margin-left: 238px;
}

#disc1 {
background:url(images/disc1.PNG);
width: 477px;
height: 55px;
margin-left: 238px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #6c6a4d;
}

#line {
background:url(images/line.PNG);
width: 254px;
height: 4px;
margin-left: 745px;
margin-top: -562px;
}

#nau1 {
background:url(images/nau1.PNG);
width: 223px;
height: 32px;
margin-left: 763px;
margin-top: 10px;
}

#nau2 {
background:url(images/nua2.PNG);
width: 203px;
margin-left: 763px;
padding-top: 3px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#nau3 {
background:url(images/nau3.PNG);
width: 221px;
height: 7px;
margin-left: 764px;
}

#dotw1 {
background:url(images/dotw1.PNG);
width: 223px;
height: 32px;
margin-left: 763px;
margin-top: 10px;
}

#dotw2 {
background:url(images/nua2.PNG);
width: 203px;
margin-left: 763px;
padding-top: 3px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#dotw3 {
background:url(images/nau3.PNG);
width: 221px;
height: 7px;
margin-left: 764px;
}

#bored1 {
background:url(images/bored1.PNG);
width: 223px;
height: 32px;
margin-left: 763px;
margin-top: 10px;
}

#bored2 {
background:url(images/nua2.PNG);
width: 203px;
margin-left: 763px;
padding-top: 3px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
font-family: Verdana;
font-size: 10px;
color: #292929;
}

#bored3 {
background:url(images/nau3.PNG);
width: 221px;
height: 7px;
margin-left: 764px;
}

#bottom {
background:url(images/bottom.PNG);
width: 999px;
height: 24px;
margin-left: -10px;
margin-top: 250px;
padding-left: 10px;
padding-top: 7px;
font-family: Verdana;
font-size: 9px;
font-weight: bold;
color: #53a2d5;
}
-->
</style>
</head>
<body>

<div id="main_container">

  <div id="top1"><blink>Hello, and welcome to the brand new Habbo UK fansite, MYHABBO!</blink></div>
<a href"#.html"><div id="banner"></div></a>
<div id="alert1"></div>
<div id="alert2"></div>



<div id="header_container">
<div id="djsays">
<marquee><b>Whatever the DJ Says will 
go here! I typed this to make 
the marquee longer so it doesn't 
look bare, so your wasting your
time TBH.</b></div></marquee>
</div>



</div id="left_container">
<div id="nav1"></div>
<div id="nav2"><center>

<img src="images/nav buttons/my_habbo1.PNG" />
<img src="images/nav buttons/job_apps1.PNG" />
<img src="images/nav buttons/radio1.PNG" />
<img src="images/nav buttons/commu1.PNG" />
<img src="images/nav buttons/news1.PNG" />
<img src="images/nav buttons/guide1.PNG" />
<img src="images/nav buttons/goodies1.PNG" />
<img src="images/nav buttons/forum1.PNG" />

</div>



<div id="nav3"></div>
<div id="sep1"></div>
<div id="pc1"></div>
<div id="pc2"><center>All of our latest <b>Polls and Competitions</b> will go here.</center></div>
<div id="pc3"></div>
<div id="sep2"></div>
<div id="rsp1"></div>
<div id="rsp2"><center>The <b>Radio player</b> will go here.<br><br>

And the <b>stats</b> will go below.</center><br><br>

<b>DJ Says ::</b> Anything Here<br>
<b>Song ::</b> Gangster - Habbox Forum
<b>Listeners ::</b> 98/150
</div>
<div id="rsp3"></div>
</div>




<div id="content_container"
<div id="cont1">Welcome to MYHABBO</div>



<div id="cont2">

<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Nunc tellus. Aenean et nisi. 
Donec quis eros sit amet lorem rhoncus tincidunt. Praesent laoreet orci vel dolor. 
In justo. Morbi nec massa. Donec enim. In hac habitasse platea dictumst. Mauris dolor 
risus, blandit eget, lobortis ut, auctor in, risus. Proin quam nulla, lacinia eu,
 bibendum eget, elementum eget, turpis. Ut viverra metus eu nisi.<br><br>

Nunc sed nisl. Vivamus purus pede, viverra a, mattis non, tempus a, orci. 
Mauris tincidunt magna ac dolor. Mauris dictum, lectus vitae sodales viverra, 
massa metus pretium est, id elementum arcu ipsum sit amet dui. Aenean 
vitae sapien. Quisque eget nunc eget ante vehicula dapibus. Cras fringilla 
nibh tincidunt sem. Maecenas a dolor. Vestibulum ante ipsum primis in faucibus 
orci luctus et ultrices posuere cubilia Curae; Duis nisi massa, feugiat 
sed, condimentum a, faucibus vel, augue. Praesent laoreet tincidunt purus. 
Integer ligula pede, congue eu, tristique et, molestie sit amet, eros. *** 
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
 mus. Sed urna. Pellentesque habitant morbi tristique senectus et netus et
 malesuada fames ac turpis egestas. Nam sed lorem eget velit ultricies porttitor. 
Ut ut lectus quis tortor blandit lobortis. Phasellus a purus ac purus fermentum 
tincidunt. Quisque id est id purus iaculis suscipit. Donec molestie libero vel massa.<br><br>

Pellentesque quam ipsum, eleifend eget, adipiscing eu, porta non, urna. Integer 
sed neque. Mauris imperdiet tincidunt lorem. Nunc lorem. Suspendisse aliquet, 
enim ac malesuada porta, metus elit pretium purus, ullamcorper sollicitudin enim nisl
 eget ligula. Suspendisse sit amet diam at lacus interdum tempor. In rhoncus lectus
 at libero. Maecenas vestibulum, quam eu vehicula semper, enim dui varius lorem, a 
congue dui arcu sit amet quam. Donec in massa. Sed libero nulla, scelerisque bibendum,
 ullamcorper ac, condimentum ac, justo. Vestibulum et turpis. Suspendisse potenti.
 Duis felis ante, hendrerit vitae, dapibus sit amet, venenatis non, sapien.<br><br>

Maecenas eu diam vehicula urna rutrum imperdiet. Pellentesque habitant morbi tristique
 senectus et netus et malesuada fames ac turpis egestas. Ut lacus. Praesent et mi.
 Phasellus ac massa. Aliquam at urna tincidunt arcu congue congue. Curabitur viverra, 
turpis non vehicula egestas, enim tellus molestie mauris, in egestas mauris elit at nibh.
 Duis elementum ante at mauris. Vivamus sit amet neque quis nibh varius euismod. Ut tortor
 ligula, consequat a, malesuada sit amet, vestibulum ut, lacus. Cras quis risus.
 Nulla aliquam ante et turpis. Nunc tincidunt. Sed consequat arcu ut leo. Proin vitae massa.
<br><br><br><br>
</div>

<div id="cont3"></div>

<div id="disc1"><center><b>Habbo, Habbo Hotel, Sulake</b> and associated logos are trademarks of 
Sulake Group. All rights reserved. Copyright, trademarks and other rights in the 
material from Habbo Hotel and other services of Sulake Group on this website are owned
 by Sulake Group. All rights reserved.</center></div>
</div>



<div id="right_container">
<div id="line"></div>

<div id="nau1"></div>

<div id="nau2">
All the <b>Lastest news</b> will go here.<br><br>


<u>More News >></u>

<br><br>

______________________________

<br><br>

All the <b>Latest Updates</b> will go here. <br><br>

<u>More Updates >></u>
</div>

<div id="nau3"></div>

<div id="dotw1"></div>
<div id="dotw2"><center>The <b>DJ of the Week</b> will go here.</center></div>
<div id="dotw3"></div>

<div id="bored1"></div>
<div id="bored2"><center>Something to entertain 
you will go here soo.. your not <b>bored.</b> A game maybe?</center></div>
<div id="bored3"></div>
</div>




<div id="bottom"><center>A bunch of links will go here, maybe links to fansites and FAQ's, Our Group and all that.</center></div>

</div>
</div>
</body>
</html>

kk. · 01-02-2009, 05:05 PM

you need a container to keep everything in, which is the width of the layout, so if you want the whole thing to go across, as in the header is 100%, add width, 100%. then you need a container to keep the columns in after the header container. should be like:

<container>
<header>
headercontent
</header>
<main container>
<leftcolumn>
all other divs
</leftcolumn>
<centrecolumn>
all other divs
</centrecolumn>
<rightcolumn>
all other divs
</rightcolumn>
</main container>
<footer>
content>
</footer>

sorry about the confusion

Gangster · 01-02-2009, 05:20 PM

Originally Posted by kk.

you need a container to keep everything in, which is the width of the layout, so if you want the whole thing to go across, as in the header is 100%, add width, 100%. then you need a container to keep the columns in after the header container. should be like:

<container>
<header>
headercontent
</header>
<main container>
<leftcolumn>
all other divs
</leftcolumn>
<centrecolumn>
all other divs
</centrecolumn>
<rightcolumn>
all other divs
</rightcolumn>
</main container>
<footer>
content>
</footer>

sorry about the confusion

:S I'm confused, you got msn?

If you do PM me it.

Gangster · 01-02-2009, 06:45 PM

Does anyone else know about containers?

Im giving away 1 T Sofa to whoever helps me.

Thread: Why?

Thread Tools

Posting Permissions