Need help +rep

Gangster · 30-05-2008, 07:51 PM

Well, you know how divs are programmed to behave where the "margin-top" is from the bottom of the div placed before. Is there a way to make it so its not like that?

Because i just did my last box on the left, now im doing my mid content, and
i had to set it to -xxxpx. And now when the box on the left goes down, the middle content goes down aswell.

Can someone help me?

++rep.

kk. · 30-05-2008, 08:12 PM

erm, im well confused what you mean? do you have an example.

Add float: left to the one you want on the left and float: right to the one on the right (this is in the div attributes)

Gangster · 30-05-2008, 08:35 PM

Originally Posted by kk.

erm, im well confused what you mean? do you have an example.

Add float: left to the one you want on the left and float: right to the one on the right (this is in the div attributes)

well you know how margin-top isn't programme to go from the top of the screen, it's programmed to go from the bottom of the last div placed. So basically, i just did my lest box at the left side. now im doing the middle/main content. So i have to have it set to -???px, because 0px will go under the last box on the left. And now the main content is set -??? px from the last box on the left. so say the box on the left expanded by 7px. the main content will go down by 7px. Is there a way to make it so it's not like that?

kk. · 30-05-2008, 08:45 PM

ok right. what you want to do is have the following divs:
Container (contains everything in it, has a fixed width to the size that you want it)
top (for whatevers at the top be it nav, banner etc)
main container (everything from the top div down exluding footer
footer (footer div, shoudl contain the attribute 'clear: both')

now you have them you can build your site. Im just guessing you have three columns so you need three mroe divs:
left - should be a width and have the attribute 'float: left'
centre - shoudl contain a width and 'float: left'
right - should contain width and 'float: left'

Then put the left side boxes in the left div with the same width (each box can have their own div container) content in centre etc.

i dont think ive made that clear enough lol

Gangster · 30-05-2008, 08:47 PM

Originally Posted by kk.

ok right. what you want to do is have the following divs:
Container (contains everything in it, has a fixed width to the size that you want it)
top (for whatevers at the top be it nav, banner etc)
main container (everything from the top div down exluding footer
footer (footer div, shoudl contain the attribute 'clear: both')

now you have them you can build your site. Im just guessing you have three columns so you need three mroe divs:
left - should be a width and have the attribute 'float: left'
centre - shoudl contain a width and 'float: left'
right - should contain width and 'float: left'

Then put the left side boxes in the left div with the same width (each box can have their own div container) content in centre etc.

i dont think ive made that clear enough lol

I'm kinda confused.

Here's my code if this helps

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;
}

#cont1 {
background: url(images/content1.PNG);
width: 506px;
padding-left: 20px;
height: 24px;
padding-top:7px;
font-family: tahoma;
font-size: 16px;
color: #FFFFFF;
font-weight:bold;
margin-left: 243px;
margin-top: -6px;
}

#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;
}

#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;
margin-top: -78px;
}

#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;
}






#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;
margin-top: -444px;

}

#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;
}




</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="cont1">Page title here ... !</div>
<div id="cont2">Short page desc. here.</div>
<div id="contmid">...</div>
<div id="content3"></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">A paragraph or 2 based on the box title...</div>
<div id="JobApp3"></div>


<div id="left1"></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="pollp1">Weekly Poll</div>
<div id="poll2">Why not take part in this weeks poll?</div>
<div id="poll3"></div>






</body>

</html>

kk. · 30-05-2008, 08:49 PM

well it woudl be better to provide an example of whats happening or a live preview because its hard to just read a code and know whats what if you dont know what belongs to what

Thread: Need help +rep

Thread Tools

Need help +rep

Posting Permissions