[Guide] How to code expandble divs

**--ss--** · 10-02-2008, 08:05 PM

Well the most asked question on the forum is how to code layouts , well in this tutorial I will teach you how to code a basic expanding 'Box' in CSS+Divs

.
For this tutorial you will need to have Microsoft Paint and some web hosting (Localhost is fine)

Step 1:
First of all we will need a "box" , so lets open up paint and draw one , maybe add some shading.

Step 2:
We now "slice" the box into 3 sections , an Header , an footer and a background image for the middle :

Save each section as it's own file.
Before we do anything else lets look at the middle background , It seems the whole block is the same thing repeated over again , so instead of having it as a block like that lets make it into a 1pixel heigh strip by going to Image > Attributes (Ctrl+E) > Change height to 1px
and voila , you will have an strip with an height of 1pixel.

At this point you should have 3 sections looking like this:
Header:

Background:

Footer:

Step 3:
Now the fun bit , coding it all onto the web!

Lets first off all create a new document , let's call it box.html and add some simple HTML tags to it (I'm presuming you've already uploaded the images onto your host):

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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
}
-->
</style>
</head>
<body>
<div>Hello!</div>
</body>
</html>

I'll just talk you through this code.
The <!DOCTYPE> basically tells the browser what kind of document this is.

The <html> at the top tells us that the HTML is beginning and the </html> tells us that the Html code is ending.

The text in between the <tittle> </tittle> tags is what the document tittle is.

The content-type meta tag tells the broswer what type of encoding the document will be.

Everything inside the <style> </style> tags is CSS which is used to customize the web page.

The text inside the <div> </div> tags is what is going to be shown.

Now that you get the basic drift of HTML lets start coding our box!

Lets change our style sheets to add attributes for the box:

HTML Code:

<!--
body {
  text-align: center;
  background-color: #ffffff;
}
#container {
  width: 390px;
}
#top {
  background: url(top.gif);
  height: 11px;
}
#mid {
  background: url(mid.gif);
}
#bot {
  background: url(bot.gif);
  height: 10px;
}
-->
</style>

Lets study this style sheet , It seems we have given each section of the box an name and a background image.
You may be wondering what the 'body' means, in html/css the name for the every thing you actually see on the screen is called the 'body', the codes we have placed in the body section of the style sheet applies to the whole document , such as the "text-align: center;" which aligns all the text to the center and the "background-color: #ffffff;" which sets the background colour to white.

Hmm you may be wondering why I didn't put in an 'height' in the "mid" section , it's either because i'm very forgetful or very intelligent.
By having now set height the section is free to expand as much as it needs to when something gets added to it, seeing as the background is an 1px high strip it will layer perfectly underneath each other like an jigsaw .

Now lets put the actual box onto the page by using Div tags , We will have an ''Container'' div so we can keep the syntax all nice and clean :].
Add the following inside the <body> </body> tags:

HTML Code:

<div id="container">
  <div id="top"></div>
  <div id="mid">Wow this expands?!?!</div>
  <div id="bot"></div>
</div>

The text in the 'mid' section is what will trigger the div to expand and will let you add unlimited content.

You should have a code similar to this at this stage :

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>
<title>Box</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
  text-align: center;
  background-color: #ffffff;
}
#container {
  width: 390px;
}
#top {
  background: url(top.gif);
  height: 11px;
}
#mid {
  background: url(mid.gif);
}
#bot {
  background: url(bot.gif);
  height: 10px;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="top"></div>
  <div id="mid">Wow this expands?!?!</div>
  <div id="bot"></div>
</div>
</body>
</html>

and should look like:
http://www.shanes.sawhosting.com/tut/1.html

Step 4:
Now it's time to customize it , Lets first of all change the font of the text using CSS

HTML Code:

  font-family: Verdana;
  font-size: 10px;
  font-weight: normal;
  color: #000000;

Now for the positioning , lets add the following to the body section of the stylesheet

