What is Digg?104 Comments
- datsclark, on 10/12/2007, -3/+58Fast server, no video, straight forward. Dugg. I dunno why more people don't write "tutorials" like this.
- PhrosTT, on 10/12/2007, -6/+34This is terrible.
For starters, both the header and footer have huge chunks that could be coverted into a 1 pixel wide image that x-repeats.
From somebody telling us to "start doing it right" they should probably do some learning before they start teaching. - TomFrost, on 10/12/2007, -1/+29He most likely wrote the page in response to the tutorial on how to use Photoshop's horrible built-in CSS output that hit the front page yesterday. If he's writing a page specifically to submit to digg to retort a story .. what's wrong with putting it in a digg folder?
- crawfishsoul, on 10/12/2007, -2/+22Did you even look at the source before making that comment? Not a single table, tr or td to be seen.
- jmulder, on 10/12/2007, -2/+20Uhm. All he did was explain how to save selections from Photoshop and use them as a background image. Just when you think all the amateurs are left in the era of table-based design, someone gives them a helping hand to come across to the proper side.
The real discussion in the tutorial should be focused on the seperation of content, presentation and behaviour, semantics, source-order for usability and CSS's crucial theory on floating, selectors and inheritance.
"Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for life."
- Design Rant: http://www.thenoodleincident.com/tutorials/design_rant/
- CSS Based Design: http://adactio.com/articles/1109/
- Writing Semantic Markup: http://www.digital-web.com/articles/writing_semantic_markup/
- The Elements of Meaningful XHTML: http://tantek.com/presentations/2005/03/elementsofxhtml/
Note: Granted, the articles are old, but the essence has gone unchanged. Only the implementation has become cleaner in some areas, perhaps. - bitterCAMPARI, on 10/12/2007, -2/+16I'd say it's a good start for beginners, however there is some unnecessary css involved. When you have already defined a width with your container, the divs nested inside don't need a width unless you want them to be shorter then said width. Also I don't think css recognizes 100% height at all, I could be wrong with that though.
- webtekie, on 10/12/2007, -4/+16ha, ha. He probably thought it was "cool" to use "Table-based layout" in a sentence.
- honging, on 10/12/2007, -2/+13www.joplan.com is probably where he's seeing tables; there's a few scattered in the source there.
- Trihedralguy, on 10/12/2007, -0/+11I'm not so sure this is a good way to start someone off into the CSS world - Or even start someone off into web design. The pages are all graphically ran and if you re size it or change browsers to something bizzar you can really get some weird stuff that happends. This is great if you want to create something simple, but if you want to move beyond that, this is not a good way to start learning any language (CSS, HTML, etc)
- honging, on 10/12/2007, -2/+12margin: 25;
padding: 25;
25 what? elephants?
using text-align to do centering is a bad method; you should use margin-left: auto; margin-right: auto; to accomplish that. using text-align: center cascades to all the children, which is why this guy was forced to declare text-align: left; on all the children nodes.
using height: 100%; is a bad on the body/html too (there's a thread about it above) - dyzlexiK, on 10/12/2007, -1/+10100% height is a tricky one, being treated diffrently in almost every browser. It shouldnt be used. IE treats it like min-width, while Firefox will stop the container at 100% of its container (Window or set container) and refuse to stretch, allowing content to overflow but stopping background colours and borders, etc. Mozilla on sun system goes one farther by screwing anything past the 100% original height.
- Hexxagonal, on 10/12/2007, -1/+9he shouldn't have called this the right way to do it then. more like the lazy way to do something on the right path.
- castrox, on 10/12/2007, -3/+10It's about time "web designers" learn to separate code from content - using CSS. Simpler to maintain, simpler to parse and also yields much simpler solutions to "complex" problems instead of being forced to solve them with e.g. tables (nested mess of columns and rows)...
- ScottMaximus1, on 10/12/2007, -0/+7basically, you hate the english language AND creating custom designs?
You're a real professional - bleutuna, on 10/12/2007, -5/+12Unmotivated? Please. I DO THIS FOR A LIVING. I've taught myself HTML, CSS, ColdFusion, ASP, JavaScript, Photoshop, Illustrator, After Effects, blah blah blah blah blah. One thing I'm not is unmotivated.
I was using CSS back in 1997 when the only thing it was really good for was making the underline disappear on links or making your background attached. That's back when Netscape had layers.
I've forgotten more about CSS then you've learned, boyo. In my career I've personally coded over 250 websites, in all sorts of languages, for all sorts of browsers. Your site ( http://www.invisiblespiders.com/ ) betrays your 'top notch' coding skills with its inline CSS and lack of solid commenting.
And the Nintendo Wii uses Opera, which has no problems utilizing tables. Whippersnapper!!! - chipitople, on 10/12/2007, -9/+15nice--really simple and easy to follow......
- ei8htball, on 10/12/2007, -4/+10@bluetuna
"Nothing wrong with tables when used correctly."
That is a 100% correct statement...
A correct use of a table would be to display tabular data (http://www.w3.org/TR/WAI-WEBCONTENT/). Last time I checked, using a table for layout isn't using it for the display of tabular data.
"It all depends on the application, but a table is *ALWAYS* right, whereas you have to deal with inconsistent browser interpretation for divs to work."
No it isn't. DNABeast makes several very good points, but one that he omitted is that IE renders tables slightly differently than other browsers.
"There'll always be some crappy Safari problem or whatever goofyass browser someone's using."
I have yet to run into an issue with Safari that wasn't a mistake my code. (IE on the other hand....)
"There are ways to do everything in CSS, where you can use CF, PHP, ASP, AJAX, JavaScript, etc. to detect what browser you're using and give you a stylesheet that works for that browser. I've had to do it before."
How do you use AJAX to detect a browser? Wouldn't that be using JS?
Why would you develop different style sheets for every browser? I'll admit that a hack or two is sometimes more convinent than doing it "properly", but there's no reason you'd have to have completely different style sheets... if it doesn't display the same down to the pixel, who cares? You're probably to only one that's going to compare how it looks from one browser to another. I'm not saying that you have to accept major differences, but a few minor ones are bound
to come up eventually.
"CSS is cleaner. Tables are steadfast. Both work. Neither is evil."
I think I prefer something more along the lines of:
"Semantic code is correct, therefore the use of tables for layout is incorrect. Both appear to work to a person without a disability that would effect the way they browse the web. There's no such thing as 'evil'" - DNABeast, on 10/12/2007, -2/+8Not really everything. Mobiles don't display tabled design properly. Nor Palm pilots and their ilk, and screen readers for the blind like Jaws. They don't work, and hey! Didn't nintendo just release some sort of browser that benefits from semantic coding?
Tables are for tabular data only. If you don't want to learn, at least you should acknowledge that it's because you're unmotivated, not that tables do the job properly. - RustIndy, on 10/12/2007, -0/+6Which part of his CSS is deprecated? Or spottily supported? Admittedly, a layout that simple doesn't need as much CSS as is in there, but it's a long way from bloated, especially compared to the equivalent table-based code.
- Cmain, on 10/12/2007, -5/+10It should be a useful tutorial for beginners. Just try to remember to use semantics. For example:
A header, image or text, should be put in tags.
A menu should be done with a list.
This tutorial covers some great basics. For anyone trying to get deep into CSS and XHTML layouts I suggest checking out this book which is really great:
http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321346939
There is also an ebook of it out there. It helps with cross browser problems and is great for semantics. - kalphegor, on 10/12/2007, -0/+5Using a DIV instead of UL and LI for the menu, no digg
- Cmain, on 10/12/2007, -0/+5hehe sorry about that I forgot I can't put tags in here and missed the edit time.
Headers should be in < H1 > tags - j3one, on 10/12/2007, -0/+4Hey it's a start. Thats all I could do on an hour lunch break and I am sure its chocked full of mistakes, but the idea is not to teach people how to float divs, do semantic markup or design pretty sites. It was for make benefit good photoshop designers that are still ctrl-shift-alt-s'ing out sliced up sites and/or making anyone who has to touch the code suicidal. Nobody wants to wade through one of those.
Besides too many people put perfectly good tutorials out there that will show people how to do proper web design but all that happens is people copy it verbatim, try to throw it together their web 2.0 1337 site and at the first sign of trouble don't have a clue what to do. They have learned nothing. Now you have some basic idea that goes against the grain of yesteryear web development and you can start learning how to use xhtml, css, limited images and javascript, to make great sites. You can do this in usually less time than it takes to set up a table based site, and always less time than one takes to maintain. - bleutuna, on 10/12/2007, -6/+10Addendum to my comment: There are ways to do everything in CSS, where you can use CF, PHP, ASP, AJAX, JavaScript, etc. to detect what browser you're using and give you a stylesheet that works for that browser. I've had to do it before.
However, when we're talking wanting to get a site templated out in less than an hour so you can start the hardwork of adding content, doing your backend system, etc? Tables always work. Consistently across the board. Wanted to make that clear.
CSS is cleaner. Tables are steadfast. Both work. Neither is evil. - filipeanut, on 10/12/2007, -1/+5So what if he didn't do any precise image cutting or concentrate on better looking headers and footers, he really made his point across to me as a beginner. I've been using tables for a while for my web layouts and now I know an easy way to make a website from pshop to css. Thanks for taking the time joplan.
- mrussell, on 10/12/2007, -0/+4honging is right, but judging by the number of "I don't like CSS cause you have to code for different browsers" comments on digg articles, most of the people digging down don't actually understand what he/she is saying. Although I would point out in a geeky css geek way that IE versions below 6 don't understand margin: 0 auto so you would need to use text-align: center
It's a good intro, and I wish there was something like this when I started learning standards - but it is flawedd, so have a look and then move along, move along - dudez12, on 10/12/2007, -0/+3Great tutorial! I coded my entire layout in around 20 minutes!
- frontpage, on 10/12/2007, -1/+4Loan a man a fish, and he will owe you a fish and interest.
- xxNIRVANAxx, on 10/12/2007, -3/+6Honging is 100% correct, no need to digg him down...
- Obsidian743, on 10/12/2007, -0/+3Simple and clean but not necessarily the best method. Those image sizes add up. Slice a few more smaller parts (few more divs), use colored backgrounds/borders and save the user some bandwidth.
- KSUdesigner, on 10/12/2007, -1/+4"I don't like CSS. I don't like the fact u need to test a design in like 8-15 different browsers. i don't like the fact u need to know hacks. Its not my job and frankly i don't care about browser bugs, browser versions, incompatibility and ***** up standards."
Nobody LIKES to test in multiple browsers, but it is something that we must do to ensure our designs will be viewed properly on every system possible. It might not be your job, but I sure as hell hope you aren't a web designer. If you are, you oughta be fired.
"So i work in a different way. My CSS codebase consists of some open source flexible designs, that basically cover all most used layouts. These are tested, updated and commented on by people. And i place my photoshop design on top of it. Customize the CSS and done."
If somebody is paying you for the same old layouts that you've been using for years then you are awfully lucky. Just because a design works once does not mean it is going to work for every application you come across. It's people like you, the ones who use templates and can crank that out in an hour or two, who are ruining the industry. How can a real web designer compete with someone who can turn out an entire site in a day because he used an old template? Do us all a favor...quit your job and get a real education in this stuff. - NotalesS, on 10/12/2007, -4/+7Not that great. FOr such a simple desing (ie single colum) theres not much work to even get done. He should have done something a little better, and well more thought out.
- Jayphen, on 10/12/2007, -0/+3@Drahkar -
The div tag is deprecated? Wow, I don't know where you heard that, but it couldn't be further from the truth.
The align attribute of the div tag has been deprecated, but definitely not the tag itself. - inajeep, on 10/12/2007, -0/+3I agree, and all kidding aside it's a topic that needs to be discussed more, how about putting your hat into the ring ?
- linusthepenguin, on 10/12/2007, -0/+3Instead of complaining about how this is not the "RIGHT" way... why not provide some alternative tutorials similar in nature? I'm looking to get into web development and it doesn't help by just bashing along for those who are interested.
- Jayphen, on 10/12/2007, -1/+4@DJSdotcom -
Then you take the same concept and apply it to a columned layout. This is just a very basic tutorial, and it assumes the reader has never attempted using Photoshop to create a layout without slicing it up in imageready and sticking it into a table. - webnesto, on 10/12/2007, -3/+5I would think he didn't include that in his example as it would make it more complex and therefor harder to follow as a tutorial.
- galen, on 10/12/2007, -0/+2thats common sense stuff!!!
- GaffleSnipe, on 10/12/2007, -1/+3I doesn't need to be more in depth. It assumes that you already know how slice up a photoshop file and make a site with it. It's the method that is important here.
- bleutuna, on 10/12/2007, -0/+2UGH. Please, what does that even show you? The guy has no idea what he's doing. There are about a dozen ways to do this, far better, and he doesn't even show you how.
What he gave is a 'n00b's retarded guide to cropping & compressing.' Nothing more.
A masthead that big is wrong on numerous levels:
1) It's going to be large byte wise, which is never good, and require sometime before it shows up in the browser
2) His design isn't scaleable in the slightest
3) His masthead is made of multiple parts, which can mostly be broken down into files that are less than 1k per image, and then repeated using CSS and div/table structure to make a cleaner, smaller, better page.
I'm so tired of little kids who know nothing about TRUE HTML/CSS giving these crapass 'how to' guides. - theLingoKid, on 10/12/2007, -0/+2You know if all sites were that easy to create, then Web designers like myself would not have jobs, or job security. Thank god its not that easy. But this is a great start... for learning what a tag is... what about all the other important stuff like the doc type and weather it is strict or transitional....
DUGG! because it is a good intro... now follow it up with some more knowledgable content.... - theblt, on 10/12/2007, -0/+2@albotross2147
Please, show us your work of table-based layouts.
I've been on both boats and I'm currently on the CSS side of things for 3 reasons:
A) Tables are extremely restrictive unless you just export the slices from Photoshop, but now you're dealing with a hefty file with the countless 's and spacers.
2) Countless accessibility reasons, not necessarily important to most people, but it is important to me
D) DIV's are a growing technology and are only going to be further utilized in the new CSS3 spec.
Just seems to me that inexperience and laziness seem to be the underlying factors. And then people argue due to their ignorance about the subject. There isn't a damn thing you can do with tables that you can't do with a little CSS. Though it may take time to fully master, it's worth it when you're finished. I'm no master but I don't run into huge obstacles when designing any layouts anymore. W3C.. - filipeanut, on 10/12/2007, -1/+3I forgot to mention: If you still feel like criticizing this tutorial do something about it and unveil how you created your beautiful website from photoshop to css.
- daroot, on 10/12/2007, -0/+2okay i think its good to show people how to get rid of the stupid layout tables.
BUT: this is not the RIGHT way, its just div div and again div. the M in XHTML stands for Markup. - raccettura, on 10/12/2007, -0/+2Only problem with this tutorial is that the design was made for the sake of the tutorial. Ive never seen a site with such a simple design.
- strazz, on 10/12/2007, -1/+2Why is everyone modding jboi down? If customers keep coming back and fast and cheap is working, then keep doing it! If you notice some dissatisfaction and the number of clients is dropping then start focusing on more quality and more customization. Why whine about how jboi is "ruining" the industry, blah, blah, when all jboi is doing is making the most profit possible, quickly and legally? I think the real problem is that people are pissed that jboi makes more money in less time...
- bleutuna, on 10/12/2007, -0/+1Exactly. If you were to say change your logo - with this style, you'd be forced to crop out that large image all over again. If he'd have used a repeating background in a TD or a DIV, then he need not worry. He'd only have to crop out the exact size of his logo, aliased to the background color, and voila - quick, easy, LOW BYTE size simplicity.
When it comes to simple web design, sometimes you have to make things more detailed/complicated at the beginning so changes and updates are a cinch in the long run. In fact, that's ALWAYS the case. I'd rather spend 4 hours getting it right at the beginning, and then 5 minutes a day updating for the next year or two than spend 10 minutes writing/cropping some huge, messy image code and have to deal with a pain in the ass every time I want to update. - Hexxagonal, on 10/12/2007, -0/+1i completely agree, but know your target. for instance my site sees about 2% IE Browser < 6. i don't sell anything so i could care less about the 2% of my viewers who use old ie browsers.
- snakepimp, on 12/27/2007, -0/+1QUOTE: jmulder- "The real discussion in the tutorial should be focused on the seperation of content, presentation and behaviour, semantics, source-order for usability and CSS's crucial theory on floating, selectors and inheritance."
Way to nail it, jmulder. This article is teh suck. - Metasquares, on 10/12/2007, -0/+1Depends on the content and the nature of the design. Fluid layouts have the advantage of making use of any reasonable amount of screen space well, but enforcing a rigid structure on the design itself becomes difficult.
-
Show 51 - 100 of 102 discussions
Check out the new & improved 
© Digg Inc. 2009
— Content created and posted by Digg users is