[Guide] How to code expandble divs [Archive]

View Full Version : [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.
http://uploadpicz.com/images/DKHWJKH.gif

Step 2:
We now "slice" the box into 3 sections , an Header , an footer and a background image for the middle :
http://uploadpicz.com/images/3T2WD77.gif
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:
http://www.shanes.sawhosting.com/tut/top.gif
Background:
http://www.shanes.sawhosting.com/tut/mid.gif
Footer:
http://www.shanes.sawhosting.com/tut/bot.gif

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):

<!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">

</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:


</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:

<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 :

<!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">

</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

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

margin-top: 5px;So the box isn't touching the top of the page
Lets also add

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 include ("content.txt") ?>And this should now display everything in the .txt file

This should now be your final product:

<!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">

</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

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

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 :P

Your getting pretty dang good!

Agnostic Bear

10-02-2008, 10:00 PM

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

Nice guide! :) I remember back in the day where you couldn't make anything :P

Your getting pretty dang good!

I remember that too..lol

Hypertext

11-02-2008, 05:36 AM

The only thing tables are good for anymore is pure data, usually driven by a database, I only ever use them once or twice a page, usually I do everything in divs, usually for the sake of CSS.

G'night

:': Charles Kirk
:': CEO
:': CodeeTech

Lee

11-02-2008, 10:50 AM

This Should Be Stickied... It Could Help Alot Of People!

+rep

Awfy

11-02-2008, 03:04 PM

Div's > Tables ;)
Incorrect. You try and code divs to hold tabular information :P In terms of usability tables are much greater. Although it is 'frowned' upon to use tables for layout purposes, they still offer more in the ways of usage :P

Forge

11-02-2008, 03:24 PM

Can i ask why you have stuck it in here? :s put it in the tutorials part.

--ss--

11-02-2008, 03:46 PM

Can i ask why you have stuck it in here? :s put it in the tutorials part.
I didn't sticky it... An admin did it so I don't think i'm allowed to move it ;).

This guide took me several days to type up :'(

Forge

11-02-2008, 04:13 PM

Oh no im not saying its not good its just its in the wrong forum lol, plus stickies sort of get in the way here

--ss--

11-02-2008, 04:24 PM

Oh no im not saying its not good its just its in the wrong forum lol, plus stickies sort of get in the way here
Well like I said an admin stickied it , Threads cannot be made in the tutorial sections , they have to be moved their if worthy but it seems they thought it would be better stickied so lets leave it the way it is :D.
(Smods are not allowed to edit/change other Smods+ actions ;))

QuickScriptz

11-02-2008, 09:13 PM

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 :).

Nice tutorial, very well layed-out and easy to follow, although I have a couple of things to mention...

1) Shouldn't this be in the Web designing tutorials section instead of stickied in the Web Development forum?

2) For me personally, DIVs tend to cause me a LOT more stress than tables due to silly spacing issues and problems such as that... Also, when it comes to fluid layouts generally I end up using tables somewhere because they won't 'break' if the browser window is resized.

--ss--

11-02-2008, 09:25 PM

Nice tutorial, very well layed-out and easy to follow, although I have a couple of things to mention...

1) Shouldn't this be in the Web designing tutorials section instead of stickied in the Web Development forum?

2) For me personally, DIVs tend to cause me a LOT more stress than tables due to silly spacing issues and problems such as that... Also, when it comes to fluid layouts generally I end up using tables somewhere because they won't 'break' if the browser window is resized.

As already said I did not sticky this , an admin did , I'm guessing they though it would be better of stikied than moved to the sub section as alot of people do ask for tutorials like this ;)

For some weird reason tables confuse me and I really don't understand how people can code big layouts with them (By code I mean actually type it out by scratch instead of getting dream weaver to do it for you)

I don't actually understand what you mean break the browser/ stretch it as it can easily be solved by putting the div's into one main container div , Just like I have done here ;)
http://www.habboxforum.com/showthread.php?t=451601

Zedtu

11-02-2008, 09:27 PM

Its a personal preference really, some people uses tables, some people use divs.

Although tables are meant for "data", not coding layouts.

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

I guess if you wanted to code a layout in tables, your choice, but its not really meant for that :P

QuickScriptz

11-02-2008, 09:48 PM

For some weird reason tables confuse me and I really don't understand how people can code big layouts with them (By code I mean actually type it out by scratch instead of getting dream weaver to do it for you)

Well... it's not as complicated as you might think ;) Generally speaking I use the Tab button a lot so the spacing helps things to make sense. As for the dreamweaver thing I personally can't stand it! I guess the fact that I've been using HTML practically forever helps things too... but like Zedtu said, it is very much a matter of opinion/preference.

I don't actually understand what you mean break the browser/ stretch it as it can easily be solved by putting the div's into one main container div , Just like I have done here ;)
http://www.habboxforum.com/showthread.php?t=451601

