DIV floating and organising problems.

Right, after about a month ago someone kindly explained that tables are no longer the 'in' thing to code, and apparently I should take a look at DIV tags, I did.

I got 4 boxes to clip to the right places by using style="float: left;" (later putting it in a .css) - but the 5th peice wraps to the left too. I've made some diagrams to explain what needs to be done. The highlighted boxes on the blue diagram are the ones that I have made and that fit correctly.


And here is what it comes out to look like so far:


The code goes like this:

<div class="tableheader">&nbsp;</div>

And the 'tableheader' class in the style1.css is:

.tableheader {
    background-attachment: scroll;
    background-image: url(../../images/header.gif);
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 24px;
    width: 358px;
    height: 159px;
}

And that comes out fine; see this screenshot (yes, it's a mock of the Habbo Catalogue.):
http://i191.photobucket.com/albums/z...encounter1.png

I coded the next 3 boxes like so:

<div class="tableheader">&nbsp;</div><div class="tableleft"></div><div class="insidebg"></div><div class="tableright"></div>

With the CSS style:

.tableleft {
    background-attachment: scroll;
    background-image: url(../../images/sidel.gif);
    background-repeat: no-repeat;
    text-align: left;
    height: 291px;
    width: 4px;
    float: left;
}
.tableheader {
    background-attachment: scroll;
    background-image: url(../../images/header.gif);
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 24px;
    width: 358px;
    height: 154px;
}
.tableright {
    background-attachment: scroll;
    background-image: url(../../images/sider.gif);
    background-repeat: no-repeat;
    text-align: left;
    height: 291px;
    width: 4px;
    float: left;
}
.tablebottm {
    background-attachment: scroll;
    background-image: url(../../images/bottoma.gif);
    background-repeat: repeat-x;
    text-align: left;
    width: 350px;
    height: 27px;
}
.insidebg {
    background:#F0F0F0;
    text-align: left;
    height: 265px;
    width: 350px;
    float:left;
}

The bolded part is the div that needs placing here:
http://i191.photobucket.com/albums/z...encounter2.png

If anyone can explain to me how to do this, please help me out! Thank you

Also, can someone help me with the placing of the sidebar?

Many thanks,
Boonzeet

[Jxhn]

You don't really need to do it like that with 5 divs for one box. You only need 3. 1 at the top to put the picture at the top in. One in the middle which in you're case will just have a border instead of a picture and one at the bottom with the bottom image in.

You don't really need to do it like that with 5 divs for one box. You only need 3. 1 at the top to put the picture at the top in. One in the middle which in you're case will just have a border instead of a picture and one at the bottom with the bottom image in.

Hmm, I guess that could work but I'd have to use specific "padding" in the CSS right? So that the text doesn't warp to the sides.

And what about the second part on the right? I could make that all one div, yeah but how will I make it wrap around?

[Jxhn]

Hmm, I guess that could work but I'd have to use specific "padding" in the CSS right? So that the text doesn't warp to the sides.

And what about the second part on the right? I could make that all one div, yeah but how will I make it wrap around?

Yes, just remember that adding padding also increases the width so that must be altered accordingly.

The part on the right can be made the same way, with a margin-top to make it go down and make the one on the left "float: left;" to put the seconds one on the right, if you know what I mean.

Yes, just remember that adding padding also increases the width so that must be altered accordingly.

The part on the right can be made the same way, with a margin-top to make it go down and make the one on the left "float: left;" to put the seconds one on the right, if you know what I mean.

Yeah, I understand.

Also Internet Explorer has just added so much more work for me - I have to make a separate style sheet that applies only to IE (Using the famous <!--[if IE]> <![endif]-->) =|

But yeah, I've had a go at doing this and here's what it looks like so far!
http://i191.photobucket.com/albums/z...estshot1-1.png

The way I coded it is terrible, but at least it works, haha.

My next problem is those drop-down menus :|

[Jxhn]

Yeah, I understand.

Also Internet Explorer has just added so much more work for me - I have to make a separate style sheet that applies only to IE (Using the famous <!--[if IE]> <![endif]-->) =|

But yeah, I've had a go at doing this and here's what it looks like so far!
http://i191.photobucket.com/albums/z...estshot1-1.png

The way I coded it is terrible, but at least it works, haha.

My next problem is those drop-down menus :|

Put this in the head tags:

<script type="text/javascript">
function showHideMenu(id)
{
var item = document.getElementById(id);
if(item.style.display != "none")
{
  item.style.display = "none";
}
else
{
  item.style.display = "block";
}
var divs = document.getElementsByTagName("div");
for(i=0;i<=divs.length;i++)
{
  if(divs[i].className == "dropdown")
  {
    divs[i].style.display = "none";
  }
}
}
</script>

This for the menus:

<div id="menu1container">
  <div class="menubutton" onClick="showHideMenu('menu1')">
    <img src="images/button1.gif">
  </div>
  <div class="dropdown" id="menu1">
    blah blah links etc here
  </div>
</div>
<div id="menu2container">
  <div class="menubutton" onClick="showHideMenu('menu2')">
    <img src="images/button2.gif">
  </div>
  <div class="dropdown" id="menu2">
    blah blah links etc here
  </div>
</div>
<div id="menu3container">
  <div class="menubutton" onClick="showHideMenu('menu3')">
    <img src="images/button3.gif">
  </div>
  <div class="dropdown" id="menu3">
    blah blah links etc here
  </div>
</div>
<div id="menu4container">
  <div class="menubutton" onClick="showHideMenu('menu4')">
    <img src="images/button4.gif">
  </div>
  <div class="dropdown" id="menu4">
    blah blah links etc here
  </div>
</div>

Just repeat like that for all your menus. Iszak could probably rack you up one in jquery with slideing effects.

Put this in the head tags:

<script type="text/javascript">
function showHideMenu(id)
{
var item = document.getElementById(id);
if(item.style.display != "none")
{
  item.style.display = "none";
}
else
{
  item.style.display = "block";
}
var divs = document.getElementsByTagName("div");
for(i=0;i<=divs.length;i++)
{
  if(divs[i].className == "dropdown")
  {
    divs[i].style.display = "none";
  }
}
}
</script>

This for the menus:

<div id="menu1container">
  <div class="menubutton" onClick="showHideMenu('menu1')">
    <img src="images/button1.gif">
  </div>
  <div class="dropdown" id="menu1">
    blah blah links etc here
  </div>
</div>
<div id="menu2container">
  <div class="menubutton" onClick="showHideMenu('menu2')">
    <img src="images/button2.gif">
  </div>
  <div class="dropdown" id="menu2">
    blah blah links etc here
  </div>
</div>
<div id="menu3container">
  <div class="menubutton" onClick="showHideMenu('menu3')">
    <img src="images/button3.gif">
  </div>
  <div class="dropdown" id="menu3">
    blah blah links etc here
  </div>
</div>
<div id="menu4container">
  <div class="menubutton" onClick="showHideMenu('menu4')">
    <img src="images/button4.gif">
  </div>
  <div class="dropdown" id="menu4">
    blah blah links etc here
  </div>
</div>

Just repeat like that for all your menus. Iszak could probably rack you up one in jquery with slideing effects.

Ah okay, thanks

This won't add any spacing between the images, though - will it? The images have to be gapless.

[Jxhn]

Ah okay, thanks

This won't add any spacing between the images, though - will it? The images have to be gapless.

It shouldn't do. If it does just make the margins and padding 0px with css.