CodingCSS Layout Design

 

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  Wayne (SCOREZ2000)  
 To:  ALL
30672.1 

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.


www.club-nut.co.uk
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Wayne (SCOREZ2000)     
30672.2 In reply to 30672.1 
Do you know CSS and just want to learn how to use the layout elements, or are you a CSS novice?
0/0
 Reply   Quote More 

 From:  Wayne (SCOREZ2000)  
 To:  Peter (BOUGHTONP)     
30672.3 In reply to 30672.2 
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.

www.club-nut.co.uk
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Wayne (SCOREZ2000)     
30672.4 In reply to 30672.3 
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. :)
0/0
 Reply   Quote More 

 From:  Bex (SIRBEX)  
 To:  Wayne (SCOREZ2000)     
30672.5 In reply to 30672.1 
I'd recommend Tutorialtastic. It's got some other good tutorials on there too, which I reference a lot.

0/0
 Reply   Quote More 

 From:  milko  
 To:  Bex (SIRBEX)     
30672.6 In reply to 30672.5 
Isn't that the one by your friend who posted here once or twice?

milko
0/0
 Reply   Quote More 

 From:  Bex (SIRBEX)  
 To:  milko     
30672.7 In reply to 30672.6 
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.

0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Bex (SIRBEX)     
30672.8 In reply to 30672.7 
SPAMMER! :@
0/0
 Reply   Quote More 

 From:  Wayne (SCOREZ2000)  
 To:  Bex (SIRBEX)     
30672.9 In reply to 30672.5 
Doesn't work :0(

www.club-nut.co.uk
0/0
 Reply   Quote More 

 From:  Bex (SIRBEX)  
 To:  Peter (BOUGHTONP)     
30672.10 In reply to 30672.8 

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 :@

0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)  
 To:  Bex (SIRBEX)     
30672.11 In reply to 30672.10 
It's working for me... although I've got a feeling the interface has changed; maybe it was down because of that?
0/0
 Reply   Quote More 

 From:  Wayne (SCOREZ2000)  
 To:  Bex (SIRBEX)     
30672.12 In reply to 30672.5 

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


www.club-nut.co.uk
0/0
 Reply   Quote More 

 From:  Bex (SIRBEX)  
 To:  Wayne (SCOREZ2000)     
30672.13 In reply to 30672.12 
Yay! I did something useful (dance)

0/0
 Reply   Quote More 

Message 30672.14 deleted 6 Feb 02:52 by MATT

 From:  CHYRON (DSMITHHFX)  
 To:  ALL
30672.15 
BLAST FROM THE PAST!  :-O~~~
“Hacker Spoke To Baby and Hurled Obscenities At Couple Using Nest Camera”
0/0
 Reply   Quote More 

 From:  milko  
 To:  CHYRON (DSMITHHFX)     
30672.16 In reply to 30672.15 
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.
milko
0/0
 Reply   Quote More 

 From:  graphitone  
 To:  Bex (SIRBEX)     
30672.17 In reply to 30672.5 
The link's down again. :C
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)  
 To:  graphitone     
30672.18 In reply to 30672.17 
How many links from 2006 do you expect to still work?
“Hacker Spoke To Baby and Hurled Obscenities At Couple Using Nest Camera”
0/0
 Reply   Quote More 

 From:  graphitone  
 To:  CHYRON (DSMITHHFX)     
30672.19 In reply to 30672.18 
30.
0/0
 Reply   Quote More 

 From:  CHYRON (DSMITHHFX)  
 To:  graphitone     
30672.20 In reply to 30672.19 
That was #31.
“Hacker Spoke To Baby and Hurled Obscenities At Couple Using Nest Camera”
0/0
 Reply   Quote More 

Reply to All    
 

1–20

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2019 Project Beehive Forum

Forum Stats