Basically what I meant was that for instance if you have a 3 column CSS layout that uses float and margins and you resize the browser, at some point the layout will [generally] 'break'. What I mean by this is that either the layout becomes distorted, or one of the columns jumps down below the other two because it just won't fit anymore... Anyway, just something I've found from some personal experiences.

Robbie

11-02-2008, 09:50 PM

Very nice tut, wd.

Zedtu

11-02-2008, 09:51 PM

Not many people have 500x300 screens though, as time progresses more people have bigger monitors.

If you make the website work in 800x600 that is generally accepted, as that is usually the lowest people have now days, not counting mobile/smartphone screens.

I have a 1280x1024, so most things work for me.

QuickScriptz

11-02-2008, 09:56 PM

--ss--

12-02-2008, 03:37 PM

Well... it's not as complicated as you might think ;) Generally speaking I use the Tab button a lot so the spacing helps things to make sense. As for the dreamweaver thing I personally can't stand it! I guess the fact that I've been using HTML practically forever helps things too... but like Zedtu said, it is very much a matter of opinion/preference.

Basically what I meant was that for instance if you have a 3 column CSS layout that uses float and margins and you resize the browser, at some point the layout will [generally] 'break'. What I mean by this is that either the layout becomes distorted, or one of the columns jumps down below the other two because it just won't fit anymore... Anyway, just something I've found from some personal experiences.

There's an simple fix to this , Use the min-height and min-width attributes? :P
Anyway I really like your portfolio site and the radio panel. :)

Meti

12-02-2008, 03:54 PM

Really nice.. I wanted to +rep you, but i can't atm.. I need to spread some more :D

Chippiewill

12-02-2008, 06:28 PM

And you need rep power, the thought that counts though :P

On topic:

Nice tutorial, it's better stickied here as it's more important than the other tutorials. I didn't know how to do this before so I was using tables :o.

Bojangles

14-02-2008, 03:47 PM

Good tutorial. Very well explained. Most people run into coding thinking it's going to be so hard but really it can be so simple, you just explained it ;)

Panikz

15-02-2008, 04:44 AM

Awesome tut!

Helped me out a lot.

Hypertext

15-02-2008, 05:46 AM

Good practice to include stuff you should either use one 'require', seeing as instead of giving a warning it is fatal which you want, because you want to know when a page is broken etc. or you should use file_get_contents(), like this..

<?php

file_get_contents("content/main.txt");

?>

Its simply better than includes, includes are nice, but not ideal.

Acinuoulation

15-02-2008, 05:49 AM

I just want to know, what the hell is a div..

Chippiewill

15-02-2008, 11:48 AM

It basiclly contains thing in a box and can place things anywhere on the page.

Meti

15-02-2008, 04:10 PM

Really nice guide! It really helps people.. +rep :D

Invent

15-02-2008, 10:55 PM

--ss--

16-02-2008, 01:09 PM

Nice gesture mate :)

I really do find it funny though that the MODs are so anxious to move threads into the Web Coding section and then a thread about coding made by a SUPER MOD gets stickied in the DESIGN section :P
Like I've already said it wasn't me who stickied it ;)

Also can people stop pming asking to code layouts for them as i'm currently busy and have no free time (I'm happy to help with problems and such though) .

dannyisnotamazing

16-02-2008, 01:12 PM

I just want to know, what the hell is a div..
lol ur a div

Edited by --ss-- (Forum Super Moderator): Please do not be rude ;).

--ss--

18-02-2008, 07:46 PM

I just want to know, what the hell is a div..
It's an HTML element which is like a textbox you have on MS word.

http://www.habboxforum.com/showthread.php?t=451601
Free layout which is coded in DIV's ;).

Pazza

21-02-2008, 11:03 PM

--ss--

22-02-2008, 01:37 PM

I understand this now, what I don't understand is how you make it expand on a page. I mean like on CH, they have boxes everywhere, they all expand. So do all the other boxes, so they can't all be done like dat can they.

Could you make a tutorial for multiple div's (that sounds quite funny)
You use the same concept of having an header , middle and footer , you just position several of these boxes over the page.
You do that by using the float tag's to align them to the left or the right of the page then well building up from there.
I could write an tut on this but it's extremely hard to explain :(.

Pazza

22-02-2008, 06:30 PM

You use the same concept of having an header , middle and footer , you just position several of these boxes over the page.
You do that by using the float tag's to align them to the left or the right of the page then well building up from there.
I could write an tut on this but it's extremely hard to explain :(.

Could you :)

On google its from a 50 yr old P.O.V so thats too hard to understand

Mashi

24-02-2008, 03:09 PM

BAVO!

Great tutorial, if this just stops 5 people requesting layouts to be coded it is a sucess!

Meti

29-02-2008, 11:43 AM

theJOSH

29-02-2008, 03:11 PM

