View Full Version : Blog Layout


Pippin_Took_me
01-15-2004, 02:58 AM
I don't understand this tutorial, it's really hard, could someone give me another tutorial or explain this one please?


http://www.daydreamgraphics.com/tutorials/list.php?action=list&cat_id=7&id=26

MaGiCSuN
01-15-2004, 08:12 PM
what part don't you understand? because the first few parts are a bit copy and pasting...

Love,
Mirna

curry_hurry
01-16-2004, 02:04 AM
I don't understand this tutorial, it's really hard, could someone give me another tutorial or explain this one please?


http://www.daydreamgraphics.com/tutorials/list.php?action=list&cat_id=7&id=26

I'm notoriously bad at explaining things, but I'll try this the best I can. :)
A div layer is, basically, this little block that you can put on your page that has content in it. Kind of like an iframe, but it's not a separate page.
So you have this image: http://www.farbeitfromme.com/pippinlayout.gif
We want to put it in a div layer, so we do this (all this is http://www.lissaexplains.com/html7.shtml there, the wunnerful Lissa wrote it):

<div id=layer1 style="position:absolute; top:0; left:0; width:826; height:636;

z-index:1; padding:0px; border: #000000 0px solid; background-color:#ffffff;

background-image:url(pippinlayout.gif); layer-background-image:url

(pippinlayout.gif);">
</div>

There's no real content in the div layer, just a background image, so you don't have to put anything in the actual layer. I suppose you could just absolute position the picture without the div layer (that would probably be easier), but this is the way I've always done it, so. . .

You want the blog itself to go in the rectangle under the picture, so you figure out A)how far from the top and how far from the left the div layer's going to start (basically, the coordinates of the top left corner of where you want your blog to be) and B) how wide and how tall it'll be. So this is the div layer you'd use:

<div id=layer2 style="position:absolute; top:15; left:366; width:702;

height:238; z-index:2; padding:5px; border: #000000 0px solid; background-

color:#ffffff;" overflow:auto>

This is where the blog will be

</div>

You wan tthe div id and the z-index to be 2 'cause it's the second div layer you're working with (that ensures that it'll go on top of the image and not the other way around), overflow:auto gives the div layer a scrollbar if your text goes on for longer than your div layer is long, you don't want a background image in this example, and border, padding, and background color is all up to you.

So this is what I ended up with http://www.farbeitfromme.com/pippinlayout.html

Hope that was helpful!

Sinem
01-16-2004, 08:36 PM
I think this was not bad explained...
There is a tutorail on coding a layout on http://www.jassy-girl.com/codinglayouts.php
Maybe that helps you as well?

:hug:
Sinem

Pippin_Took_me
01-28-2004, 12:36 AM
Thanks guys!!! this really helped!