PDA

View Full Version : [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> <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> <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> <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> <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:


body {background: #000000 url('Backgroundimagehere') repeat-x fixed bottom left;}
Background just across the left side (y axis)


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


Edited by L&#181;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
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. :D
: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.
Invent
09-05-2007, 10:23 PM
Weird! It's fine in my IE but ***** up in FF :P
:Liam
09-05-2007, 11:02 PM
Yep, people who say it isnt vaild I ran a vaildity check on w3.org and the results where valid so In my eyes its valid.
it doesnt show in ff because they dont except content box resize :(
timROGERS
10-05-2007, 06:27 AM
Yep, people who say it isnt vaild I ran a vaildity check on w3.org and the results where valid so In my eyes its valid.
it doesnt show in ff because they dont except content box resize :(


Firefox does accept content box resize? Every layout I make, I have resizing boxes.
Pawf
10-05-2007, 12:00 PM
it doesnt show in ff because they dont except content box resize :(

What? That's not true at all :S
:Liam
10-05-2007, 01:09 PM
Well I learnt to code from a book called html and css in easy steps by mike mcgrath according to that firefox doest accept content box resizes.
Mentor
10-05-2007, 05:09 PM
My eyes feel like theyve been raped after looking at the horrible code.



<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>
Above is your code.
Heres an expanding <div>stuff in div</div>

That div will expand when you add content, it already is as wide as whatever its contained in (if nothing the page)

To stop a div expanding, you add a width or hight css attribute, that locks the size.
If your going to make an expanding div, the obvious thing to do then is NOT add them. Yet you stupidly do add then, which stopping it from working in a valid browser, and only works in IE because of it useing an INVALID overflow.

If you were useing w3 standards and you wanted an expandable div with a hight that didnt go below a certain amount you would use min-height (not supported by IE)

Secondly, look at your css, its a miracle it works. The ; aint just there for decoration. Also if your going to be valid you shouldn't be changing your Casing. And all Pixel widths should be defined as so.

#div1 {border: solid 1px purple; width: 300px; height: 300px;}

Hence that like the rest of your codes is INVALID, aka NOT W3 compliant. So advertising this as Valid i pretty misleading IMO. Learn css , then go write a tutorial on it.

Aside from that im guessing the concept of a liquid layout is new to you?
:Liam
10-05-2007, 06:10 PM
My eyes feel like theyve been raped after looking at the horrible code.


Above is your code.
Heres an expanding <div>stuff in div</div>

That div will expand when you add content, it already is as wide as whatever its contained in (if nothing the page)

To stop a div expanding, you add a width or hight css attribute, that locks the size.
If your going to make an expanding div, the obvious thing to do then is NOT add them. Yet you stupidly do add then, which stopping it from working in a valid browser, and only works in IE because of it useing an INVALID overflow.

If you were useing w3 standards and you wanted an expandable div with a hight that didnt go below a certain amount you would use min-height (not supported by IE)

Secondly, look at your css, its a miracle it works. The ; aint just there for decoration. Also if your going to be valid you shouldn't be changing your Casing. And all Pixel widths should be defined as so.

#div1 {border: solid 1px purple; width: 300px; height: 300px;}

Hence that like the rest of your codes is INVALID, aka NOT W3 compliant. So advertising this as Valid i pretty misleading IMO. Learn css , then go write a tutorial on it.

Aside from that im guessing the concept of a liquid layout is new to you?
Sorry :| When I tested it on w3.org it said It was valid so I class it as valid? I only added the widths and heights so that it would fit in the width and to set a minimum width/height for when theres no text in it.

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