HTML Code:

  margin-top: 5px;

So the box isn't touching the top of the page
Lets also add

HTML Code:

  margin: auto;

to the container div so it makes the box float to the middle of the page.
http://www.shanes.sawhosting.com/tut/2.html

Step 5:
Enough with the customizing , lets start with adding content inside.
We could manually type out all the content into the div on the main page or be sneaky and use some PHP!
(Rename your box.html document to box.php for this too work)
First of all create a new document , make sure it's an .txt file, we'll call it content.txt .
Inside this .txt file we will put in all the text we want to be displayed on the main page , I'm feeling musical so i'll put some lyrics in.

You may be wondering how we are going to display an external page onto your main page? Well we'll use something called an PHP include
This is a basic PHP code which basically 'includes' files onto the page
In between the <div id="mid"> </div>
type the following PHP code:

PHP Code:


<?php include ("content.txt") ?>

And this should now display everything in the .txt file

This should now be your final product:

PHP 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> 
<title>Box</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
<!-- 
body { 
  text-align: center; 
  background-color: #ffffff; 
  margin-top: 5px; 
} 
#container { 
  width: 390px; 
  margin: auto; 
  font-family: Verdana; 
  font-size: 10px; 
  font-weight: normal; 
  color: #000000; 
} 
#top { 
  background: url(top.gif); 
  height: 11px; 
} 
#mid { 
  background: url(mid.gif); 
} 
#bot { 
  background: url(bot.gif); 
  height: 10px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="container"> 
  <div id="top"></div> 
  <div id="mid"><?php include ("content.txt")?></div> 
  <div id="bot"></div> 
</div> 
</body> 
</html>

http://www.shanes.sawhosting.com/tut/3.php
The PHP may seem pointless at first but trust me when you have more pages/content to add it will be alot easier to manage.

I know this guide has been badly written but hopefully it will still be helpful to some. If you need help with any bit of this , feel free to post here.

Now it's time for the legal stuff:

This guide has been written by --ss-- off Habboxforum.com and may only be used by Habbox and it's partner sites. Copyrighted --ss-- © 2008 - 2009 The sleek box design is based on the buttons used on HabboxForum valentines skin.

Moved to Web Tutorials by nvrspk4.

**Recursion** · 10-02-2008, 08:08 PM

Its a good guide, I knew how to code expandable tables but this seamed better laid out than whats in my head!

**--ss--** · 10-02-2008, 08:11 PM

Originally Posted by Naru

Its a good guide, I knew how to code expandable tables but this seamed better laid out than whats in my head!

Div's > Tables

Most people know how to code in table (Well they know how to make an program to do it for them) but they don't realise that div's is basically the same but gives an better result

.

VPSwow · 10-02-2008, 08:23 PM

Nice guide

~~dannyisnotamazing~~ · 10-02-2008, 08:25 PM

I'm stuck with a part of it

**--ss--** · 10-02-2008, 08:26 PM

Originally Posted by dannyisamazing

I'm stuck with a part of it

What part do you need help with ?

~~Zedtu~~ · 10-02-2008, 08:50 PM

Nice guide!

I remember back in the day where you couldn't make anything

Your getting pretty dang good!

Agnostic Bear · 10-02-2008, 10:00 PM

Originally Posted by --ss--

Div's > Tables

Most people know how to code in table (Well they know how to make an program to do it for them) but they don't realise that div's is basically the same but gives an better result

.

Tables are for tabular data, divs are for everything else

PaulMacC · 11-02-2008, 12:53 AM

Uh, I didnt get that at all.
Dreamweaver does it, All I do is click the image and click insert DIV.

~~L!nK..~~ · 11-02-2008, 12:55 AM

Originally Posted by Zedtu

Nice guide!

I remember back in the day where you couldn't make anything

Your getting pretty dang good!

I remember that too..lol

Thread: [Guide] How to code expandble divs

Thread Tools

[Guide] How to code expandble divs

Posting Permissions