Whilst I was working my previous job at MobileShop.com I did a lot of development work along with my in house marketing. One of the main things that I worked on was the redesign of the homepage. It was a tabular beast that I always wanted to slain, armed with nested tables, incorrectly closed tags, and transparent gifs amongst other things. The problem was that the higher ups always had some fantastic project that should be worked on instead of fixing the issues that I have just described.
Shut up Chewie – Show me the tips
Finally one month before I was due to leave they gave me my chance to defeat the demon that I had despised for so long. I cracked the whip and went into battle armed with Strict doctypes, Div’s and plenty of CSS.
Sometime (and many many changes) later I had managed to bring the site up to scratch, there were a couple of things that weren’t quite right but I was happy it was done, more importantly I was happy it was done before I had left.
So therein lies the problem, once I had left who was going to look after the development of it? Most of the other developers kept their heads down and coded in php echoing out the odd table here and there, the rest came from a purely design background, surprisingly though, all were interested in learning CSS.
I put up my chalkboard and took them through the code and compiled a list of the things that most frustrated me when learning CSS; Why does that do that, Tips on how to overcome IE issues, putting borders on div’s so you can see what you are doing… basically a little guide as to not smash the monitor when you get frustrated.
So here are my tips, they are in no order, they may not even be that accurate but they were useful to me and they may be useful to you…
1) Where art thou element?
This seems easy peasy but you wouldn’t believe how many people struggle through trying to position a div without actually knowing where it is. If in doubt, put a border on your element, e.g…
#header {
border: 1px dashed red;
}
Then you can see EXACTLY how it is behaving, that sneaky div.
You can also but borders on all div’s on the page by using something similar to…
div {
border: 1px dashed red;
}
2) dot dot, hash hash
In your css you should use .’s for class names and #’s for id’s. You should only ever have one instance of an id name in your html but you can reuse classes to your hearts content
3) Shorty Div
Some times you may make a div and place some text and an image in it only to have the div not expand to fit its contents. To solve this you can float the div left or right, or use overflow: auto;
4) li’s li’s li’s – I aint lying, I promise.
When creating ul’s or ol’s it is usually best to set the margin and padding to 0, this is because different browsers apply different paddings and margins to those elements and it can be a pain in the ass trying to get them all looking the same.
5) Getting out the Table mindset
When switching to using divs from tables *shudders* a lot of people find it hard to get out of the mindset of layout the page out in a manner similar to tables. Don’t worry, everyone is the same at first but what it helps to remember is that block elements don’t really need something to contain them… let me break it down for ya :o)
A new user might structure a page something like this…
<div id=container”>
<div>
<h1>title</h1>
</div>
<div>
<p>Hello this is some text that i am writting</p>
<div>
<ul>
<li> blah blah</li>
</ul>
</div>
</div>
</div>
However, because all of those elements are block elements you could easily just do…
<div id=”container”>
<h1>title</h1>
<p>Hello this is some text that i am writting</p>
<ul>
<li>Blah blah</li>
</ul>
</div>
Remember, do you really need that extra div?
6) Chucking out the center tag
If you wish to position an element in the center of the screen (e.g a fixed width website such as www.mobileshop.com) then you need to do two things…
#container {
Margin: auto;
Width: 1100px;
}
The margin auto tells the browsers you want to center the element, but you must set a width else the element will stretch to 100%
7) Position: absolute;
If you need to create an element that is absolutely positioned then its usually best to encase it in div which is set to position: relative, this will stop it “breaking out” of its parent div and using the top left of the screen as its reference.
8 ) Always code for Firefox
This may seem a little weird because the majority of users use IE as a browser. However it is a lot easier to code for Firefox (or any other standards compliant browser) and then fix for IE using conditional statements such as…
<!--[if IE 6]>
<link rel="stylesheet" href="/includes/css/clean/iefix.css" type="text/css" />
<![endif]-->
You can then put your CSS fixes for IE into the new CSS file.
More info on IE conditional comments at http://www.quirksmode.org/css/condcom.html
So I hope that this helps someone out there, I kinda put it together as a bit of a rush job so it may not be perfect.