Free Valid HTML & CSS Habbo Layout!

[Meti]

Hello,
I've been working on coding this layout today. And now I'm going to release it for free! It's Validated in HTML and CSS. It's coded in expandable div's.
If there's anything wrong with code, or you need help with something, feel free to send me a PM ;)

Anyways,
You can download the files at:
http://images.habboupload.com/1220202481.zip

The layout looks like this:
http://images.habboupload.com/1220173044.png

I've validated the layout, but can't add the images here :(
Enjoy the layout!

// Meti

[Pazza]

Wheres my forum skin :P

Its nice, but I don't see why you watermarked it when your releasing xD

I'd use it if it wasn't free haha :P

+rep

[DeejayMachoo$]

<<< badly coded.

[iJoe]

Looks alright :) Nice to make a free coded layout

[Meti]

Thanks :)

@ Machoo;
Where's it bad- coded? It's validated :S

[BlueTackle]

Thanks :)

@ Machoo;
Where's it bad- coded? It's validated :S


He obv dosent know coz isnt replied?

thats what i think :)

[Decode]

There is a problem on firefox

http://www.tehupload.com/uploads/app-877558783326192172.png

[Meti]

Hmm. Work fine on IE7 and IE8

I maybe have to add different .css's for each internet?

[BlueTackle]

Cant help you, sorry mate.

[Decode]

Hmm. Work fine on IE7 and IE8

I maybe have to add different .css's for each internet?
That shouldn't be needed, its a realy simple layout. Why not just make a div arround it with a set width so the boxes cant go off to the left and right?

[Kieran]

Works for me in FF 3.0.1

[Meti]

it works for some, and for some other people, it doesn't :S

[BlueTackle]

There is a problem on firefox

http://www.tehupload.com/uploads/app-877558783326192172.png



Thats what mine looks like too

www.habpark.habboshosting.com (http://www.habpark.habboshosting.com)

[--ss--]

Thats what mine looks like too

www.habpark.habboshosting.com (http://www.habpark.habboshosting.com)
http://uploadpicz.com/images/KJUIKLM.png for me :(

Nice layout though ;).

[Fehm]

This is great, Simple and effective. Thanks for posting =]

[Meti]

http://images.habboupload.com/1220241020.jpg

Working good :P

[redtom]

@ Machoo;
Where's it bad- coded? It's validated :S

That doesn't mean its coded well, you have to use things like p, h, ids, class all in the right places, yet it can be valid but that doesn't mean its coded well, it just means its coded within the rules.

I'll download it now and have a look at it and see if I can see the problem but I'm not very good at finding other peoples problems.

[redtom]

Can't edit previous and I'm adding info:

You've used float: right where you should have float: left; and you've coded it for one resolution.

[Decode]

http://images.habboupload.com/1220241020.jpg

Working good :P
That will only work for people who have the same size screen as you.

[BlueTackle]

http://images.habboupload.com/1220241020.jpg

Working good :P


Still dosent work for me, as said above, i think its the screen sizes

[Meti]

Ok. My screen is quite small. Only 17". I'm buying a 22" or 24" soon.

I could also put my laptop into my 50" TV? :P

[Pazza]

I could also put my laptop into my 50" TV? :P

That wouldn't change anything, as the laptop is 17", you'd need to get a 50" laptop scren ;)

[redtom]

Ok. My screen is quite small. Only 17". I'm buying a 22" or 24" soon.

I could also put my laptop into my 50" TV? :P

Thats not your resolution, thats the size of you screen. You can't code for a screen site, you can code for a layout to be best viewed in a resolution but it should still work in atleast 800 x 600.

[Meti]

I don't understand?

[Excellent1]

I don't understand?Give up, you've copied my methods of coding to the brim, you've used all the comments in places I've used them, you've used the right float when you should use a left to align it. You cannot code.

[Hayd93]

I don't understand?
The size of the screen dont matter. I could run a 50" screen in 800 x 600 if i wanted to. Its not about screen sive its about resolution like mine is 1440 x 900.