I know, this is off topic, but:
I've made a layout, and i'm trying to code it, myself... First, i'm trying with images from the layout, (parts of the layout), and i want them to be like, the navigation left, header up, content in middle, disclaimer at bottom..
How can i do it?

I hope you understand me...

BigMuscle

Does anyone on the forum give a crap?

No? No-one?
Case settled, no-one cares

Edited by mat64 (Forum Moderator): Please don't be rude to other forum members.

Meti

29-02-2008, 03:53 PM

Does anyone on the forum give a crap?

No? No-one?
Case settled, no-one cares

Edited by mat64 (Forum Moderator): Please don't be rude to other forum members.
Well, if you don't care.. How the hell are you sure that anyone else don't care? OMG, get a life, and stop trying to get your post count higher, and just write things that you think! Write things that are true, your selfish ****!

Edited by LucasAge (Forum Super Moderator): Please do not be rude to other members.

Hypertext

13-03-2008, 10:55 PM

--ss--

14-03-2008, 03:34 PM

Yeh, Josh ****, I care, and I'm about to help him? k?

You can use css 'float' property works well. You have to define this to a div class using this

<div class="myclass">mycontent</div>

Your css should be

.myclass {
float:left;
}

by saying left I said that it would go on the left side, other properties are self explanatory.
You will have to add a width element to it and make sure all the floated divs width's add up to the width of the container otherwise it will not work ;).

Hypertext

14-03-2008, 08:48 PM

Yup :), and you should probably have a container to keep it centered if you want that.

Hypertext

23-03-2008, 06:45 PM

Note: They can be smaller than the containers width.

Independent

24-03-2008, 12:29 AM

Nice one (:

I couldn't remember if it was class or id (:

--ss--

24-03-2008, 02:59 PM

Nice one (:

I couldn't remember if it was class or id (:
You use class for styling spans, the id is used to give a div/span a unique id which can be used to manipulate it , either by using css or javascript ;).

For spans you should have it as .name , you use a . instead of # to show it's for a span , and replace name with the name you want the span to have :).

Independent

25-03-2008, 02:00 PM

What happened to --ss--
you got banned so you use --ss--2?

Ontopic: Nice tut (:

--ss--

29-03-2008, 01:31 PM

What happened to --ss--
you got banned so you use --ss--2?

Ontopic: Nice tut (:
I own both account but prefer --ss--2 as I have alot more active friends added on that account (I don't go on Habbo much now anyway).

And thanks :).

Jackboy

31-03-2008, 08:21 PM

Your an actually fitty for this, ty

--ss--

07-04-2008, 01:25 PM

Your an actually fitty for this, ty
I know xox

I'm willing to write up an extended tutorial on how to actually position the boxes with float tags and to make actual layouts but i'm not too sure if there is actually enough demand for it as not many people actually even read this one :(.

today

12-04-2008, 06:06 PM

I know xox

I'm willing to write up an extended tutorial on how to actually position the boxes with float tags and to make actual layouts but i'm not too sure if there is actually enough demand for it as not many people actually even read this one :(.
http://www.habboxforum.com/showthread.php?t=475058

Thats one demand for you.

--ss--

16-04-2008, 12:56 PM

Well I've started writing a guide (Well only the opening paragraph) but it should be finished next week if Icba and finish my little coding jobs :).

PixelWill

17-04-2008, 03:41 PM

I can assure you, there will be demand.. I followed your tutorial very well.. my box goes wierd though, but I'm learning and I'll figure it out.

Thanks,

WeeGiE

18-04-2008, 07:58 PM

Protege

18-04-2008, 08:11 PM

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 :).

I use tables a lot but its easier to do a DIV when you look at it, and its more neater.

Meti

24-04-2008, 06:42 AM

I just tried coding by watching this tutorial.. i couldn't :(

The images won't show up.

Can you give me your MSN, so we can talk further?

--ss--

25-04-2008, 06:24 PM

I use tables a lot but its easier to do a DIV when you look at it, and its more neater.
Yes but tables are made for tabluar data/information , not for placing images lol ;).

I just tried coding by watching this tutorial.. i couldn't :(

The images won't show up.

Can you give me your MSN, so we can talk further?
Sorry I don't use msn :( What exactly is the problem though? You sure you entered the correct url for the image?

Completely random but for people who wanted me to write a full tutorial I started it but won't be finished any time soon due to coursework (Which I should currently be doing) :(.

Meti

07-05-2008, 04:22 PM

i tested this.. It actualy works, but there are some spaces between every image.. I can't fix that. here's my 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>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="mid">
<div align="left"></div>
<div id="bot"></div>
</div>
</body>
</html>What's wrong with that?

NEW-START

07-05-2008, 04:36 PM

To be honest, I still think you shouldn't have stickied this and you should have put it in the tutorial section like everybody else.

Excellent

07-05-2008, 04:51 PM

i tested this.. It actualy works, but there are some spaces between every image.. I can't fix that. here's my code:
What's wrong with that?The middle bit isn't repeating?:S

PixelWill

07-05-2008, 07:33 PM

Yeah, I had the same problem.. use this instead of the current mid section in the CSS.

#mid {
background: url(images/middle.png) repeat-y;
}

It worked for me, so I'm guessing it will for you. :)

--ss--

07-05-2008, 09:13 PM

i tested this.. It actualy works, but there are some spaces between every image.. I can't fix that. here's my code:
What's wrong with that?
Hmm have you got an live version off the code with the images to show me what you mean??

To be honest, I still think you shouldn't have stickied this and you should have put it in the tutorial section like everybody else.
I'm not sure how many times I've already stated this but it wasn't me who stickied the thread, It was forum management who stickied it.

PixelWill

08-05-2008, 09:24 AM

The spaces between the images may be because you might not have changed the image height t the height of your images?

DannLea

10-05-2008, 01:57 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)
( And all else he said )

Well, I tried your Tut, PLUS, I went to your page with the lyrics and copied the source directly, because nothing was working for me.
I used IE, AND I used Firefox, And it just wont work!
This is what I get :
http://www.justupload.net/uploads/55051008problem.bmp

Can someone message me with what I'm doing wrong, or what I forgot, or anything?
All my files are saved in gif.. I've also tried png. But it's still not working..

( Just for reference.. I didn't cut the bottom off when I posted the pic, it turned out that way. )

--ss--

10-05-2008, 02:55 PM

Well, I tried your Tut, PLUS, I went to your page with the lyrics and copied the source directly, because nothing was working for me.
I used IE, AND I used Firefox, And it just wont work!
This is what I get :
http://www.justupload.net/uploads/55051008problem.bmp

Can someone message me with what I'm doing wrong, or what I forgot, or anything?
All my files are saved in gif.. I've also tried png. But it's still not working..

( Just for reference.. I didn't cut the bottom off when I posted the pic, it turned out that way. )
You have to change the width atributes I put in the CSS for my page to the attributes off your image lol ;).

kk.

10-05-2008, 02:58 PM

and to add to what SS has said, if you shove background-repeat: no-repeat; in the CSS divs it shoudlnt happen?

havnt coded for about a month or two so i think its that :P

--ss--

11-05-2008, 06:50 PM

and to add to what SS has said, if you shove background-repeat: no-repeat; in the CSS divs it shoudlnt happen?

havnt coded for about a month or two so i think its that :P
I believe if they did do that on the middle div then it'll technically stop it from expanding fully, they'd have to use background-repeat: repeat-y; to make it just repeat horizontally ;).

DannLea , if you are still having problems post the actual images and i'll edit the stylesheet for you ;).

Fehm

14-05-2008, 05:21 PM

Great guide mate :) Looking forward to more!!

