More and more people are learning CSS to not just affect the look, but the over all design of their sites.... and not just designers, but people making up their own pages with an average to lower knowledge of design.
For those people, here are some HUGE fundamentals that I have learned that make getting that layout right, much easier.
1. DOCTYPE - cross browser compatibility.
The hardest thing in the world is getting something to look the same in IE, Firefox, Safari and Opera. And there's a reason for that, they all were created unequally. However, there is a way to tell them to try their best to do things the same... and that's the DOCTYPE.
Now, the BEST thing you can do, is learn the subtle differences inherent in XHTML, which includes putting /> as a closer to tags. These things are annoying to learn but once you do, you'll get pages looking just how you want. To make your page an XHTML document, you use this at the very top:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' id='yoursitename'>
Notice the word "strict" in there. That is what tells all the browsers that this page MUST use the standards set out by W3C... or at least, to the best of it's ability.
Now, XHTML is a tad annoying in it's differences. So if you don't want to learn those differences as well as CSS all in one shot, then you can simply force your HTML4 to be "strict" as well.
To make your page an HTML4 strict document, you use this at the very top:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
And that's it... your browsers, no matter what make or model, will try their very best to make sure that 0px really means 0px.
If you use a WYSIWYG editor, pay attention to this because chances are it filled in this line for you and used "loose" settings, rather than strict.
If the line is not used at all, the browser will assume "loose" and try to use it's own best judgment rather than standards.
2. float: left and float:right
For those of you who are actually using divs to position things on a page, float is your best friend. If you want div2 to be to the right of div1, you set div2 to "float:right;". Easy right?
Well, what happens a lot of the times is that yes, div2 will be to the right. But it'll be right justified way over on the right side of the screen.
What went wrong?
Well, it's floating right of div1, but of the entire page as well. The solution to this is to float div1 left. This puts it left justified as it would have been anyway while left alone.... and then float div2 left as well.
This means div1 = left.... div2 = left. That will infact still put them beside each other and in order... but keep them left justified.
You can do this over and over again with however many divs.
3. float:right puts something underneath still
What happens a lot of the times is that someone makes a main div with width 750px. It fits on most resolutions.
Then a left column will be div1 = 250px; and then make div2 float right and width 500px;. The problem? div2 will still be under div1.
The cause for this is that divs have padding and margins by default, and borders even add pixels if you have them on. So if you add padding, margins and borders... 250 + 500 will actually become much more than 750 in the end. This means that div1 and div2 won't fit... and so it wraps down div2 much like a word processor wraps text.
The solution is to manage that padding, margin and border and make sure you keep very close count on just how many pixels are being used for each div. This means counting the LEFT and RIGHT side of the div.
3. clear: both;
So you have some divs floating left and right... but the next div you make, even though it doesn't have a float set... still shows up to the right of the last div! How come???
It's because it's still listening to the CSS of the previous div.
It's for this reason that "clear:both;" was created, but not everyone knows about it.
clear:both is actually just the fast way of saying clear: left AND clear: right... so you could use them individually if you only have one set in the divs above it.
If you have div1 float left, and div2 float left... and want div3 to be neatly underneath, then you'll need a dummy div... like this.
<div1 style='float: left;'> text </div>
<div2 style='float: left;'> text </div>
<div style='clear:both;'></div>
<div3>Text goes underneath here</div>
Most people who know CSS well will say "well, duh" to this stuff. But for people who are just learning to move divs around and use them instead of tables to make layouts.... these things will save you many many headaches down the road.
I hope it helps... and I hope others share their discoveries that have made CSS much easier.
For those people, here are some HUGE fundamentals that I have learned that make getting that layout right, much easier.
1. DOCTYPE - cross browser compatibility.
The hardest thing in the world is getting something to look the same in IE, Firefox, Safari and Opera. And there's a reason for that, they all were created unequally. However, there is a way to tell them to try their best to do things the same... and that's the DOCTYPE.
Now, the BEST thing you can do, is learn the subtle differences inherent in XHTML, which includes putting /> as a closer to tags. These things are annoying to learn but once you do, you'll get pages looking just how you want. To make your page an XHTML document, you use this at the very top:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' id='yoursitename'>
Notice the word "strict" in there. That is what tells all the browsers that this page MUST use the standards set out by W3C... or at least, to the best of it's ability.
Now, XHTML is a tad annoying in it's differences. So if you don't want to learn those differences as well as CSS all in one shot, then you can simply force your HTML4 to be "strict" as well.
To make your page an HTML4 strict document, you use this at the very top:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
And that's it... your browsers, no matter what make or model, will try their very best to make sure that 0px really means 0px.
If you use a WYSIWYG editor, pay attention to this because chances are it filled in this line for you and used "loose" settings, rather than strict.
If the line is not used at all, the browser will assume "loose" and try to use it's own best judgment rather than standards.
2. float: left and float:right
For those of you who are actually using divs to position things on a page, float is your best friend. If you want div2 to be to the right of div1, you set div2 to "float:right;". Easy right?
Well, what happens a lot of the times is that yes, div2 will be to the right. But it'll be right justified way over on the right side of the screen.
What went wrong?
Well, it's floating right of div1, but of the entire page as well. The solution to this is to float div1 left. This puts it left justified as it would have been anyway while left alone.... and then float div2 left as well.
This means div1 = left.... div2 = left. That will infact still put them beside each other and in order... but keep them left justified.
You can do this over and over again with however many divs.
3. float:right puts something underneath still
What happens a lot of the times is that someone makes a main div with width 750px. It fits on most resolutions.
Then a left column will be div1 = 250px; and then make div2 float right and width 500px;. The problem? div2 will still be under div1.
The cause for this is that divs have padding and margins by default, and borders even add pixels if you have them on. So if you add padding, margins and borders... 250 + 500 will actually become much more than 750 in the end. This means that div1 and div2 won't fit... and so it wraps down div2 much like a word processor wraps text.
The solution is to manage that padding, margin and border and make sure you keep very close count on just how many pixels are being used for each div. This means counting the LEFT and RIGHT side of the div.
3. clear: both;
So you have some divs floating left and right... but the next div you make, even though it doesn't have a float set... still shows up to the right of the last div! How come???
It's because it's still listening to the CSS of the previous div.
It's for this reason that "clear:both;" was created, but not everyone knows about it.
clear:both is actually just the fast way of saying clear: left AND clear: right... so you could use them individually if you only have one set in the divs above it.
If you have div1 float left, and div2 float left... and want div3 to be neatly underneath, then you'll need a dummy div... like this.
<div1 style='float: left;'> text </div>
<div2 style='float: left;'> text </div>
<div style='clear:both;'></div>
<div3>Text goes underneath here</div>
Most people who know CSS well will say "well, duh" to this stuff. But for people who are just learning to move divs around and use them instead of tables to make layouts.... these things will save you many many headaches down the road.
I hope it helps... and I hope others share their discoveries that have made CSS much easier.
Shame GFY doesnt have post editing, or you could just keep expanding on the initial post like you would on any other 'tutorial' style forum 
Comment