Donkeys and Elephants and Delegates,oh my!
Check out the most popular
CSS Layout Tutorial for beginners
subcide.com — A tutorial that goes step by step through the process of implementing a real-world web design into a working template using CSS for layout.
- 1426 diggs
- digg it
- shuai, on 10/12/2007, -2/+0That's a sick tut. Thanks.
- graywave, on 10/12/2007, -0/+3good tutorial that doesn't overwhelm you with details but provides enough so you know what you're doing.
- pmcall221, on 10/12/2007, -5/+0Is anyone else getting tired of these CSS links?
- estvir, on 10/12/2007, -4/+0tr42 ftw !
kekekeeek. - rYno, on 10/12/2007, -0/+1Okay - there was just one of these on page one....
how many of these are we going to have pop-up now? lol
Good for beginners though... - Thurloat, on 10/12/2007, -3/+0reported as spam. there was a site on the frontpage not even a month ago that covered everything. there is a general consensus that we no longer need ANY CSS tutorials.
- riah, on 10/12/2007, -3/+0pmcall221, yes
- stubby, on 10/12/2007, -1/+1Hah, not a bad tutorial although we have a few already...
If writing a tutorial on webdev, why not make actual thumbnails and not just resize the pictures with code though? - riczho, on 10/12/2007, -0/+0Wow. a 100% pixel/fixed layout that uses a definition list for the side bar and no list for footer links.. (Also uses two images for the header for some reason.. and just sticks an image into an tag-- should have used image replacement instead).
I really don't mind so many CSS articles on Digg.. but the authors should be much more experienced before trying to teach others. - bonchbonch, on 10/12/2007, -1/+0How many of these are going to get posted? Geez, do a Google search if you need a CSS tutorial.
- norbiu, on 10/12/2007, -0/+1I'm not ... i think it's great! I want more!
- riczho, on 10/12/2007, -1/+0Oooh! Take a look at the actual "enlighten design" site: http://www.enlighten.co.nz/
A very "interesting" usage of whitespace. And a table layout too! But looking at the portfolio... somebody has a weeeirrd habit of using dl's where ul's would have been more appropriate.
Semantic markup!! - buckaroo, on 10/12/2007, -1/+1> A comma in between CSS selectors stands for "and", so here the same rules will be applied to the html tag and the body tag.
What!? No, the comma can be thought of as an OR. The comma provides grouping,
and order is not important.
.thisone, .thatone, .otherone {
border: solid red 1px;
}
...means that the rule can apply to the classes of "thisone", "thatone", or "otherone".
An AND would be (contextual, order is important):
.thisone h2 {
// stuff...
} - MalDON, on 10/12/2007, -1/+0The one on albinoblacksheep imo is much better.
- Thurloat, on 10/12/2007, -1/+0"Oooh! Take a look at the actual "enlighten design" site: http://www.enlighten.co.nz/
A very "interesting" usage of whitespace. And a table layout too! But looking at the portfolio... somebody has a weeeirrd habit of using dl's where ul's would have been more appropriate.
Semantic markup!!"
lol! that site looks like balls on my widescreen monitor. it's like not even 1/4 of the width and it's stuck to 1 side. boo! - deepsub, on 10/12/2007, -0/+1"Is anyone else getting tired of these CSS links?"
No. - tnwake, on 10/12/2007, -1/+0Why do we need a new CSS tutorial once a week? STOP ALREADY!
- Subcide, on 10/12/2007, -0/+2Thanks for that feedback buckaroo you're absolutely right, i'll change it to OR when i get to work in an hour. This was written as an internal resource for training new developers, cause I wasn't happy with the ones i'd been able to find (I hadn't seen the albinoblacksheep one until yesterday about a minute after i posted this sorry)
Heh, yes our current site sucks you're totally right. Too busy with chargable work to do it. However that's not what this link is about.
"(Also uses two images for the header for some reason.. and just sticks an image into an tag-- should have used image replacement instead)" Alt attribs work fine. I'm not happy with the image replacement techniques as most of them don't work when the user turns off images in their browser, and the ones that do require extra empty span's. This way if a user has css turned off, they still see our logo, reinforcing our branding, and the alt attrib will handle screen readers etc... - samoscratch, on 10/12/2007, -0/+5I don't understand....one person has a ***** fit and proclaims that we shall have no more CSS tutorials, everyone jumps on the bandwagon. It seems that this is what dig has boiled down to, if you do not deem these articles as valuable then DO NOT read them, it's really that simple, stop whining already...
- bananaph0nee, on 10/12/2007, -0/+0samoscratch, I agree.
More CSS please. - Subcide, on 10/12/2007, -0/+1I do kind of agree with some of the haters, I don't think this article should be front page news. Especially not when there was a similar article on the front page yesterday. I think digg is getting a bit of a bad rep due to the ammount of crap that makes it to the homepage (those photoshop tutorials anyone?). I hope that is addressed sometime in the future.
- chicksdigme, on 10/12/2007, -0/+1dugg!!
"Is anyone else getting tired of these CSS links?"
No, please keep them coming. Thanks. - Nocturnal, on 10/12/2007, -0/+1This is a sick tutorial. I am going through and following it right now. It is indeed awesome. I have been thinking about learning about this for quite some time.
- Subcide, on 10/12/2007, -0/+0I'd reccommend reading the albinoblacksheep one too, and cssbasics, its good to get different perspectives if you're learning about something like this. Everyone has their own style.
- riah, on 10/12/2007, -0/+0i guess my job makes me bais, but these don't interest me. science and fanboy propaganda for teh win.
- actuel, on 10/12/2007, -0/+0i say keep them coming too! as a beginner all css/webdev tutorials are welcomed. the albinoblacksheep one was really quite informative as well.
more please! - ctheory, on 10/12/2007, -0/+0Did anyone else find the toenails that were in the sample picture disgusting?
*****....ack. - Subcide, on 10/12/2007, -0/+0I'm sure your body is perfect ctheory :)
- Wheeler, on 10/12/2007, -0/+2Web design is a tool we could all benefit from knowing. And one thing about getting a tutorial from Digg vs a normal search is that x ammount of poeple DUGG it (which hopefully means its a jamin' tutorial)! This tutorial is Great.
- xdesign, on 10/12/2007, -1/+0"CSS Layout Tutorial for beginners"
and translated it means:
"I want to make a few extra buck with my ads, but don't want to spend too much time on it. Ok, yeah, calling it a tutorial for beginners would be the solution". - Subcide, on 10/12/2007, -0/+0Actually if you clicked on the link there's no ads.
- Subcide, on 10/12/2007, -0/+0Just fixed an image pathing issue on page 11. Also a printable version is coming soon.
- similarlee, on 10/12/2007, -0/+1nice tutorial.
keep em coming. - amygdela, on 10/12/2007, -1/+0the author should learn about semantic designs... divs for navigation...
- Subcide, on 10/12/2007, -0/+0Until XHTML 2.0 is in wide use (which will possibly introduce navagation lists), there isn't going to be a truley semantic way of doing navigation. If you would like to explain the benefit of using a instead of a , i'm listening.
- Subcide, on 10/12/2007, -0/+0i meant using a ul instead of a dl. seems the comments strip tags.
- Skilaq, on 08/21/2008, -0/+0A great resource. I have a few basic HTML and web design tutorials on my blog http://www.digistore.co.nz/blog/how-to-make-a-webs ... Again thanks for the info!
Browsing Digg on your phone just got easier with our enhancements to the