-
Need help ++REPx2
Well basically i was coding the layout for HabboFury, everything was fine, until i done the footer, the middle and right side totally messed up, so would someone be able to fix it for me?
Here's the code
HTML Code:
<html>
<head>
<title>HabboFury ;; We CAN light up your day...!</title>
<style type="text/css">
body {
background: url(images/background1.PNG);
}
#HabboFury {
background: url(images/nav/HabboFury1.PNG);
height:26px;
width:189px;
}
#HabboFury:hover
{
background: url(images/nav/HabboFury2.PNG);
height:26px;
width:189px;
}
#Fansite {
background: url(images/nav/Fansite1.PNG);
height:26px;
width:189px;
}
#Fansite:hover
{
background: url(images/nav/Fansite2.PNG);
height:26px;
width:189px;
}
#Jobs {
background: url(images/nav/Jobs1.PNG);
height:26px;
width:189px;
}
#Jobs:hover
{
background: url(images/nav/Jobs2.PNG);
height:26px;
width:189px;
}
#Radio {
background: url(images/nav/Radio1.PNG);
height:26px;
width:189px;
}
#Radio:hover
{
background: url(images/nav/Radio2.PNG);
height:26px;
width:189px;
}
#Guides {
background: url(images/nav/Guides1.PNG);
height:26px;
width:189px;
}
#Guides:hover
{
background: url(images/nav/Guides2.PNG);
height:26px;
width:189px;
}
#Safety {
background: url(images/nav/Safety1.PNG);
height:26px;
width:189px;
}
#Safety:hover
{
background: url(images/nav/Safety2.PNG);
height:26px;
width:189px;
}
#Forum {
background: url(images/nav/Forum1.PNG);
height:24px;
width:189px;
}
#Forum:hover
{
background: url(images/nav/Forum2.PNG);
height:24px;
width:189px;
}
#top1 {
background: url(images/top1.PNG);
width: 890px;
height: 23px;
margin-top: -9px;
margin-left: 5px;
padding-top: 8px;
padding-left:100px;
padding-right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
#top2 {
background: url(images/top2.PNG);
width: 890px;
height: 26px;
margin-top: 0px;
margin-left: 5px;
padding-top: 4px;
padding-left:100px;
padding-right: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
#un3 {
background: url(images/un3.PNG);
margin-left:23px;
height: 25px;
width: 52px;
}
#banner {
background: url(images/banner.PNG);
width: 893px;
height: 137px;
margin-left: 75px;
margin-top: -25px;
}
#dj1 {
background: url(images/dj.PNG);
width: 888px;
padding-right: 20px;
padding-left: 75px;
padding-top: 5px;
padding-botton: 5px;
height: 19px;
margin-left: 14px;
margin-top: 15px;
font-family: Verdana;
font-size: 11px;
color: #FFFFFF;
}
#dj2 {
background: url(images/dj2.PNG);
margin-left:14px;
height: 6px;
width: 983px;
}
#box1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 14px;
}
#box2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 14px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#box3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 14px;
}
#bet1 {
background: url(images/bet.PNG);
width: 229px;
height: 14px;
margin-left: 14px;
}
#Radio1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 14px;
}
#Radio2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 14px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#Radio3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 14px;
}
#bet2 {
background: url(images/bet.PNG);
width: 229px;
height: 14px;
margin-left: 14px;
}
#jobapp1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 14px;
}
#jobapp2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 14px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#jobapp3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 14px;
}
#left1 {
background: url(images/left1.PNG);
width: 228px;
height: 8px;
margin-left: 15px;
}
#cont1 {
background: url(images/content1.PNG);
width: 506px;
padding-left: 20px;
height: 24px;
padding-top:7px;
margin-top: 243px;
font-family: tahoma;
font-size: 16px;
color: #FFFFFF;
font-weight:bold;
}
#cont2 {
background: url(images/content2.PNG);
width: 506px;
padding-left: 20px;
height: 22px;
padding-top:7px;
margin-left: 243px;
font-family: Verdana;
font-size: 13px;
color: #FFFFFF;
}
#contmid {
background: url(images/contmid.PNG);
width: 507px;
padding-left: 10px;
padding-right: 10px;
padding-top:5px;
margin-left: 242px;
font-family: Verdana;
font-size: 11px;
color: #000000;
}
#content3 {
background: url(images/content3.PNG);
width: 525px;
height: 6px;
margin-left: 244px;
}
#news1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 768px;
}
#news2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 768px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#news3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 768px;
}
#bet3 {
background: url(images/bet.PNG);
width: 229px;
height: 14px;
margin-left: 768px;
}
#group1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 768px;
}
#group2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 768px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#group3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 768px;
}
#bet4 {
background: url(images/bet.PNG);
width: 229px;
height: 14px;
margin-left: 768px;
}
#poll1 {
background: url(images/box1.PNG);
width: 204px;
padding-left: 25px;
height: 24px;
padding-top: 10px;
font-family: Verdana;
font-size: 10px;
color: #FFFFFF;
font-weight:bold;
margin-left: 768px;
}
#poll2 {
background: url(images/box2.PNG);
width: 189px;
margin-left: 768px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 10px;
color: #000000;
}
#poll3 {
background: url(images/box3.PNG);
width: 229px;
height: 12px;
margin-left: 768px;
}
#right1 {
background: url(images/left1.PNG);
width: 228px;
height: 8px;
margin-left: 768px;
}
</style>
</head>
<body>
<div id="top1">Hey there, welcome to the <b>BRAND NEW</b> HabboFury.com, Sign into our brand new UserSystem Now! :D. </div>
<div id="top2"><marquee>Join in the fun, listen to our new funky radio with our crazyyyy DJ'S!</marquee></div>
<div id="un3"></div>
<div id="banner"></div>
<div id="dj1"><center><blink>Search <b>LegendOfNoob</b> on Habbo USA for a crankin party, <b>SOMEONE TURN UP THE MUSIC, WOOT!</b></blink></center></div>
<div id="dj2"></div>
<div id="box1">Navigator</div>
<div id="box2"> <div id="HabboFury"></div> <div id="Fansite"></div> <div id="Jobs"></div> <div id="Radio"></div> <div id="Guides"></div> <div id="Safety"></div> <div id="Forum"></div> </div>
<div id="box3"></div>
<div id="bet1"></div>
<div id="jobapp1">Radio</div>
<div id="jobapp2">DJ <b>::</b> LegendOfNoob<br>
Song <b>::</b> Yahh Trick - Soulja Boy<br>
Listeners <b>::</b> 78/100</div>
<div id="jobapp3"></div>
<div id="bet2"></div>
<div id="JobApp1">Link Us ... !</div>
<div id="JobApp2">Fancy representing us on your fansite? Then all you need to do is save the image below and upload it to your fansite or... Follow the steps under the Link Us section. If our population increases because of you advertising us, then we will not only put your image onto our fansite, we'll also do a Fansite Review based on your fansite!</div>
<div id="JobApp3"></div>
<div id="left1"></div>
<div id="cont1">Link Us</div>
<div id="cont2">Fancy having our Link Us button on your website?</div>
<div id="contmid">...</div>
<div id="content3"></div>
<div id="news1">Latest News</div>
<div id="news2">Latest news.. Powered by CuteNews (i think :S)</div>
<div id="news3"></div>
<div id="bet3"></div>
<div id="group1">Group</div>
<div id="group2">Group info, how to join and what ever over here.</div>
<div id="group3"></div>
<div id="bet4"></div>
<div id="poll1">Group</div>
<div id="poll2">Group info, how to join and what ever over here.</div>
<div id="poll3"></div>
<div id="right1"></div>
</body>
</html>
So like, i want the cont1 in line with the Navigator. and then the news 1 inline with the cont1 and the nav.
++REPx2
-
And oh yea, you can beta test HabboFury
-
v. soz for the triple post but...
I've managed to fix it, i made the boxes that are far down -???px. For some reason, when i do margin-top:???ox; it doesn't go ???px from the top of the screen, it goes ???px from the last div placed. So say i placed my banner
24px, it would go 24px from the top of the screen as thats the first div, and say next i did the content box, and made it 30px; it goes 30px under the last div that was placed, when i want it to go 7px; from the place where the last div was placed if you know what i mean...
Someone people said i need to use float tags, have no idea how to do this, so if someone could do this for me, then just pm me or post in this thread, ++repx2
yep, just did <br> in the mid content, and all the boxes on the side went down :(
