Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Page 1 of 2 12 LastLast
Results 1 to 10 of 12
  1. 17-02-2008, 08:18 PM #1
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default Help with DIVs & CSS

    Hello,

    I'm trying to learn how to code layouts in DIVs and CSS. I first used SS's stickied tutorial to do my first CSS box, which worked well. Now I'm trying to teach myself to do layouts. I'm doing well, but I want to be able to add a javascript to make an iframe expand in the main content box. However, when I add lines <br> or <p>&nbsp;</p> to the content box, it makes white appear above and below the left and right. I have a div for the right and left (ids: #leftbot and #rightbot) that I would like to expand with the middle content box, but I'm not sure how to do this. I might of just done something wrong in the coding or there is something I need to add (that's why I need help!).

    I've got it all in one container, then the left 3 boxes in a left container and content in middle container and right 3 boxes in right container. The CSS looks like this:



    Body code:



    If there is any more information I need to provide to make it clearer or to help, then let me know. I would love if anyone could help me with this and +rep will be given. I know there are probably more glitches in the coding and I can fix them later, but this is my main one
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
  2. 17-02-2008, 08:31 PM #2
    MrCraig's Avatar
    MrCraig
    MrCraig is offline Senior Member
    Join Date
    May 2006
    Posts
    1,797
    Tokens
    0

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    Woah deja vuu :S

    Try adding

    Code:
    background-repeat:repeat-y;
    To the CSS of your rightbot and leftbot
    Coming and going...
    Highers are getting the better of me
    Reply With Quote Reply With Quote
  3. 18-02-2008, 06:11 PM #3
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    Quote Originally Posted by MrCraig View Post
    Woah deja vuu :S

    Try adding

    Code:
    background-repeat:repeat-y;
    To the CSS of your rightbot and leftbot
    Thanks Craig I'm on my way to victory with this now - but you didn't completely sort it Now the bottom is expanding and there aren't any white patches appearing BUT the leftbot and rightbot aren't expanding with it. Wonder if you can help me with this - or anyone for that matter.

    +rep to your Craig, thanks again.
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
  4. 18-02-2008, 07:38 PM #4
    MrCraig's Avatar
    MrCraig
    MrCraig is offline Senior Member
    Join Date
    May 2006
    Posts
    1,797
    Tokens
    0

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    try changing it to..

    Code:
    background-repeat:repeat;
    Coming and going...
    Highers are getting the better of me
    Reply With Quote Reply With Quote
  5. 18-02-2008, 08:47 PM #5
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    Still not making any difference, here is the new code (I have been fiddling a little as I realised the bottom section/footer wasn't appearing (which I have got working now).

    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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
body {
  text-align: center;
  background-color: #ffffff;
  margin-top: 5px;
}
p {
  padding: 0px;
  margin: 0px;
}
#container {
  width: 923px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center
}
#top {
  background: url(top.png);
  height: 199px;
}
#left {
  width: 212px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  position: relative;
}
#navtop {
  background: url(navtop.png);
  height: 22px;
}
#leftmid {
  background: url(leftmid.png);
}
#navbot {
  background: url(navbot.png);
  height: 31px;
}
#radiotop {
  background: url(radiotop.png);
  height: 20px;
}
#radiobot {
  background: url(radiobot.png);
  height: 20px;
}
#grouptop {
  background: url(grouptop.png);
  height: 26px;
}
#groupbot {
  background: url(groupbot.png);
  height: 5px;
}
#leftbot {
  background: url(leftbot.png);
 background-repeat:repeat;
}
#middle {
  width: 510px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  position: relative;
}
#contenttop {
  background: url(contenttop.png);
  height: 4px;
}
#contentmid {
  background: url(contentmid.png);
}
#right {
  width: 201px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: right;
  position: relative;
}
#statstop {
  background: url(statstop.png);
  height: 25px;
}
#rightmid {
  background: url(rightmid.png);
}
#statsbot {
  background: url(statsbot.png);
  height: 37px;
}
#linktop {
  background: url(linktop.png);
  height: 26px;
}
#linkbot {
  background: url(linkbot.png);
  height: 39px;
}
#newstop {
  background: url(newstop.png);
  height: 24px;
}
#newsbot {
  background: url(newsbot.png);
  height: 5px;
}
#rightbot {
  background: url(rightbot.png);
 background-repeat:repeat;
}
.style1 {font-size: 7px}
#footer1 {
  background: url(leftbot2.png);
  height: 26px;
}
#footer2 {
  background: url(contentbot.png);
  height: 26px;
}
#footer3 {
  background: url(rightbot2.png);
  height: 26px;
}
#footer {
  width: 923px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center
}
-->
</style>
</head>

<body>
<br />
<table align="center" width="923">
<tr>
<td>
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div id="top"></div></td>
  </tr>
</table>
<div id="left">
<div id="navtop"></div>
<div id="leftmid">
  <p>Nav here</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>yes</p>
  <p>it's all expandable</p>
  <p>:D </p>
  <p>&nbsp;</p>