Independent

23-05-2008, 12:57 PM

I hate CSS :P

I only use it for font styling, CSS may be a lot more web 2.0 in the coding, but tables do the exact same job :P

kk.

23-05-2008, 01:40 PM

I hate CSS :P

I only use it for font styling, CSS may be a lot more web 2.0 in the coding, but tables do the exact same job :P
its not that CSS is web 2.0.. Its the fact that it is much easier to readand follow and is much higher up the web standard. It works well for all browsers and is A LOT easier to edit than tables. You can structure it so its easy to follow ad gives you more experience for what companies would want if you want to be a web designer/ICT person

--ss--

23-05-2008, 03:19 PM

I hate CSS :P

I only use it for font styling, CSS may be a lot more web 2.0 in the coding, but tables do the exact same job very poorly :P
I corrected your statement for you :P

Tables were created to display information in , not to hold images together to build a site. Tables are much much more harder to understand for someone trying to edit the code aswell as much messier syntax wise and most of the times they take forever to load. Also they look very tacky on larger sites when you scroll the page ;).

Decode

23-05-2008, 03:22 PM

Realy good tut, it will help people who want to learn css alot. :)

I correct your statement for you :P

Tables were created to display information in , not to hold images together to build a site. Tables are much much more harder to understand for someone trying to edit the code aswell as much messier syntax wise and most of the times they take forever to load. Also they look very tacky on larger sites when you scroll the page ;).
lol, i remember when i used to use tables on my small habbo fansite. The code got realy messy. That was the only reason i learnt css.

Jack!

31-05-2008, 02:36 PM

i cant get it to work look it dosent show a thing

http://graphicsx.ulmb.com/box.php

its just a white page ..plz help

Decode

31-05-2008, 02:58 PM

i cant get it to work look it dosent show a thing

http://graphicsx.ulmb.com/box.php

its just a white page ..plz help
Replace

#top {
background: url(top.PNG);
height: 11px;
}
#mid {
background: url(mid.PNG);
}
#bot {
background: url(bot.PNG);
height: 10px;with

