[Tut] Basic Css/Div Expandables.

:Liam · 08-05-2007, 11:42 AM

A basic guide to css/div expandables.

Lets make an expanding square.

Part one: Telling the css What to do and using a div Id.

HTML Code:

<html> <style type="text/css"> #div1 {border: solid 1 px purple width: 300; Height: 300;} </style>
<div id="div1">This box will be purple and will expand when you add more text :):)</div>

You can format this by changing it from an expanding box to a box with a scroll bar instead.

Using A scroll bar.

HTML Code:

<html> <style type="text/css"> #div1 {border: solid 1 px purple width: 300; Height: 300; Overflow: scroll;} </style>
<div id="div1">This box will be purple and will have a scroll bar when you add more text.</div>

Adding a custom content box.
First you need to slice the box into 3 parts. A header, a Footer and a middle. You also need the pixel size of each slice.
For my box the sizes will be:
Header 50x10 Image name will be Head.
content 50x50 Image name will be content.
footer 50x10 image name will be foot.

The code.

HTML Code:

<html> <style type="text/css"> 

#div1head {background-image: url(/images/head.png); width: 50; Height: 10;  overflow: hidden; }  

#div1 {background-image: url(/images/content.png); 50; Height: 50; }

 #div1base {background-image: url(/images/foot.png); width: 50; Height: 10; overflow: hidden;}</style>

<div id="div1head">Head of content box</div>
<div id="div1">This box will be your custom imageand will expand when you add more text.</div>
<div id="div1base">base of content box</div>
</html>

Creating 2 content box's and having them on opposite sides.
Again you need to slice the content box's into three parts.
For my box the sizes will be:
Header 50x10 Image name will be Head.
content 50x50 Image name will be content.
footer 50x10 image name will be foot.

I will have div 2 on the right and div 1 on the left, heres how to do it.

The code.

HTML Code:

<html> <style type="text/css"> 

#div1head {background-image: url(/images/head.png); width: 50; Height: 10;  overflow: hidden; }  

#div1 {background-image: url(/images/content.png); 50; Height: 50; }

 #div1base {background-image: url(/images/foot.png); width: 50; Height: 10; overflow: hidden;}

#div2head {background-image: url(/images/head.png); width: 50; Height: 10;  overflow: hidden; float: right;}  
 
 #div2 {background-image: url(/images/content.png); 50; Height: 50;float: right; }
 
  #div2base {background-image: url(/images/foot.png); width: 50; Height: 10; overflow: hidden;float: right;}</style>

<div id="div1head">Head of content box</div>
<div id="div2head">Head of content box right </div>
<div id="div1">This box will be your custom imageand will expand when you add more text.</div>
<div id="div2"> This box will be you custom image and be on the right. </div>

<div id="div1base">base of content box</div>
<div id="div2base">base of content right</div>


</html>

You can then start adding more to the css like backgrounds. Add theese to the top of your css part.

body{background-image: url(BackgroundImageHere) }

Background just across the bottom of the page with a colour on the rest of the page:

HTML Code:

body {background: #000000 url('Backgroundimagehere') repeat-x fixed bottom left;}

Background just across the left side (y axis)

HTML Code:

body {background: #000000 url('Backgroundimagehere') repeat-y;}

Edited by Lµke (Forum Moderator): Thread Moved from Website Designing. Please post in the correct section next time, Thanks .

:Liam · 09-05-2007, 02:15 PM

I forgot to mention that:
- This only works in Internet explorer.
- This is only a basic code
- This is valid
- Feel free to use this code

Luckyrare · 09-05-2007, 03:01 PM

If something doesnt work on IE or Firefox (either way) it isnt really valid, as I would class it.

Nice start but it would be better to comment on each css item, telling them what it does.

~~RNelson~~ · 09-05-2007, 04:20 PM

Great design, move to tutorials please.

:Liam · 09-05-2007, 04:36 PM

I didnt know where to post it, as I couldnt post in the tutorial section.

Tomm · 09-05-2007, 04:43 PM

Originally Posted by :Liam

I forgot to mention that:
- This only works in Internet explorer.
- This is only a basic code
- This is valid
- Feel free to use this code

Just made me dislike this tutorial.. other that that its good.

Florx · 09-05-2007, 04:50 PM

Great tutorial but useless for me because I use firefox all the time

Mr.OSH · 09-05-2007, 05:11 PM

Nice tutorial Liam. Well Done + rep.

:Liam · 09-05-2007, 09:27 PM

sorry about it not working in Ie but it mucks up when you try it

example. www.hab-towers.com

Splinter · 09-05-2007, 09:47 PM

- This only works in Internet explorer.

Then it isnt valid since IE dosent exactly conform to W3C standards. If it works in firefox then the code is valid but may have to be tweaked for viewing in IE.

Basically learn to cross-browser code.

Thread: [Tut] Basic Css/Div Expandables.

Thread Tools

[Tut] Basic Css/Div Expandables.

Posting Permissions