CSS Layout Design

From: Wayne (SCOREZ2000)19 Sep 2006 11:00
To: ALL1 of 20

I'm looking for a really simple online tutorial for learning CSS Layout Design. Something that takes you through it step by step.
Does anyone by any chance know if any good links? I've googled a bit but haven't found exactly what I'm after.

From: Peter (BOUGHTONP)19 Sep 2006 11:10
To: Wayne (SCOREZ2000) 2 of 20
Do you know CSS and just want to learn how to use the layout elements, or are you a CSS novice?
From: Wayne (SCOREZ2000)19 Sep 2006 14:36
To: Peter (BOUGHTONP) 3 of 20
I know the very basics of CSS. For example, how to create a css file, link to it, and set the colour of the back ground and the size and font of the text. But actually created the layout of a page with CSS is completely beyond my current skillset.
From: Peter (BOUGHTONP)19 Sep 2006 14:50
To: Wayne (SCOREZ2000) 4 of 20
Ok, well for a simple list of the relevant attributes, check out the Dimension, Classification, and Positioning pages at W3Schools, to learn about: width/height, top/left/bottom/right, position, float, clear, display.
Then experiment with them. By way of a very quick explanation:

Most times, I set margin: 0px; border: 0px; padding: 0px on all layout elements, because otherwise they might trip you up. (But don't be afraid to fiddle with them if necessary.)

Once the above are taken care of, width & height are fairly obvious. Except potentially for small values - if your height is to high, it's usually because of the font-size. Use font-size and line-height to fix with that.

top/left/bottom/right are positional - you need to have position:absolute; for them to work in relation to the window, though usually using float and clear are better.
Oh, and make sure to set display:block; on things which might otherwise be inline.

Remember, percentages are in relation to the parent element - so if you set something to width:50% you need to have a valid width on the tag which contains it, otherwise it wont make sense.

So yeah, just go experiment with the above and hopefully it'll eventually become clear. If not you can of course ask specific questions here. :)
From: Bex (SIRBEX)19 Sep 2006 15:44
To: Wayne (SCOREZ2000) 5 of 20
I'd recommend Tutorialtastic. It's got some other good tutorials on there too, which I reference a lot.
From: milko19 Sep 2006 15:51
To: Bex (SIRBEX) 6 of 20
Isn't that the one by your friend who posted here once or twice?
From: Bex (SIRBEX)19 Sep 2006 15:55
To: milko 7 of 20
It is indeed! I was going to mention it, but then I thought no one would remember who I was talking about. Then I would have to explain, and then and then....oh it would be exhausting! Bit like this post really.
From: Peter (BOUGHTONP)19 Sep 2006 15:57
To: Bex (SIRBEX) 8 of 20
SPAMMER! :@
From: Wayne (SCOREZ2000)20 Sep 2006 07:45
To: Bex (SIRBEX) 9 of 20
Doesn't work :0(
From: Bex (SIRBEX)21 Sep 2006 07:10
To: Peter (BOUGHTONP) 10 of 20

And I would have gotten away with it if it wasn't for you meddling...PBs!

 

Wayne: The site doesn't work? That's bizarre if so, as it works fine for me, so therefore should work for everyone :@

From: Peter (BOUGHTONP)21 Sep 2006 08:32
To: Bex (SIRBEX) 11 of 20
It's working for me... although I've got a feeling the interface has changed; maybe it was down because of that?
From: Wayne (SCOREZ2000)21 Sep 2006 09:52
To: Bex (SIRBEX) 12 of 20

Works now, and looks like exactly what I am after.
Cheers.

From: Bex (SIRBEX)21 Sep 2006 11:18
To: Wayne (SCOREZ2000) 13 of 20
Yay! I did something useful (dance)
Message 30672.14 was deleted
From: CHYRON (DSMITHHFX) 4 Feb 2019 13:25
To: ALL15 of 20
BLAST FROM THE PAST!  :-O~~~
From: milko 4 Feb 2019 15:56
To: CHYRON (DSMITHHFX) 16 of 20
just another "here is a cut and paste from a wikihow style page, and then a link to their site". I wonder why they scrape such ancient posts to bump with this stuff? Anyway, boooooring, but always nice to see an old thread and remember people.
From: graphitone 4 Feb 2019 17:19
To: Bex (SIRBEX) 17 of 20
The link's down again. :C
From: CHYRON (DSMITHHFX) 4 Feb 2019 17:21
To: graphitone 18 of 20
How many links from 2006 do you expect to still work?
From: graphitone 4 Feb 2019 17:48
To: CHYRON (DSMITHHFX) 19 of 20
30.
From: CHYRON (DSMITHHFX) 4 Feb 2019 18:03
To: graphitone 20 of 20
That was #31.