[redtom]

I don't understand?

Screen size is how big your screen is in inches :P

Your screen resolution is the number of distinct pixels that appear on your screen. (I think)

[Meti]

I know what the problem is now. Thanks Lucas for telling me :) +REP
It has to be float: left; instead of float: right;

that's why it's gone away from the layout..

Updates coming soon.

[ItsMeh]

omg great layout. thanks :)

[Calon]

Nice of you to give away for free.

[Meti]

I know :P

Good you guys like it. I'm just going to change the .index file, then I'll add the new working code :)

[DeejayMachoo$]

That doesn't mean its coded well, you have to use things like p, h, ids, class all in the right places, yet it can be valid but that doesn't mean its coded well, it just means its coded within the rules.

I'll download it now and have a look at it and see if I can see the problem but I'm not very good at finding other peoples problems.

Exactly what i ment by badly coded :)

[Meti]

How come it's bad coded? It works? :S

[Excellent2]

How come it's bad coded? It works? :SBecause you can't code. And it doesn't work in firefox.

[Meti]

Lucas goes wild.
I paid you to code a layout for me, when I couldn't code. Do you all want to know what he did?
He sliced it, and coded it totally wrong. The navigation was like a footer. The left navigations were in the middle of the screen. The footer was also in the middle.

Did i get my money back? NO!

[Excellent2]

Lucas goes wild.
I paid you to code a layout for me, when I couldn't code. Do you all want to know what he did?
He sliced it, and coded it totally wrong. The navigation was like a footer. The left navigations were in the middle of the screen. The footer was also in the middle.

Did i get my money back? NO!No, you played with the coding, I told you how to fix everything else. Oh yes, a pound for my services.

[Meti]

You said 2 pounds was good. Then i gave you 1 pound, and 1 pound when it was done :S
Not my fault you liked the price

[Excellent2]

2 pounds for a 5 div layout is about right.

[Meti]

Oh yes, a pound for my services.

You say it's very cheap?
it is, but you say it in another way

[Excellent2]

You say it's very cheap?
it is, but you say it in another way
Learn to phrase your words, I didn't understand that one bit.

[Calon]

I believe Lucas, because you're a complete newbie coder, it's not your fault that you twiddled with the coding, it's how you learn. I can't imagine Lucas 'scamming' you, £2 is dear for how much I code for, but he's most likely better and faster with CSS/HTML than I am.

[Excellent2]

I believe Lucas, because you're a complete newbie coder, it's not your fault that you twiddled with the coding, it's how you learn. I can't imagine Lucas 'scamming' you, £2 is dear for how much I code for, but he's most likely better and faster with CSS/HTML than I am.Thanks Calon :) It was a 5 div layout that I kept a pound for because I sliced it for him, coded it but peter couldn't add something so he wanted all of his money back. I told him what to do yet he still couldn't do it.

[--ss--]

I don't want to get involved or anything but how comes Lucas was/is coding it for you when you can code it yourself? :s

[Excellent2]

I don't want to get involved or anything but how comes Lucas was/is coding it for you when you can code it yourself? :sWell technically it was "is" but he still can't code and I got asked to code metidesigns 2 weeks ago (so did you I think) so lol...

[Stepheen]

Learn to phrase your words, I didn't understand that one bit.
Contact google translator.
I can tell when people use it.
Like when i type in Hello my name is Stephen. it outputs "Bonjour, je m'appelle Stephen."
When i've always known it to be "Bonjour mon nom est Stephen."

[Robbie]

Yeah.

"Bonjour, je m'appelle Robbie" means "Hello, I am called Robbie"
"Bonjour, mon nom est Robbie" means "Hello, my name is Robbie"

;)

EDIT: I just tried Google Translate and it's right (does what I said above)

[Meti]

Lucas. You still didn't code it.
And --ss--;
I asked him to code it, when I couldn't code.

[HabbDance]

great tut :]! +rep for sure. one thing tho, my layouts only work in firefox and ie, help me D:!

