Some CSS "must knows" from me, and please share yours

One of the best advantages to CSS is to programmers.

5. CSS for programmers

CSS makes a slick looking web page, but more importantly, it will greatly simplify your PHP/other code.

Imagine if you will, a gallery that has 15 thumbs in it. You can have your code create a row <tr> and then so many <td>s and then another <tr> at $rowcount=5; and then another <tr>.... and so on. And figure out when to do your ifs and elses.... it's a pain to do something simple.

Now imagine that in CSS, you created a div that's 700px width. So far so good.

Now you can have each thumb set up like this:
<a href='fullsize1.jpg'><img src='thumb1.jpg' class='thumb'></a>
<a href='fullsize2.jpg'><img src='thumb2.jpg' class='thumb'></a>
<a href='fullsize3.jpg'><img src='thumb3.jpg' class='thumb'></a>
...
...
so on.

And CSS the thumbs to float: left;
.thumb {
float: left;
}

Now the thumbs will go next to each other side by side, and wrap on their own down a row once there is not enough room. So you can change the size of your containing div to 500px if you want, and the thumbs will just know what to do on their own!! They'll wrap at a different thumb!

Want to space the thumbs? padding: 5px.
.thumb {
float: left;
padding: 5px;
}

Simple right? Now apply this to your code. Instead of doing the math to figure out when <tr>s start and end.... we just have a simple loop that does all of the images in a stardard output. The CSS does the rest.

This applies to many things, including menu options, lists... what have you.

Your PHP will be simplified once you don't have to figure out where in the code to put counters to track when to enter an HTML element.

nice thread.... bookmarked..

same strategy works to define colors, fonts, backgrounds/colors, table styles
form styles....that way you can keep all html basic and do all the styling with
seperate css.files which you include in the head part of the html

I still hate tableless designing :X

you'd still use tables but without table properties like width, height, color,
align or anything else, instead you use CSS to define all those so you could
use the same html for multiple pages that look different but just changing
the stylesheet. Very handy for galleries, templates

It doesn't have to be so bad. When done right, you can convert ANY tabled design into a CSS/div design and have 0 differences in appearance...

but the same can't be said for vice versa.

In response to the UL/LI concern here:
http://www.gofuckyourself.com/showthread.php?t=750133

6. Lists are not the same in IE/Firefox

* For this post, I'm using "UL" but this works the exact same for "OL" lists as well.

Lists are handled differently across multiple browsers even when you use the strict DOCTYPE. Why? I don't know. But IE tends to think it knows best about indenting and will try to do so no matter what.

The way around this is to force your list and your listed items to nothing... and then work from there.
For Example:

ul {
list-style: none;
margin: 0px;
padding: 0px;
}

li {
margin: 0px;
padding: 0px;
}

This will make everything line up along the left hand side, no indents, no spacing.... no bullet points. Nothing. And it will do it in every browser.

Now, there's no limit to where you can go from here. You can push things apart vertically, indent things... what ever you want. And your pixels will count the same in IE and in Firefox from here on out.

But my suggestion is this... if you want the list as a whole moved, use the margin in the ul style. Otherwise, don't touch.

You can handle most eveything you'll need to with the li styles. This will save you a lot of headaches later as you try to position things around your list.

Good thread. Bump

I wasn't going to bother with this, because it's fairly basic and this thread is more for "problems that people get stuck on".... but after mentioning the list styles, this should be covered.

7. margin/padding: top right bottom left

99% of the time, you'll see something like this:
#div {
padding: 5px;
}


What this does is adds 5 pixels of padding on top, right, bottom and left of the div. All around it!!

This is usually good enough, but not always. Sometimes we just want to put some padding to the left of it, to keep it from bumping into something else.

To do this, we have to specify what we want for each of the sides. And doing things in order is very important.
#div {
padding: 0px 0px 0px 5px;
}

This will put 0 pixels of padding on the top, the right and the bottom but it will put 5 pixels of padding on the left.

It's VERY IMPORTANT to keep it in that order... because the browser will, even if you don't.


So, going back to point 6 in this thread, if you want to indent your li elements inwards a few pixels, you would add this:
li {
margin: 0px 0px 0px 3px;
padding: 0px;
}

This will bump in each li element by 3 pixels. If they're too close vertically, you can add some underneath too.
li {
margin: 0px 0px 3px 3px;
padding: 0px;
}

It's pretty easy, but it's important to remember the order around the element.
Top, Right, Bottom, Left.
Keep that in mind and you can move things, or pad them, anywhere you want.

No one else have anything to add?
Any questions?

tables are for spreadsheets!

css is simple, i pay a guy that knows how to do it =]

I'm big on tables but have been messing with CSS layouts more and more. They just seem cleaner. Great thread StuartD!

Thank you. I decided to put together a couple of examples just to demonstrate... maybe not the best (they're done fast) but they should give you the right idea.

1. This is the thumbs idea from #5. You can resize the browser as wide or as narrow as you like and see how the thumbs will just fit.
I challenge you to try it with a table layout.
http://www.9xs.net/thumbs.html



2. This one is a basic layout with a header, left and right column and a footer (copyright).
Look at the source code to see the actual html (everything after the <body>).
There's almost nothing to it at all. Take out the CSS at the top of the page and you'll have a very basic page.
http://www.9xs.net/layout.html



Hopefully these help to illustrate some of my points.

thanks for the info stuart, you truly know what your talking about

Very cool - thanks for taking the time