Boonzeet
16-12-2008, 05:54 PM
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.
http://i191.photobucket.com/albums/z94/Boonzeet/tester.png
And here is what it comes out to look like so far:
The code goes like this:
<div class="tableheader"> </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/z94/Boonzeet/problemencounter1.png
I coded the next 3 boxes like so:
<div class="tableheader"> </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/z94/Boonzeet/problemencounter2.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
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.
http://i191.photobucket.com/albums/z94/Boonzeet/tester.png
And here is what it comes out to look like so far:
The code goes like this:
<div class="tableheader"> </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/z94/Boonzeet/problemencounter1.png
I coded the next 3 boxes like so:
<div class="tableheader"> </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/z94/Boonzeet/problemencounter2.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