[Flisker]

http://www.tehupload.com/uploads/app-67376780183045947.png

bit late jumping on the bandwagon, but its doesnt work for me (1440x900)

[BlueTackle]

http://www.tehupload.com/uploads/app-67376780183045947.png

bit late jumping on the bandwagon, but its doesnt work for me (1440x900)


Someone had to do it late?

LOL :eusa_clap

[Meti]

Lol. I finished it quite late :P
But i'll be changing the code ;)

[Calon]

Lol. I finished it quite late :P
But i'll be changing the code ;)
I think that might be an amazing idea.

[Meti]

I agree ^^ But there's not alot to change. Just the right navigation?

[Stepheen]

I agree ^^ But there's not alot to change. Just the right navigation?
Can you not just let this thread die. :/
Your layout is **** fgs.

[Meti]

I actually give out free stuff to help the community out.
What do you do for the community?

[Stepheen]

I actually give out free stuff to help the community out.
What do you do for the community?
*removed*

Edited by Invent (Forum Moderator): Please do not be racist and insult other forum members

[Calon]

*removed*

Edited by Invent (Forum Moderator): Please do not be racist and insult other forum members
I agree, you're not helping the community you're being a noob.

[BlueTackle]

ok

meti please just get the layout done coz i dont understand half the stuff your saying and its really annoying :)

[Meti]

I agree, you're not helping the community you're being a noob.
Did you mean me or Stepheen?

[UniqueHabbo]

Meti, I think it's best if you concentrate on getting the layout coded properly, and releasing it here, like you said you would, twice after the original release.

[HabbDance]

guys, he was nice by releasing the layout, if you don't like it, it's not his problem he's only tryna help. and also, who cares if he's a 'noob coder'. most ppl have idea what friggen HTML is...

anyway, meti, or anyone who needs this,


<html>
<head>
<title>YourSite.com!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE 7]>
<link href="styleie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
Content...
</body>
</html>


Basicly where it says:

<!--[if IE 7]>
<link href="styleie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
You can make different styles for different IE versions, just change the number and the style.css

Hope i helped?

[Meti]

Hey. Overwrite this code over the old index.htm file:


<!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=utf-8" />
<title>Free Habbo Layout</title>
<!-- Layout designed and coded by Meti Mulaj -->
<!-- You are not allowed to copy this code.-->
<!-- If you need help with anything, add [email protected] to your msn.-->
<!-- If you don't know anything about HTML and CSS, do not change the code. Only the content texts.-->
<!-- Enjoy the layout! -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Start Header -->
<div id="header"></div>
<!-- End Header -->
<!-- Start DJ Says -->
<div id="djsays">Add your marquee here</div>
<!-- Start Left Navigations -->
<div id="left_navs">
<div id="orange_top"><strong>Title Here</strong></div>
<div id="orange_mid">Expandable box.<br />
</div>
<div id="orange_bot"></div>
<div id="blue_top"><strong>Title Here</strong></div>
<div id="blue_mid">Expandable box.</div>
<div id="blue_bot"></div>
</div>
<!-- End Left Navigations -->
<!-- Start Content Box -->
<div id="content_box">
<div id="content_top"></div>
<div id="content_mid">This content box also expands!
<br />
</div>
<div id="content_bot"></div>
</div>
<!-- End Content Box -->
<!-- Start Right Navigations -->
<div id="right_navs">
<div id="red_top"><strong>Title Here</strong></div>
<div id="red_mid">Expandable box.</div>
<div id="red_bot"></div>
<div id="yellow_top"><strong>Title Here</strong></div>
<div id="yellow_mid">Expandable box.</div>
<div id="yellow_bot"></div>
</div>
<!-- End Right Navigations -->
<!-- Start Footer -->
<div id="footer">
<div align="center">Copyright © Yoursite.com 2008+<br />
Layout designed by Meti Mulaj from HabboxForum</div>
</div>
<!-- End Footer -->
</body>
</html>


And, add a file named style.css. Add this code in it:


