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. Ive gone a bit complicated and made mine on photoshop with a shadow, but u really dont have to.
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. (this is not needed but just a tip eh?)
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. if not go out and get a free domain/host at 110mb.com):
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:
Code:
<!--
body {
text-align: center;
background-color: #ffffff;
}
#container {
width: 390px;
}
#top {
background: url(images/top.gif);
height: 11px;
}
#mid {
background: url(images/mid.gif);
}
#bot {
background: url(images/bot.gif);
height: 10px;
}
-->
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:
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 :
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: 452px;
}
#top {
background: url(images/top.gif);
height: 25px;
}
#mid {
background: url(images/mid.gif);
}
#bot {
background: url(images/bot.gif);
height: 31px;
}
-->
</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.grafgaf.co.uk/tuts/Expandbox/tut1.html
Step 4:
Now it's time to customize it , Lets first of all change the font of the text using CSS.
This all goes in the Body part of the css
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 stylesheetCode:
margin-top: 5px;
So the box isn't touching the top of the pageLets also add
Code:
margin: auto;
to the container div so it makes the box float to the middle of the page.The turnout?
http://www.grafgaf.co.uk/tuts/Expandbox/tut2.html
Any Q's ask
I may do an extension on how to do 2 columns and then maybe onto how to do 3