[Guide] Code a layout in expandable DIV's!

Meti · 01-09-2008, 05:04 PM

Hello,
I just finished this GUIDE about coding a layout in expandable DIV's.
Follow all the steps, and at the end, you'll have a layout coded in expandable DIV's!

Best regards,
Meti

Needed:
- Experience of slicing.
- Slicing Program (Photoshop, FireWorks etc.)
================================================== =========
Step1: Slicing the layout.
Before you can start coding, you'll have to slice the layout.
The layout you're going to slice this time, is this layout:
http://images.habboupload.com/1220320902.png

What you need to slice:
- The header
- The left navigation (top, middle and bottom)
- The content box (top, middle, bottom)

Name your slices:
Header = header
Left navigation = box1_top, box1_mid, box1_bot
Content Box = content_top, content_mid, content_bot

Step2: Saving you slices.
Now, you have to save your sliced layout. If you are on Photoshop, simple hold CTRL + ALT + SHIFT + S. Then Click Save. Don't save the layout in images and HTML. Only Images.

Step3: Copying the left navigation.
You might think I've forgotten to tell you to slice the right navigation too, but I haven't. Go to your folder, where you've saved you images. Copy box1_top, box1_mid, box1_bot. Paste them into the same folder. The new images will probably be like: box1_top - copy. Therefore, you need to change the names:
box1_top = box2_top
box1_mid = box2_mid
box1_bot = box2_bot

Step 4: The coding begins!
Now the fun begins. You're going to code your layout, with the images you've sliced.
Create a new .HTML file. Name it index.html .
Add this main code to the layout:

HTML 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=utf-8" />
<title>DIV LAYOUT</title>
</head>
<style type="text/css">
<!--
-->
</style>
<body>
</body>
</html>

This is the main code, which will come up every time you create a new document on DreamWeaver, FrontPage and all of those programs.

Step5: Adding parts of the CSS.
Ok. Now you'll have to add some CSS texts. A normal CSS text looks something like this:

HTML Code:

#cssname {
     background-image: url(images/picture.gif);
     width: 900px;
     height: 150px;
}

First, you're going to add the body CSS.
You should add it where it says "HERE".

HTML Code:

<style type="text/css"><!-- HERE --></style>

Here's the code:

HTML Code:

body {
     background-color: #999999;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
}

Step6: Adding the Header CSS.
Right. You should add this CSS code below the BODY code you did on Step 5.

HTML Code:

#header {
 background-image: url(images/header.gif);
 width: 900px;
 height: 100px;
 margin-top: 0px;
 padding-top: 50px;
}

Step7: Adding the left navigation.
This is almost as easy as the Header bit. But now, you're going to add a code, which will take your left navigation to the left side of the layout.
Add this code below the Header code.

HTML Code:

#left_nav {
 float: left;
}
#box1_top {
 background-image: url(images/box1_top.gif);
 width: 200px;
 height: 20px;
 padding-top: 10px;
}
#box1_mid {
 background-image: url(images/box1_mid.gif);
}
#box1_bot {
 background-image: url(images/box1_bot.gif);
 width: 200px;
 height: 10px;
}

Step8: Adding the content box's CSS.
This code will be like the code I gave you on step 7, but we'll be changing the CSS names and image names. Add this code below the code you added on step 7.

HTML Code:

#content {
 float: left;
}
#content_top {
 background-image: url(images/content_top.gif);
 width: 500px;
 height: 15px;
}
#content_mid {
 background-image: url(images/content_mid.gif);
}
#content_bot {
 background-image: url(images/content_bot.gif);
 width: 500px;
 height: 15px;
}

Step9: Adding the right navigation.
This code will also be like the left navigation's CSS code, but we'll be changing the CSS names and picture names in the code.
Add this code after the code you added on step 8.

HTML Code:

#right_nav {
 float: left;
}
#box2_top {
 background-image: url(images/box2_top.gif);
 width: 200px;
 height: 20px;
 padding-top: 10px;
}
#box2_mid {
 background-image: url(images/box2_mid.gif);
}
#box2_bot {
 background-image: url(images/box2_bot.gif);
 width: 200px;
 height: 10px;
}

