What is Digg?Sponsored by Dragon Age: Origins
Join the Dragon Age: Origins development team on Facebook view!
facebook.com/DragonAgeOrigins - EA presents BioWare's new dark fantasy epic Dragon Age: Origins. '9/10' from Game Informer.
43 Comments
- cbrack, on 10/12/2007, -4/+37Yes, please do add this to the 90 million other CSS bookmarks that are comprised of common sense.
Matter of fact, why don't I come up with some recycled tricks and submit it to digg?
...
(seriously, post something new.) - chipitople, on 10/12/2007, -4/+23those are all pretty obvious
- inspecality, on 10/12/2007, -1/+17Too ambiguous. Should read "10 CSS Tips to Make Your Coding Life Easier".
As it certainly did not help my love life. - UO07, on 10/12/2007, -5/+21"1. Keep it simple"
and let other people understand it and copy it? Pft. I think not. - kday, on 10/12/2007, -2/+14"4. Avoid using too much absolute positioning"
What about making the absolute, relative? In this case, I use absolute positioning a lot. This can come in handy a lot of times, and usually confuses the noobs. I mean, seriously... how can absolute positioning be relative?
See for yourself: http://www.stopdesign.com/articles/absolute/
I would change #4 to "Avoid using absolute positioning unless you know how to use it." - kday, on 10/12/2007, -1/+10A tip for the author of this page:
Learn to utilize the min-width and max-width properties. A fluid website without a max-width looks horrible on a maximized 1920x1080 or greater screen. A fluid website without the min-width css property can break horribly on a small screen (i.e. handheld device with full css browser). It's only another 2 lines of code, and so many sites are guilty for not including these properties. - Prod1gy, on 10/12/2007, -3/+11If I see one more "top 10 CSS tips that will make you a better coder" article, i'm going to kill someone.
-_- - wvannus, on 10/12/2007, -1/+5Don't lie, your friends all left you because of your obscene language.
- BrianJJohnson, on 10/12/2007, -1/+4css really needs a valign attribute bad. having to use the margins or absolute positioning or some other crazy technique is annoying and probably not standard practice
- wfbnadador, on 10/12/2007, -0/+2Burried for being a CSS "tips" article.
- appetite, on 10/12/2007, -0/+2It started out useless but the points about divitus and classitus were pretty decent.
- rip747, on 10/12/2007, -1/+3how many more of these types of pages does digg need? Buried as lame
- bigapple666, on 10/12/2007, -0/+2Nice tips. For someone like me who just started going through the W3schools tutorials on HTML and CSS about 3 weeks ago for the first time, this gives me a good perspective on the future of what I hope to be doing.
It may eventually have been common sense, but now I don't have to learn from making the mistakes. - karabunga, on 10/12/2007, -0/+1#10 mentions that there are a number of FREE websites where you can check the compatibility with other platforms and browsers. But i haven't found any...
Can someone point me the way? - kizio, on 10/10/2007, -0/+1Really good. Things like this happen everywhere. http://catszone.blogspot.com
- inactive, on 10/12/2007, -0/+1"Validate your code" says the page that throws a Javascript error.
- hixsonj, on 10/12/2007, -0/+1I think the more common convention is calling it 'div soup.'
- JaffaTheCake, on 10/12/2007, -0/+1There is vertical-align which aligns inline and inline-block elements within the current line space. Make your element inline-block, set the line height of the parent element to the height of the container then vertical-align will do what you expect it to.
-moz-inline-box should be used for Firefox, as it doesn't support inline-block completely yet. Which is a shame as IE supports it for inline elements. - bakagaigin, on 10/12/2007, -1/+2#5 I was guilty of for a long time, but I know better now! And oh how obvious it seems after the fact.
- yelow, on 10/12/2007, -1/+2I like the explanation on classes and divs and stuff, many people really do fall into those kinds of habits.
-Tim - sklreturn, on 01/07/2009, -0/+1Didier Grossemy says, this can be a distinct competitive advantage for you... meaning converting or not and of course getting a return on your investment.
Step #1. Ask yourself a few questions http://www.zoominfo.com/people/Grossemy_Didier_324 ...
* Why are you building a website or landing page?
* What will be your expected conversions?
1. E-commerce — adding an item to a shopping cart and beginning the checkout process.
2. Lead generation — filling out a registration form to accept an offer (generally free) with the implicit understanding that this may lead someday to a sale.
3. Branding/education — spending a significant amount of time examining and/or interacting with content on the site that the Home page is a gateway for
4. Relationship — opting-in to receive communications from the brand/publisher on an ongoing basis.
5. Membership — registering to actively use the site on an ongoing basis in exchange for either payment, an implied agreement to view advertising, or to allow one's activity data to be measured.
6. Viral — telling personal and professional contacts about the Home page, perhaps via an email tool, blog links, word-of-mouth, etc.
http://grossemy.typepad.com/ - tybris, on 10/12/2007, -0/+1"99% of the time there will be an html tag perfect for the job in hand."
Good, what tags do I use for my navigation, subnavigation, language selection, copyright notice, price tags, measurements, date/time, chapters, sections, articles, dialogs, etc? - tybris, on 10/12/2007, -0/+1Is there some sort of block /CSS/i option in digg?
- ElMoselYEE, on 10/12/2007, -1/+2hey cbrack, would you mind doin that for me? i actually need 10 more, then i think i might be able to make a good website. cuz i only have 90 tips, i need an even 100.
- cmiller1, on 10/12/2007, -0/+1technically wouldn't it be divosis and classosis as the divs and classes themselves are not in fact enlarged, but the page has the symptom of being full of divs or full of classes?
- kday, on 10/12/2007, -0/+1I agree with you here. It is quite annoying.
If the text fits on one line, usually I just give the p tag a line-height equal to the size outer container. This doesn't work for everything as a height needs to be explicitly set.
Example:
#mydiv { height:100px; }
#mydiv p { line-height:100px; }
or if you use em's (which I prefer):
#mydiv { height:5em; }
#mydiv p { line-height:5em; }
If the text is multi-line, I usually set the outer container to position:relative use absolute positioning in combination with a negative margin-top for the inner p tag. This is quite an ugly way of doing things.
I'm going to have to remember JaffaTheCake's method, and see how that works out for me. Still ugly, but slightly more elegant than my approach. - jokoon, on 10/12/2007, -0/+1Please add a css section so I can untick it in my profile.
- bkemper, on 10/12/2007, -0/+1"The most common problem encountered when using absolute positioning for two or three columns is "How to put a footer at the bottom of all three columns?" The answer is you can't, unless you resort to scripting or use a fixed height for all three columns."
That just aint so. Use absolute positioning to align the footer with the bottom of the page, then give the other main divs enough bottom margin to avoid overlap. There; I've just used absolute positioning to put a footer at the bottom of a multi-column layout. - benihanahana, on 10/12/2007, -1/+1Didnt Zeldman write most of this years ago?
buried. - hixsonj, on 10/12/2007, -1/+1Not a bad article though I think the title would be more accurately called '10 CSS Best Practices' because some of those tips can actually make your life harder. e.g. Figuring out how to code something properly instead of using a quick hack.
- SpookyET, on 10/12/2007, -1/+1There is a big one he forgot to mention: SANDBOX YOUR CODE.
Instead of writing h1 { foo: bar }; write div#header h1 { foo: bar };
The reason for that is that a simple h1 can conflict, especially when you try to embed a forum or another application in your site design.
The other advantage is that it is very easy to find the html elements because your css declarations follow the html tree.
This is a stylesheet I wrote that is fully sandboxed: http://www.ksuicehockey.com/css/global-screen.css
When I embedded the forum, there were 3 small conflicts because I forgot to sandbox 3 things. Once, I fixed those, there were no problems.
If my CSS was not sandboxed, I would have had to modify the forum CSS extensively to turn off my global-screen.css styling or style the forum css and having to maintain to CSS files. - kasted, on 10/12/2007, -3/+3What I learned from learning CSS, you will always find a way to make something easy for yourself, or what you are trying to do as you go along.. not sure if thats relevant, just thought it was neat.
- fullphaser, on 10/12/2007, -1/+1Buried, maybe if I don't know this wasn't part of the first lessons that they drag on when you start working with CSS. For the newbs sure, but not really noteworthy.
- 123zoozle, on 12/17/2007, -0/+0This list is pretty good.
http://www.dassnagar.net/
http://www.dassnagar.co.uk/ - stesch, on 10/12/2007, -0/+0A lot of the "classitus" and "divitus" nowadays is caused by IE's lack of support for all of CSS2's selectors.
- anonym41414, on 10/12/2007, -1/+0Spelling counts. It's not "divitus" and "classitus." Those sound like characters out of some bad Roman play. It's "divitis" and "classitis," from the suffix "-itis" which means an inflammation of or, more figuratively, an excess of.
- TaeBoX, on 10/12/2007, -2/+1Why can't the haters on digg gtfo already?
- matgorb, on 10/12/2007, -2/+1#4 Is just bs.
I ALWAYS use absolute positioning, because it's easier, cleaner and predictable and because it is how things are suppose to be used, Float: is originally not made to position elements, even if all lot of people do use it for that purpose.
If you know what you're doing, absolute positioning works perfectly, and is cross-platform without bug.
The rest is mostly common sense or stolen for Zeldman. - rscherf, on 10/12/2007, -2/+1Where are the so-called tips?
- aviper2k7, on 10/12/2007, -4/+2The list is pretty obvious and has been done to death :/
- inactive, on 10/12/2007, -5/+3how did this, and pardon my french, 'crap' make it to #1? Maybe the first time it was novel, but c'mon... ugh. If you're learning your CSS coding from top ten lists, you should really meet my friend O'Reilly.
- PastorOfMuppets, on 10/12/2007, -8/+4We need a new top level topic...
http://digg.com/csstips - ses5909, on 10/12/2007, -14/+9This is definitely one I will bookmark and point people to.
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official 
© Digg Inc. 2009
— Content created and posted by Digg users is