Divs. I need help

[undacuvabruva]

I need a tutorial on how to use divs on my site.
It's really frusurating me.
Can anyone help?

[abrie]

You might already know this, but here's what i know about divs:

Its a tig that stands for 'division'.

So for example say you want to put some special text on your site you could put it in div tags and add any special attributes to that tag.

Example:

<div> Just some text </div> ---------I dont think that does anything. Just the plain text appears



<div style="color:#080808; text-decoration:none; font-face:bold"> Just some text</div> ---------------------- The text is now the color that was specified, not u nderlined, and bold.


So you just use the div tags to add some special effects to whatever is inbetween the tags.

here is some more on it but its not much... link (http://www.w3schools.com/tags/tag_div.asp)

HOpe that helps ;)

[undacuvabruva]

thx arbie.
but i already know how to use them.
I just need to know how to align them
with margins and stuff.
Theres too many properties.
for specific ones that i need to know
position: absolute; (and all the other values)
top:
and
left:
I need help

[bigface0]

Are you using CSS ? I'm guessing so, because you metioned position: and left: and top:

in css you have to give the div an id and/or class.
<div id="booger"></div> <div id="booger" class="snot"></div>
<div class="snot"></div>

then in css use #booger to designate an id and . to designate a class.
and to position it looks like this.
#booger{
position: absolute;
top: 10px;
left: 10px;
padding: 10px 5px 2px 60px; /* in order: Top, right, bottom, left. or just 0px for all sides */
margin: 0px; /* same as padding*/
}
or
#booger{
position: relative;
top: 10px;
left: 10px;
}

You can also put an absolute position inside of a relative position without left and top attributes, to make the absolute position relative to the relative position. Sounds weird but this way you can place a image or something inside a div and have it use the outside div as the borders it counts from and not the edge of the browser window.

Hope this helps!

[undacuvabruva]

What does ablsolue and relative position mean?
And I'm trying to turn my Adobe Photoshop Slices into divs.
Anything helps.
I know how to make divs i just need help on lining them all up

[xangelo]

Absolute position means that you specify exactly where you wish the items withing the tags to show up. For example


<div style="position:absolute; top:10px; left:10px;">Text</div>

Will position the "Text" 10 pixels from the top and 10 pixels from the left. If you add the z-index to it you can overlap multiple Div's and have different ones displayed from top to bottom.

Relative Position:If you add a relatively positioned layer in the middle of the page, then the position will be calculated from that exact spot in the middle of your page where it was added.
Taken from www.echoecho.com/css.htm

Hope that helped...

[reid315]

ahh... aligning divs through tables... that's too complicated. Unless you are a master at floating divs, then I suggest you stick to tables, unless you are trying to align just 2 or 3 divs. anymore than that I can't help. Too compliated. how many are you using?

[bigface0]

Your question prompted me to write a tutorial. It goes over some basic stuff so you can ignore that part but then it gets into aligning stuff.

Web Crash Css Positioning (http://bigface.hostmatrix.org/csspositioning.php)

For a sliced image you would place each part of the image in a div and then you align each individual image with absolute positioning. Say you start your first image 10 pixels down and 10 pixels left. and your image is 100 by 200 pixels. Then the image that goes next to it would be 10 px down and 210px left. Then the one that goes below it would be 110px down and 10px left. And so forth.

Or you can place all the images that go across next to each other in one div and then on the next row down place all the images that go there and the same on the next row. Then you only have to position one div per row of images. Like this:

<div id="one"><img><img><img></div>
<div id="two"><img><img><img></div>
<div id="three"><img><img><img></div>

Then the left css position would all be the same and only the top or vertical dimension would change.

It's basically simple math and trial and error.