</div>
<div id="navbot"></div>
<div id="radiotop"></div>
<div id="leftmid">
  <p>Radio text</p>
  <p>yeah baby </p>
  <p>whatever</p>
  <p>u</p>
  <p>want</p>
  <p>here</p>
  <p>lolz</p>
  <p>&nbsp;</p>
</div>
<div id="radiobot"></div>
<div id="grouptop"></div>
<div id="leftmid">
  <p>harhar</p>
  <p>mm</p>
  <p>sexily expanding</p>
  <p>woohoo </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="groupbot"></div>
<div id="leftbot">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
</div>
<div id="middle">
<div id="contenttop"></div>
<div id="contentmid">
  <p>hi</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>
<div id="right">
<div id="statstop"></div>
<div id="rightmid">
  <p>radio stats</p>
  <p>here</p>
  <p>yeah</p>
  <p>ok?</p>
  <p>&nbsp;</p>
  <p>song and stuff</p>
  <p>yeah</p>
  <p>ok cool</p>
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
</div>
<div id="statsbot"></div>
<div id="linktop"></div>
<div id="rightmid">
  <p>link us</p>
  <p>can</p>
  <p>go</p>
  <p>here</p>
</div>
<div id="linkbot"></div>
<div id="newstop"></div>
<div id="rightmid">
  <p>news here</p>
  <p>title then date</p>
  <p>or</p>
  <p>however you</p>
  <p>want it</p>
  <p>so yeah</p>
  <p>news - the layout now expands </p>
  <p>lol</p>
  <p>&nbsp;</p>
  <p>pretty..</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>.. big </p>
</div>
<div id="newsbot"></div>
<div id="rightbot">
  <p>&nbsp;</p>
  <p class="style1">&nbsp;</p>
  <p class="style1">&nbsp;</p>
</div>
</div>
</div>
<table width="923" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr><td height="26"><img src="leftbot2.png" width="212" height="26" /><img src="contentbot.png" /><img src="rightbot2.png" width="201" height="26" /></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
    This is uploaded at: http://youngmusicscene.co.uk/habboplex/

    It looks fine at that example but if I added another line in the content box, it would make white gaps appear BELOW the left and right sections. Nothing is appearing above the left and right sections (what you fixed) so they are staying in place. But, the footer gets pushed down as it should, so luckily there shouldn't be any future problems as the layout is working properly apart from this. Thank you for your help so far, and when we find the final solution I will give more +rep as thanks
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
  6. 18-02-2008, 08:56 PM #6
    MrCraig's Avatar
    MrCraig
    MrCraig is offline Senior Member
    Join Date
    May 2006
    Posts
    1,797
    Tokens
    0

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    :S i dont see anything wrong with it..
    Coming and going...
    Highers are getting the better of me
    Reply With Quote Reply With Quote
  7. 18-02-2008, 09:03 PM #7
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    I think it is very probably to do with the left, middle and right DIVs, possibly the:

    Code:
      float: left;
  position: relative;
    bit. Which is exactly the same for the middle div and the only difference with the right one is that it floats right... But I think having two floating left isn't right maybe? But I don't know what to do about that :S and it's very possible that I'm missing or have done the code wrong for one of those DIVs.

    Thanks again for the help so far;

    IF ANYONE ELSE COULD TRY AND HELP TOO THAT'D BE GREAT!
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
  8. 18-02-2008, 10:02 PM #8
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    Sorry for double post, can no longer edit:

    Maybe this can help? http://validator.w3.org/check?uri=ht...Inline&group=0

    Don't know how to fix those errors.. pretty simple advice I need IT SEEMS.

    Also new code (I changed the main theme of coding a bit):



    Edit: (added spoiler) &:

    Ignore that now, even newer code (with classes):

    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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<style type="text/css">
<!--
body {
  text-align: center;
  background-color: #ffffff;
  margin-top: 5px;
}
p {
  padding: 0px;
  margin: 0px;
}
#container {
  width: 923px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center
  margin: 0 auto;
}
#top {
  background: url(top.png);
  height: 199px;
}
#left {
  width: 212px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  position: relative;
}
#navtop {
  background: url(navtop.png);
  height: 22px;
}
.leftmid {
  background: url(leftmid.png);
  width: 212px;
}
#navbot {
  background: url(navbot.png);
  height: 31px;
}
#radiotop {
  background: url(radiotop.png);
  height: 20px;
}
#radiobot {
  background: url(radiobot.png);
  height: 20px;
}
#grouptop {
  background: url(grouptop.png);
  height: 26px;
}
#groupbot {
  background: url(groupbot.png);
  height: 5px;
}
#leftbot {
  background: url(leftbot.png);
 background-repeat:repeat;
}
#middle {
  width: 510px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: left;
  margin: 0 auto;
}
#contenttop {
  background: url(contenttop.png);
  height: 4px;
}
.contentmid
{
       background: url(contentmid.png);
       width: 510px;
       padding-left: 5px;
       padding-right: 5px;
}
#right {
  width: 201px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center;
  float: right;
  margin: 0 auto;
}
#statstop {
  background: url(statstop.png);
  height: 25px;
}
.rightmid {
  background: url(rightmid.png);
  width: 201;
}
#statsbot {
  background: url(statsbot.png);
  height: 37px;
}
#linktop {
  background: url(linktop.png);
  height: 26px;
}
#linkbot {
  background: url(linkbot.png);
  height: 39px;
}
#newstop {
  background: url(newstop.png);
  height: 24px;
}
#newsbot {
  background: url(newsbot.png);
  height: 5px;
}
#rightbot {
  background: url(rightbot.png);
 background-repeat:repeat;
}
.style1 {font-size: 7px}
#footer1 {
  background: url(leftbot2.png);
  height: 26px;
}
#footer2 {
  background: url(contentbot.png);
  height: 26px;
}
#footer3 {
  background: url(rightbot2.png);
  height: 26px;
}
#footer {
  width: 923px;
  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;
  text-align:center
}
-->
</style>
</head>