#top {
background: url(top.PNG);
height: 11px;
width: 100%;
}
#mid {
background: url(mid.PNG);
width: 100%;
}
#bot {
background: url(bot.PNG);
height: 10px;
width: 100%;
}

Oh and you left the <body> tag open :P

Jack!

31-05-2008, 03:02 PM

thanks its just delete everything and left this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

* edit*

ive fixed know but i wish to do this <body background= ''background.png''>

but it wont work ..plz help

Jack!

31-05-2008, 03:19 PM

ive fixed it and tried to add cutenews to it but this happens

go look

http://graphicsx.ulmb.com/index.php

--ss--

31-05-2008, 06:49 PM

ive fixed it and tried to add cutenews to it but this happens

go look

http://graphicsx.ulmb.com/index.php
Sorry but I don't exactly understand , what would you like to be changed/done on the page?

Independent

05-06-2008, 09:48 AM

You've inserted a table into the div, that just ruins it. (N)

Decode

05-06-2008, 04:12 PM

You've inserted a table into the div, that just ruins it. (N)
I dont see a table?

Jack!

05-06-2008, 04:22 PM

well i took it out ..i wish to insert a cutenews script thing but it messes everything up please help

Decode

05-06-2008, 07:06 PM

well i took it out ..i wish to insert a cutenews script thing but it messes everything up please help
Just insert the php into the middle of the div.

<div id="container">
<div id="top"></div>
<div id="mid">
<?php
cutenews php goes here
?>
</div>
<div id="bot"></div>
</div>

Independent

15-06-2008, 09:13 AM

Just insert the php into the middle of the div.

<div id="container">
<div id="top"></div>
<div id="mid">
<?php
cutenews php goes here
?>
</div>
<div id="bot"></div>
</div>
Don't forget the CSS ;)

Zehro

02-07-2008, 07:00 PM

Amazing thread Shane. I didn't have a clue how to do coding until I read this, must have taken a long time and no reward, just like your moderating eh.

Anyway, hopefully you'll get paid work soon, you're better than other people I've seen and they're raking in the galleons. :)

Cushioned

06-07-2008, 10:57 AM

Wow. Truly an AMAZING guide.

Thanks!

--ss--

13-07-2008, 12:19 PM

Oh wow , almost 55,000 views and yet there's only 90 replies? :(

today

14-07-2008, 12:59 PM

Wheres this other tutorial u said u would make!! =]

--ss--

14-07-2008, 06:58 PM

Wheres this other tutorial u said u would make!! =]
I did write most off it up but I gave up with it as Icba with it and tbh I would be wasting my time writing up an extremely long tutorial which I will gain nothing out off and other people will most likely start making money from what I teach them so it's kinda pointless for me :(

HabboDeck

31-07-2008, 02:30 PM

great tut thanks :)

--ss--

05-08-2008, 01:02 PM

Wow, close enough to 55,000 thread views, didn't think the guide will get this many views ^^.

Florx

05-08-2008, 01:04 PM

It is sticked...

--ss--

07-08-2008, 12:05 PM

