PDA

View Full Version : Coding my layout [help]


Andys
30-10-2008, 12:29 AM
Right, I've got my layout:

http://www.tehupload.com/uploads/6638860092d3048simplyhabbo.png

When I got to code it, i've sliced it an'all and i've got it in dreamweaver.
It works almost perfectly, the only problem is when I type content in the top left box, the top left box and the red box both expand. However, I only want the top left box to expand when i do this. Likewise when I type content into the red box the top left box also expands.

Help?
Thanks.
wsg14
30-10-2008, 12:39 AM
Post your code for that area (HTML&CSS).

btw (off-topic): where does everyone get those avatars (the one in your avatar)?
Andys
30-10-2008, 12:45 AM
Okay, btw this is in tables not divs so don't moan saying "code in divs, tables suck." simply because I have no idea about DIVs even after looking at numerous tutorials.


<html>
<head>
<title>simplyhabbo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(../Pictures/bg.png);
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 9px;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<!-- ImageReady Slices (simplyhabbo.psd) -->
<table id="Table_01" width="800" height="321" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/simplyhabbo_01.gif" width="800" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="14">
<img src="images/simplyhabbo_02.gif" width="40" height="319" alt=""></td>
<td colspan="5">
<img src="images/simplyhabbo_03.gif" width="741" height="145" alt=""></td>
<td rowspan="14">
<img src="images/simplyhabbo_04.gif" width="19" height="319" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/simplyhabbo_05.gif" width="741" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/simplyhabbo_06.gif" width="1" height="162" alt=""></td>
<td background="images/simplyhabbo_07.gif"><table border="0" cellspacing="3">
<tr>
<td width="257"><div align="center"></div></td>
</tr>
</table></td>
<td width="16" rowspan="12">&nbsp;</td>
<td>
<img src="images/simplyhabbo_09.gif" width="490" height="30" alt=""></td>
<td rowspan="12">
<img src="images/simplyhabbo_10.gif" width="27" height="162" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_11.gif" width="207" height="9" alt=""></td>
<td background="images/simplyhabbo_12.gif" width="490" height="9" alt=""><p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_13.gif" width="207" height="6" alt=""></td>
<td>
<img src="images/simplyhabbo_14.gif" width="490" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_15.gif" width="207" height="7" alt=""></td>
<td rowspan="9">&nbsp;</td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_17.gif" width="207" height="30" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_18.gif" width="207" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_19.gif" width="207" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_20.gif" width="207" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_21.gif" width="207" height="30" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_22.gif" width="207" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_23.gif" width="207" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_24.gif" width="207" height="13" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>

I got it from dentafrice's post i'll find you the link.
http://www.habboxforum.com/showpost.php?p=5232944&postcount=3286
wsg14
30-10-2008, 12:47 AM
I actually don't understand tables tbh. If you want I code teach you how to code in divs.
Andys
30-10-2008, 12:48 AM
Trust me, I can't learn DIV's my mind gets mixed up :P
I'll add you on msn anyways ;)
Cushioned
30-10-2008, 01:07 AM
[email protected] ([email protected])

I'll code it in expandable divs / css for free :D
Andys
30-10-2008, 02:09 AM
[email protected] ([email protected])

I'll code it in expandable divs / css for free :D
the whole point in it was to learn to code myself... :rolleyes:
thanks for the offer none the less.
Cushioned
30-10-2008, 02:11 AM
the whole point in it was to learn to code myself... :rolleyes:
thanks for the offer none the less.

I know you said not to say tables are crap, but they are, and not many people want to buy things coded in tables :rolleyes:
HabbDance
30-10-2008, 02:15 AM
I know you said not to say tables are crap, but they are, and not many people want to buy things coded in tables :rolleyes:
Agreed. Let Cushioned do it, I'll vouch for him. ;)
Cushioned
30-10-2008, 02:18 AM
Agreed. Let Cushioned do it, I'll vouch for him. ;)

Thanks mate :)
Andys
30-10-2008, 02:28 AM
don't worry box! has taught me how to code div's and i'm really starting to get the hang of it :)
Cushioned
30-10-2008, 02:32 AM
don't worry box! has taught me how to code div's and i'm really starting to get the hang of it :)

Oh ok. Have fun learning :P
Andys
30-10-2008, 02:41 AM
hm, in the css stylesheet how would i make an image as the background?
as i only know background-color: #code;

would it be... background: url(directory) ?
Cushioned
30-10-2008, 02:45 AM
hm, in the css stylesheet how would i make an image as the background?
as i only know background-color: #code;

would it be... background: url(directory) ?

Add me to MSN, it's in my sig, then I can help you anytime you need.

It would be:

background-image: url(img.png);
Trinity
30-10-2008, 03:03 AM
Add me to MSN, it's in my sig, then I can help you anytime you need.

It would be:

background-image: url(img.png);

Or simply background: url(img.png);
Then you can add in other things like repeat-x.
Decode
30-10-2008, 10:06 AM
Okay, btw this is in tables not divs so don't moan saying "code in divs, tables suck." simply because I have no idea about DIVs even after looking at numerous tutorials.


<html>
<head>
<title>simplyhabbo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(../Pictures/bg.png);
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 9px;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<!-- ImageReady Slices (simplyhabbo.psd) -->
<table id="Table_01" width="800" height="321" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/simplyhabbo_01.gif" width="800" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="14">
<img src="images/simplyhabbo_02.gif" width="40" height="319" alt=""></td>
<td colspan="5">
<img src="images/simplyhabbo_03.gif" width="741" height="145" alt=""></td>
<td rowspan="14">
<img src="images/simplyhabbo_04.gif" width="19" height="319" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/simplyhabbo_05.gif" width="741" height="12" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/simplyhabbo_06.gif" width="1" height="162" alt=""></td>
<td background="images/simplyhabbo_07.gif"><table border="0" cellspacing="3">
<tr>
<td width="257"><div align="center"></div></td>
</tr>
</table></td>
<td width="16" rowspan="12">&nbsp;</td>
<td>
<img src="images/simplyhabbo_09.gif" width="490" height="30" alt=""></td>
<td rowspan="12">
<img src="images/simplyhabbo_10.gif" width="27" height="162" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_11.gif" width="207" height="9" alt=""></td>
<td background="images/simplyhabbo_12.gif" width="490" height="9" alt=""><p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_13.gif" width="207" height="6" alt=""></td>
<td>
<img src="images/simplyhabbo_14.gif" width="490" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_15.gif" width="207" height="7" alt=""></td>
<td rowspan="9">&nbsp;</td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_17.gif" width="207" height="30" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_18.gif" width="207" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_19.gif" width="207" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_20.gif" width="207" height="7" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_21.gif" width="207" height="30" alt=""></td>
</tr>
<tr>
<td background="images/simplyhabbo_22.gif" width="207" height="9" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_23.gif" width="207" height="6" alt=""></td>
</tr>
<tr>
<td>
<img src="images/simplyhabbo_24.gif" width="207" height="13" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>I got it from dentafrice's post i'll find you the link.
http://www.habboxforum.com/showpost.php?p=5232944&postcount=3286
The problem there is that you need to learn to code divs + css. Isn't that just an automatically generated code by dreamweaver.
Meti
30-10-2008, 08:49 PM
I always say this to myself:
"If anyone else can do something, I should also be able to do it" :O

Lol. Helps some times.

Good to hear you getting hang of div coding
L?KE
30-10-2008, 09:48 PM
It's cos dreamweaver has made it one table?

So if either side expand it takes the other with it. Didn't read the code thoroughly so correct me if I'm wrong.

Want to hide these adverts? Register an account for free!