Step 10: Adding some text styles.
I'm going to add 3 different text styles. One style with the size of 36 px's. I'm going to use that for the header's texts.
Then, I'm going to add one style for content's headers. It's going to be bold, with the size of 10px's. And the last style, content's texts. It's going to normal text, with the size of 10px's.
Add this code after the code you added on step9.

HTML Code:

.cnt_hdr {
 color: #FFFFFF;
 font-weight: bold;
}
.cnt_txt {color: #FFFFFF}
.header {
 font-size: 36px;
 color: #FFFFFF;
}

Step11: Adding the DIV's!
Congratulations! You've finished the CSS part

Now, you're going to add the DIV codes.
We'll be starting with the header code. Add the code between the <body></body> tags.

HTML Code:

<!-- Start Header -->
<div class="header" id="header">Header Text Here</div>
<!-- End Header -->

Step12: Adding the left navigation DIV's.
Ok. Add this code after the code you added on step11.

HTML Code:

<!-- Start Left Navigation -->
<div id="left_nav">
 <div id="box1_top">
   <div align="center" class="cnt_hdr">Box1 Header</div>
 </div>
 <div class="cnt_txt" id="box1_mid">Expandable box.</div>
 <div id="box1_bot"></div>
</div>
<!-- End Left Navigation -->

Step 13: Adding the content box DIV's.
Now, you need to add this code after the code you added on step12.

HTML Code:

<!-- Start Content Box -->
<div id="content">
 <div id="content_top">
   <div align="center" class="cnt_hdr"><strong>Content Box Header</strong></div>
 </div>
    <div class="cnt_txt" id="content_mid">This also expands.</div>
    <div id="content_bot"></div>
</div>
<!-- End Content Box -->

Step14: Adding the right navigation!
This is the last step of this guide. You're going to add the right navigation to the code. You should add this after the code you added on step13.

HTML Code:

!-- Start Right Navigation -->
<div id="right_nav">
 <div id="box2_top">
   <div align="center" class="cnt_hdr">Box2 Header</div>
 </div>
 <div class="cnt_txt" id="box2_mid">This box is the last expandable box.</div>
 <div id="box2_bot"></div>
</div>
<!-- End Right Navigation -->

Step15: Saving your files.
Ok. I was lying. This is the last step of this guide

Now, you'll have to save the index.html file to the folder you have the images/ folder in.
Then, add it to your website. And there you go, a div layout.

Full preview of the layout (coded):
www.metidesigns.com/divlayout/index.html
Download the layout (.zip):
www.metidesigns.com/divlayout/layout.zip

Copyright © Meti
This Guide was created by Meti from HabboxForum. You are not allowed to copy or add this guide on any other forums, without permission from Meti .

Edited by Flisker (Forum Moderator): nice tutorial, added to tutorial forum

Hypertext · 01-09-2008, 05:08 PM

..ss already posted this, pretty much exact thing.

Excellent1 · 01-09-2008, 05:12 PM

Good tutorial but you should explain in depth what each thing does such as containers etc. You also need to add padding.

~~Stepheen~~ · 01-09-2008, 05:21 PM

You'd never guess what. That could be made without images, like omg.

Tom-743 · 01-09-2008, 05:27 PM

Thats only for 1 layout... And no one actualy learns what they are copying and pasting with that code.

L?KE · 01-09-2008, 05:31 PM

The images could be done with rgbs/hexs or whatever.

Plus there is already loads of tutorials on how to do this across the web, as well as no doubt somewhere on this forum.

Good effort and thanks for sharing, but I can't help feel you've wasted your time.

Meti · 01-09-2008, 07:21 PM

Thanks for comments. I know there's alot of tutorials of this, but people can't find them. So I thought I could do a simple guide for habbox users.

I know this could be made without images, but I'm just showing you the basics. I couldn't bother creating a advanced layout for this. Therefore I made an easy one.

@Hypertext;
He didn't post how to create a whole layout? :S

LOLROB · 01-09-2008, 07:45 PM

Lovely +rep

make some more guides

Meti · 01-09-2008, 07:49 PM

I'll maybe do a designing tut

Just for you

If i get time..

EDIT: Can this be added to web designing tutorials?

Fehm · 01-09-2008, 07:51 PM

Amazing ^^

I actually learnt something for once ^^

Thread: [Guide] Code a layout in expandable DIV's!

Thread Tools

[Guide] Code a layout in expandable DIV's!

Posting Permissions