It's been moved now :'(

Meti

15-08-2008, 01:44 PM

I don't think it's good when it is in this section. It is a tutorial, but no-one will notice this int his section :(

Stepheen

15-08-2008, 01:54 PM

I don't think it's good when it is in this section. It is a tutorial, but no-one will notice this int his section :(
Well that's there own fault but this sub-forum has been made for a reason you dong.

Edited by Meti (Forum Moderator): Please don't be rude.

--ss--

15-08-2008, 01:57 PM

Well that's there own fault but this sub-forum has been made for a reason you dong.
What's my fault?

This thread has been stickied in the D&D section since the day I made this thread, it only got moved here recently.

Cushioned

15-08-2008, 02:50 PM

Well that's there own fault but this sub-forum has been made for a reason you dong.

Don't call meti or --ss-- a dong, as they have more experience, and talent then you will ever have.
[I'm not saying I at all compare to them :)]

Along with that, if you are going to try "flaming" someone, use correct spelling. It wouldn't be "that's there own fault.." it would be "that's their own fault". Two totally different words.

Stepheen

15-08-2008, 03:01 PM

What's my fault?

This thread has been stickied in the D&D section since the day I made this thread, it only got moved here recently.
Nothings your fault, I was talking about the people that don't search before posting a thread. (aka Meti :])

Don't call meti or --ss-- a dong, as they have more experience, and talent then you will ever have.
[I'm not saying I at all compare to them :)]

Along with that, if you are going to try "flaming" someone, use correct spelling. It wouldn't be "that's there own fault.." it would be "that's their own fault". Two totally different words.
Maybe not as -ss- but I know for a fact i'm WAYYY better than Meti. Also, i wasn't flaming, i was implying so you're the dong here :]

Thai-Man-Land

18-08-2008, 05:09 PM

Thai-Man-Land

18-08-2008, 05:26 PM

Sorry - out of edit time
Also

If I want to make an entire layout using this, would I just use like
<div align="left" id="container">
<div id="header"></div>
<div id="body"><?php include ("test.txt") ?> </div>
<div id="footer"></div></div>
<div align="centre" id="main">
<div id="header"></div>
<div id="body"><?php include ("test.txt") ?> </div>
<div id="footer"></div></div>
<div align="right" id="container2">
<div id="header"></div>
<div id="body"><?php include ("test.txt") ?> </div>
<div id="footer"></div></div>

--ss--

18-08-2008, 08:10 PM

My box is aligned to the left of my page instead of the center.

I've used this as my CSS:

<style type="text/css">

</style>Does anyone know why?
Add the following to your container div:

margin: auto;

To force it to the centre off the page.

And for your secound question, yes but there's a bit more to it than that, you'll have to use float tags to position things to left or right off the page ;).

Thai-Man-Land

18-08-2008, 08:32 PM

When I get some cash I shall pay you to write me atut on this ;)

Calon

20-08-2008, 02:11 PM

Nothings your fault, I was talking about the people that don't search before posting a thread. (aka Meti :])

Maybe not as -ss- but I know for a fact i'm WAYYY better than Meti. Also, i wasn't flaming, i was implying so you're the dong here :]
Why don't you shut up, acting like you're better than someone proves how crap you are.

Edited by Meti (Forum Moderator): Please don't be rude.

Stepheen

20-08-2008, 04:26 PM

Why don't you shut up, acting like you're better than someone proves how crap you are.
But I am better than Meti. LMAO.

Pazza

23-08-2008, 12:34 PM

I need help :(

I can do it fine, but I have a speech bubble, and the bot part is obviously wider, so wot would the code be if the bottom is wider, top and mid are same size

Meti

24-08-2008, 08:56 AM

Maybe not as -ss- but I know for a fact i'm WAYYY better than Meti. Also, i wasn't flaming, i was implying so you're the dong here :]
What can you do that is better than what I do?
I've never seen designs from you. Never seen codings from you. I've just read how stupid you are, and you're posting pointless on the forum. You can't say that you're better than me, when I've never seen anything from you? :S

But I am better than Meti. LMAO.
Why won't you show us anything you've done then?

Excellent1

24-08-2008, 10:57 AM

What can you do that is better than what I do?
I've never seen designs from you. Never seen codings from you. I've just read how stupid you are, and you're posting pointless on the forum. You can't say that you're better than me, when I've never seen anything from you? :S

Why won't you show us anything you've done then?You can't even position divs so don't talk about whos the better coder when you can only code a banner.

Stepheen

24-08-2008, 10:58 AM

What can you do that is better than what I do?
I've never seen designs from you. Never seen codings from you. I've just read how stupid you are, and you're posting pointless on the forum. You can't say that you're better than me, when I've never seen anything from you? :S

Why won't you show us anything you've done then?
*Removed*

Edited by ,Jess, (Forum Super Moderator): Please do not be rude or avoid the forum filter.

Excellent1

24-08-2008, 11:05 AM

I don't need to prove anything to you, and half of your posts are pointless so please **** and gtfoYou can't talk about anything either, you're better than meti but not by much.

Kevin

24-08-2008, 11:08 AM

Great guide, following it was quite simple :] worked great too!

-Kevin

Calon

31-08-2008, 02:21 PM

Thanks, this guide was amazing.

Meti

31-08-2008, 04:28 PM

You can't even position divs so don't talk about whos the better coder when you can only code a banner.
I can do whole div layouts. Watch my latest coding. The Valid HTML and CSS Habbo Layout I gave out for free (Designing & Development)

Really easy, just add floats. If you want left, you add float: left;
etc etc.

Banners are also easy.

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

can't be easier ;)

I don't need to prove anything to you, and half of your posts are pointless so please **** and gtfo
How come I don't get infracted/cautioned like you..?

Lee

02-09-2008, 09:28 AM

Brilliant tut!

--ss--

05-10-2008, 12:35 PM

I've given up with coding layouts now, too boring and takes too long without me benefiting so i'm gunna move onto something else.
I'm happy to write another tutorial on anything else but i'm not too sure on what to do it on, so if you've got a specific request then post it :).

Meti

09-10-2008, 06:09 PM

Why quit coding?
You don't have to do it free..
Take pay :)

--ss--

09-10-2008, 06:16 PM

Too boring, cba :P.

Meti

10-10-2008, 02:19 PM

boring?
You're one of the best coders on this forum :P

If you don't want to code, take away the coding experience from your head, and fill it in to other peoples heads :P

iUnknown

29-10-2008, 01:10 AM

Earthquake

30-10-2008, 03:08 AM

I don't get HTML :(! I'm fine with the rest!

--ss--

31-10-2008, 01:12 PM

Javascript

Woo.
Javascript is far too easy and based around common sence, no point writing a guide on Javascript as there are far too many professional ones around so there really is no point. If you need help with certain function/tasks tell me and i'll get you well written guides on them, if you need beginner help try tiztag / w3schools ;)

I don't get HTML :(! I'm fine with the rest!
Everything on the web is based around HTML, to be able to use any other sort of coding language you need to atleast know basic HTML.

wazup999

07-11-2008, 02:11 AM

--ss--

07-11-2008, 07:49 PM

O.o I understand how to code with divs it's just I find it messy lol.

I've been coding with tables since I'm like 12 lol so bout 3-4 years :/ Still have a lot to learn lol. I didn't take coding as serious as I've started taking it now. So I'm gonna try divs and I hope I'll like them soon lol.

Nice tut by the way, helped me understand a bit more.
Waz ;]
Glad you liked it, if you want to be serious about web development you will eventually have to learn how to code in divs, seeing as the time goes by coding techniques and standards change not many people accept tables as a coding method any more and is shoned upon ;).