<body>
<br />
<table align="center" width="923">
<tr>
<td>
<div id="container">
<table width="924" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div><img src="top.png" /></div></td>
  </tr>
</table>
<div id="left">
<div><img src="navtop.png" /></div>
<div class="leftmid">
  <p>Nav here</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>yes</p>
  <p>it's all expandable</p>
  <p>:D </p>
  <p>&nbsp;</p>
</div>
<div><img src="navbot.png" /></div>
<div><img src="radiotop.png" /></div>
<div class="leftmid">
  <p>Radio text</p>
  <p>yeah baby </p>
  <p>whatever</p>
  <p>u</p>
  <p>want</p>
  <p>here</p>
  <p>lolz</p>
  <p>&nbsp;</p>
</div>
<div><img src="radiobot.png" /></div>
<div><img src="grouptop.png" /></div>
<div class="leftmid">
  <p>harhar</p>
  <p>mm</p>
  <p>sexily expanding</p>
  <p>woohoo </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div><img src="groupbot.png" /></div>
<div id="leftbot">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
</div>
<div id="middle">
<div><img src="contenttop.png" /></div>
<div class="contentmid">
  <p>hi</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</div>
<div id="right">
<div><img src="statstop.png" /></div>
<div class="rightmid">
  <p>radio stats</p>
  <p>here</p>
  <p>yeah</p>
  <p>ok?</p>
  <p>&nbsp;</p>
  <p>song and stuff</p>
  <p>yeah</p>
  <p>ok cool</p>
  <p>&nbsp;</p>
  <p>&nbsp;  </p>
</div>
<div><img src="statsbot.png" /></div>
<div><img src="linktop.png" /></div>
<div class="rightmid">
  <p>link us</p>
  <p>can</p>
  <p>go</p>
  <p>here</p>
</div>
<div><img src="linkbot.png" /></div>
<div><img src="newstop.png" /></div>
<div class="rightmid">
  <p>news here</p>
  <p>title then date</p>
  <p>or</p>
  <p>however you</p>
  <p>want it</p>
  <p>so yeah</p>
  <p>news - the layout now expands </p>
  <p>lol</p>
  <p>&nbsp;</p>
  <p>pretty..</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>.. big </p>
</div>
<div><img src="newsbot.png" /></div>
<div id="rightbot">
  <p>&nbsp;</p>
  <p class="style1">&nbsp;</p>
  <p class="style1">&nbsp;</p>
</div>
</div>
</div>
<table width="923" border="0" align="left" cellpadding="0" cellspacing="0">
  <tr><td height="26"><img src="leftbot2.png" width="212" height="26" /><img src="contentbot.png" /><img src="rightbot2.png" width="201" height="26" /></td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
    Seen on http://youngmusicscene.co.uk/habboplex/
    Last edited by iUnknown; 18-02-2008 at 10:16 PM.
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
  9. 19-02-2008, 04:25 PM #9
    MrCraig's Avatar
    MrCraig
    MrCraig is offline Senior Member
    Join Date
    May 2006
    Posts
    1,797
    Tokens
    0

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    try removing those two lines of code then and see what happens...

    And validator is just w3 standards. nothing to do with coding working.
    Coming and going...
    Highers are getting the better of me
    Reply With Quote Reply With Quote
  10. 19-02-2008, 08:35 PM #10
    iUnknown
    iUnknown is offline Senior Member
    Join Date
    Nov 2007
    Location
    London
    Posts
    1,577
    Tokens
    36

    Latest Awards:

    1000 Posts
    Total Awards: 1

    Default

    Sorry... which lines?
    Kind Regards,

    Guy
    __________________

    Since 2007. Unbelievable Uptime. Web hosting, resellers, master resellers, linux VPS, windows VPS, shoutcasts, at the lowest prices on the net.
    Tech-Hosts.co.uk.
    Reply With Quote Reply With Quote
Page 1 of 2 12 LastLast
« Previous Thread | Next Thread »

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules