[Guide] How to code expandble divs

BAVO!

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

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

Quote:

---

Originally Posted by BigMuscle

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.

Quote:

---

Originally Posted by theJOSH

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.

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.

Quote:

---

Originally Posted by Reconix

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

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

Note: They can be smaller than the containers width.

Nice one (:

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

Quote:

---

Originally Posted by Xedon

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

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

Ontopic: Nice tut (:

Quote:

---

Originally Posted by Supermassive

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

Your an actually fitty for this, ty

Quote:

---

Originally Posted by Jackboy

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

Quote:

---

Originally Posted by --ss--

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.

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

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,

Quote:

---

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

---

I would love to see the extended tutorial!

Quote:

---

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

---

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

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?

Quote:

---

Originally Posted by DriftPanzy

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

Quote:

---

Originally Posted by Meti

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

i tested this.. It actualy works, but there are some spaces between every image.. I can't fix that. here's my code:

Quote:

---

<!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">
<!--
body {
text-align: center;
background-color: #FFFFFF;
margin-top: 5px;
}
#container {
width: 228px;
margin: auto;
font-family: Verdana;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
#top {
background: url(images/top.png);
height: 25px;
}
#mid {
background: url(images/middle.png);
}
#bot {
background: url(images/bottom.png);
height: 13px;
}
.style1 {
color: #000000;
font-weight: bold;
}
.style2 {color: #000000}
-->
</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?

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.

Quote:

---

Originally Posted by Meti

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

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

Code:

---


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

---

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

Quote:

---

Originally Posted by Meti

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

Quote:

---

Originally Posted by NEW-START

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.

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

Quote:

---

Originally Posted by --ss--

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

Quote:

---

Originally Posted by DannLea

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

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

Quote:

---

Originally Posted by kk.

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

Great guide mate :) Looking forward to more!!

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

Quote:

---

Originally Posted by Supermassive

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

Quote:

---

Originally Posted by Supermassive

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

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

Quote:

---

Originally Posted by --ss--

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.

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

Quote:

---

Originally Posted by 2fast2kwl

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

HTML Code:

---

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

---

with

HTML Code:

---

#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

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

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

go look

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