iDenning

07-11-2008, 10:35 PM

I followed it all with my own images and it went messy ;D mybad.
Brilliant tut tho!

lSnowie

08-11-2008, 09:31 PM

I followed it all with my own images and it went messy ;D mybad.
Brilliant tut tho!

Did you remember to change the image sizes? :P

--ss--

09-11-2008, 04:45 PM

Did you remember to change the image sizes? :P
Get out of my thread, I don't want you ripping it :eusa_naug

Black_Apalachi

09-11-2008, 10:50 PM

geez don't you two start again, you already got my thread closed before :rolleyes:.

Anyway, thanks for this, helped me understand it all a bit better :).
I was just wondering about this part:

Lets also add
HTML Code:
margin: auto;
to the container div so it makes the box float to the middle of the page.

Would you also do this if you wanted to make the whole layout central rather than just one box?

--ss--

10-11-2008, 03:55 PM

geez don't you two start again, you already got my thread closed before :rolleyes:.

Anyway, thanks for this, helped me understand it all a bit better :).
I was just wondering about this part:

Would you also do this if you wanted to make the whole layout central rather than just one box?
Blame his parents for bringing him into existence :rolleyes:

You'll have to add margin: auto; to your main container div, this will then move the box to the center of the page on the x axis and everything inside it will be placed inside that centeral div,just like the example ;).

Edited by MattGarner (Forum Super Moderator): Please do not be rude towards a forum member.

lSnowie

10-11-2008, 04:10 PM

Blame his parents for bringing him into existence :rolleyes:

You'll have to add margin: auto; to your main container div, this will then move the box to the center of the page on the x axis and everything inside it will be placed inside that centeral div,just like the example ;).

Oh you so insulted me, I take everything in that you say, your words mean alot to me! :rolleyes:

Edited by MattGarner (Forum Super Moderator): Please do not post to cause arguments.

--ss--

10-11-2008, 07:20 PM

Oh you so insulted me, I take everything in that you say, your words mean alot to me! :rolleyes:
Your use of sarcasm fails, please go stab yourself.

Edited by MattGarner (Forum Super Moderator): Please do not be rude towards forum members.

lSnowie

10-11-2008, 08:03 PM

Your use of sarcasm fails, please go stab yourself.

OK SIR! -STABZ-

Edited by MattGarner (Forum Super Moderator): Please do not post to cause arguments.

--ss--

10-11-2008, 08:40 PM

OK SIR! -STABZ-

Edited by MattGarner (Forum Super Moderator): Please do not post to cause arguments.
Oh darn, you didn't die :(.

@ MattGarner, you may want to do the correct thing and ban the outcast who doesn't belong here and is lowering the standards of the forum and my thread. You not doing your job correctly is provoking me even further to be ruder to him seeing he is a parasite that doesn't belong here, if you won't do anything about it then I shall.

*Cri* I think he may have taken a screenie of my guide and posted it else where claiming he made it :eusa_whis.

--ss--

14-01-2009, 07:28 PM

Does anyone actually read this anymore?

Thinking about going back to doing something website related as I haven't done any coding in almost a year, not too sure what to do though. Any suggestions?

Pazza

21-01-2009, 07:42 PM

Does anyone actually read this anymore?

Thinking about going back to doing something website related as I haven't done any coding in almost a year, not too sure what to do though. Any suggestions?

Can u do how to code a full layout, cos ive tried one with 3 columns, but when middle expands so does everythin else etc., and meti's isnt helpful at all =[

Kieran

19-02-2009, 11:26 AM

I'll write a guide on it. I'm fairly proficient in coding valid xHTML and CSS :) Its probaby going to take a few days

Pazza

22-02-2009, 12:31 PM

I'll write a guide on it. I'm fairly proficient in coding valid xHTML and CSS :) Its probaby going to take a few days

Yay!!!!!

Kupen