@charset "utf-8";
/* CSS Document */

body {
background-image: url(images/bg.png);
font-style: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: auto;
}
#container {
width: 956px;
margin: auto;
}
#header {
background-image: url(images/header.gif);
width: 903px;
height: 153px;
margin: 0 auto;
}
#djsays {
background-image: url(images/dj_says.gif);
width: 881px;
height: 19px;
padding-top: 7px;
margin: 0 auto;
padding-left: 68px;
margin-top: 10px;
}
#left_navs {
float: left;
width: 199px;
margin-top: 20px;
margin-left: 10px;
}
#orange_top {
background-image: url(images/orange_top.gif);
width: 199px;
height: 20px;
padding-top: 12px;
text-align: center;
}
#orange_mid {
background-image: url(images/orange_mid.gif);
padding-left: 3px;
width: 196px;
}
#orange_bot {
background-image: url(images/orange_bot.gif);
width: 199px;
height: 5px;
}
#blue_top {
background-image: url(images/blue_top.gif);
width: 199px;
height: 20px;
padding-top: 12px;
text-align: center;
margin-top: 5px;
}
#blue_mid {
background-image: url(images/blue_mid.gif);
padding-left: 3px;
width: 196px;
}
#blue_bot {
background-image: url(images/blue_bot.gif);
width: 199px;
height: 5px;
}
#content_box {
float: left;
width: 544px;
margin-top: 20px;
margin-left: 10px;
}
#content_top {
background-image: url(images/content_top.gif);
width: 544px;
height: 6px;
}
#content_mid {
background-image: url(images/content_mid.gif);
padding-left: 3px;
width: 541px;
}
#content_bot {
background-image: url(images/content_bot.gif);
width: 544px;
height: 5px;
}
#right_navs {
float: left;
width: 199px;
margin-top: 20px;
margin-right: 10px;
margin-left: 10px;
}
#red_top {
background-image: url(images/red_top.gif);
width: 199px;
height: 20px;
padding-top: 12px;
text-align: center;
}
#red_mid {
background-image: url(images/red_mid.gif);
padding-left: 3px;
width: 196px;
}
#red_bot {
background-image: url(images/red_bot.gif);
width: 199px;
height: 5px;
}
#yellow_top {
background-image: url(images/yellow_top.gif);
width: 199px;
height: 20px;
padding-top: 12px;
text-align: center;
margin-top: 5px;
}
#yellow_mid {
background-image: url(images/yellow_mid.gif);
padding-left: 3px;
width: 196px;
}
#yellow_bot {
background-image: url(images/yellow_bot.gif);
width: 199px;
height: 5px;
}
#footer {
background-image: url(images/footer.gif);
width: 765px;
height: 48px;
margin-left: 125px;
margin-top: 150px;
padding-left: 5px;
padding-top: 3px;
}

[L?KE]

***, when will this thread die :rolleyes:

[Meti]

People asked for the update. I gave them it ;)

[Anticimex]

Thanks for the updates!

[BlueTackle]

Cheers meti :)

[Anticimex]

Did it work for you, BlueTackle?

[BlueTackle]

Idk, i dno how too upload if i only have html.

[Meti]

If you have a domain:
www.yoursite.com/cpanel > File Manager > Upload

[UniqueHabbo]

Still did not work.

[Meti]

Hmm..
FireFox or IE?

[L?KE]

Is it really worth going to all this effort over a free and not so great layout?

[RyanDOT]

Is it really worth going to all this effort over a free and not so great layout?

You have got a point...

[Meti]

I want it to be as good as possible.

[UniqueHabbo]

It was FF, btw.

[Anticimex]

Ok. This layout works best on IE.
I'll try doing different CSS's for each browser.
But I can't do that atm.

[Meti]

Thanks Matt (Anticimex) for helping :D

[samuelb07]

Cheers Meti, at least someone helps the community every once in a while by releasing quality free layouts. Thanks for the update aswell.

[Jaysun]

I quite like it, well done.