This morning I was asked about slicing in photoshop by CTre, and pretty much I just explained to him that he shouldn't worry about exporting it into Dreamweaver or any of that, but just use the images from the slice to work through his layout. Well, then he asked about tables, so I decided to explain to him a little about floats. Well, here is some further detail and how to use them properly.

Ok, when you make your site, todays standards are XHTML and CSS. That is in pretty good reason, because tables are very difficult to keep maintained without overflow and tend to be very sloppy for designing for multiple browsers and resolutions. For an example, unless you use %, a site that looks good on 1024x768 is going to be either tiny for 1280x1024 or humungous for 800x600 and will make you scroll a lot. If you do use %, it's either going to be cramped in 800x600 or it's going to be stretched very ugly like in 1280x1024. Surely you get my point. With CSS, not only do you have more control of the size, but you also have 100% control of positioning.

Ok, this is should be a rather simple tutorial. Open up the CSS for your site (or create a new one, doesn't matter), and take a look at the following code:

Ok, the #middle defines your DIV id, just so you understand what that is for. The brackets {} is there because it has to be around the elements (Yes, this tutorial is for complete CSS noobs). Ok, if you look at your margin, this will be what you are going to look at to correct your positioning. This float is meant to be in the center of the page, just so you understand the positioning, but the 4 different areas are for distance from the top, bottom, left, and right.

Padding is to show the difference between the border and the content itself. Same has HTML tables.

Surely if you have any HTML knowledge I shouldn't have to explain background, but that does just what it says...sets the background.

Let's look at a more advanced float, shall we?

Ok, aside from what you have already learned, using the top and right it will make your positioning much more direct, and much easier for you. I still use the four points for my middle columns just because I want distance instead of absolute distance, but for a nav bar it is much easier. Now, if you look at border you will notice that I have a few special things. I have a dashed border ( - - - ) with a size and color. For an example of what it looks like, look at http://www.melodeath.com (that is the same code that I'm using as examples right here).

Ok, now that that is taken care of, let's look at the HTML side of it. In our HTML document, use this:

Just put all of your information inside of those divs. You can make div classes for different kinds of formatting, which perhaps a later day I can explain, but that is all you have to do for floats. Using these, you can make your web layouts using the correct standards, and will also look more professional (you should see my old HTML layouts...phew). This also makes things easier when coding in PHP in my opinion, well, try it and see if you like it. Hopefully more to come with the CSS tuts, and maybe this will get Pat to post some of his excessive knowledge