03-03-2009, 07:29 AM

the php part doesn't work for me it doesn't display the .txt

<!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">

</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>

Cushioned

04-03-2009, 12:42 AM

Kupen

04-03-2009, 08:04 AM

i have done tht already

Cushioned

05-03-2009, 05:44 AM

<?php include ("content.txt") ?>
Well there's the error

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

not

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

I do believe :)

Recursion

05-03-2009, 07:47 AM

I've never used includes...

Cushioned

06-03-2009, 03:38 AM

I've never used includes...

Then I must be mistaken :P
IDK PHP, was just a thought ;)

--ss--

10-03-2009, 04:20 PM

Well there's the error

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

not

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

I do believe :)

Nope it's "Include" as it currently is in the code.

You sure you have a file named "content.txt" in the same correctly directory?

Cushioned

11-03-2009, 02:49 AM

Nope it's "Include" as it currently is in the code.

You sure you have a file named "content.txt" in the same correctly directory?

Oh haha. My mistake :P
Noob to PHP :D

wsg14

11-03-2009, 02:53 AM

Try that.

<!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">

</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="mid"><?php $midcontent = file_get_contents('content.txt'); echo $midcontent; ?></div>
<div id="bot"></div>
</div>
</body>
</html>

-leestrong-

11-05-2009, 03:43 PM

Very nice indeed, I'll be using this!

- Lee

mattywatson07

17-05-2009, 10:02 AM

Thanks for this, it will really help as I am just a learner at coding :)
--
For those complaining, he has already used to code so it does work.

lRhyss

10-08-2009, 02:29 PM

Lmao at happend to meh

<!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">

</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

Ive done that but when it does it the images e.g. top mid bot dont show there called the same as they are on the coding. why :S

--ss--

10-08-2009, 02:35 PM

Lmao at happend to meh

<!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">

</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/tutIve done that but when it does it the images e.g. top mid bot dont show there called the same as they are on the coding. why :S
The images will have to be in the same folder as the .php document as the above

lRhyss

10-08-2009, 06:41 PM

They Are

they do this

www.clubpixels.co.uk/hr

xPanel

23-10-2010, 10:40 PM

My boxes wont expand for some reason...

Ive done everything rite, It expands in beginning but when im editing the css, it fails.

--ss--

31-10-2010, 09:36 PM

My boxes wont expand for some reason...

Ive done everything rite, It expands in beginning but when im editing the css, it fails.
Well what part are you editing?

skooledmepls

30-06-2011, 03:50 PM

The first 2 images are broken. :3

Jack!

01-07-2011, 01:47 PM

The first 2 images are broken. :3

Have you not seen how old this thread is.

skooledmepls

01-07-2011, 03:14 PM

Have you not seen how old this thread is.

I have, but maybe someone could post a new image as a reply to make it clear for others. Or a moderator could edit the origionil post.

Mark

01-07-2011, 04:14 PM

I have, but maybe someone could post a new image as a reply to make it clear for others. Or a moderator could edit the origionil post.

It's against the rules, you can't justify it...

Edited by Infectious (Forum Super Moderator): Please leave the moderating to the moderators!

skooledmepls

01-07-2011, 07:55 PM

It's against the rules, you can't justify it...

Edited by Infectious (Forum Super Moderator): Please leave the moderating to the moderators!

Against the rules to post a new image to help explain a good quality tutorial?

Adam

01-07-2011, 08:01 PM

It's not against the rules as it's an open stickied thread...

Anyway, all divs are expandable you just have to use them right. I haven't touched coding for years so my knowledge is little and rusty but have a check on w3schools and you'll pick up some things :)

--ss--

02-07-2011, 10:06 AM

If it helps the first image is the same pink box drank in paint, the second image is it split up:
http://www.shanes.sawhosting.com/tut/box.png
http://www.shanes.sawhosting.com/tut/box%20split.png

I would of thought images that were hosted directly on the forum servers would never die O.o

Trinity

02-07-2011, 10:10 AM

I would of thought images that were hosted directly on the forum servers would never die O.o

The images weren't directly on the forum servers, they were on UploadPicz which is owned by Habbox or whatever, but I think it got shut down.

--ss--

02-07-2011, 10:12 AM

The images weren't directly on the forum servers, they were on UploadPicz which is owned by Habbox or whatever, but I think it got shut down.
Uploadpicz was hosted on the same servers as the forum though wasn't it?

Trinity

02-07-2011, 10:15 AM

Uploadpicz was hosted on the same servers as the forum though wasn't it?

Ah, possibly, I don't know much about UploadPicz. I vaguely remember hearing about big problems with it though, and I *think* they lost a bunch of the images at one point (could have been a different image host though), so maybe that's why the original images have gone.

Adam

03-07-2011, 06:43 PM

UploadPicz was used for the forum then it got big and cost Hx too much money therefore they shut it and all the images with it.

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