Floats and such!

This lab will be much more about experimentation and trying out new things to get a nice site look. I believe that nearly everyone has mastered how to add content (given maybe a reference sheet of code examples), so we're now getting to making things look cool. The content has already been completely done. If you don't like the content, too bad and don't worry about it. The point of this lab is to manipulate the look.

You'll be modifying the CSS for this page right here. You'll notice that it is very plain looking. You can view here the page that I did.

There are a few requirements that your final page must meet. They're listed in increasing order of difficulty:

1. Avoid editing the HTML. I realize that sometimes, slightly editing the HTML may be necessary to achieve a certain effect. However, when at all possible you should avoid editing the HTML. Legitimate edits include adding/removing <br> tags and moving the content (images and paragraphs or entire divs) around. You can add content to the header or footer divs, which are pretty much empty right now.
2. Make the page centered (specifically, center the container div). If you can't remember how to do this, look at past weeks' sample pages and notice how one can set a width and the margins specially to get it to be centered.
3. 2 examples of:
   • Using margins
   • Using padding
   • Using borders
4. Use a background image at least once.
5. At least 2 or 3 columns. You must use floating divs to achieve this effect. Remember that 2 or more divs may not fit beside each other side by side, so one of them will be moved downwards. Keep in mind that the element's width or height + padding + margins + border all contribute to overall size of the object. Set the div's properties appropriately until they fit.

If you're not very fast with editing CSS/HTML then hurry quickly to get to the point where your page has 2 or 3 columns, then worry about making it look cool. One of the main points of this lab is to expose you to floating elements.

Save the starting web page and skeleton CSS file to your computer. Rename them so that your initials are in the filenames (e.g., "rym4_space.css"). Then, open both of them up in Notepad++. You may have to edit the HTML page slightly to point to the new CSS file.

For now, just look through each file. See how each div is given an ID? Notice how, in the CSS, each IDed section has an empty set of properties? I've thrown in some ideas and comments into the CSS.

Now, make changes to the page so that it verifies as XHTML strict. I've purposefully made some 'common' mistakes in it. Spend about 15 minutes max on this. All the changes should be rather small.

Personally, I'd now decide on a basic look for my web page. Bright bold colors? Dark colors? A clean black and white look? Start changing the text and background colors to match your vision. Go ahead and make any text property changes that you want too (list look, list font size, text font size, the font family being used, etc.).

Now work on getting 2 or 3 columns. Will you have a header section? A footer section? Pick the widths of the columns that you want. For example, if you'll only have 2 columns, the navigation section might be 300 pixels and the content section might be 700 pixels. That would then require that the container section have a width of 1000 pixels (if you want both columns to fit beside each other). To get 2 or more sections to line up vertically alongside each other, you'll have to use floating divs (e.g., "float: left;" or "float: right;"). Experiment with setting the clear property ("clear: left;" or "clear: right;") and see how it effects the displaying of things.

Previous example of using floats:

1. example 1
2. example 2

Once you've got your columns setup. Play with the arrangement of things. If you made the navigation section the far left column, make it the far right column or vice versa. This should be pretty easy to do. When you're done, set it to how you like it.

Now that your layout is basically finished, give the elements margins, padding, and borders to make all of the text easy to read while giving the site a nice look. You probably will have to adjust the widths of your divs.

For example, if you had 2 columns, each 500 pixels wide and had both of them inside a div whose width was 1000 pixels, and if you gave each a padding of 10 pixels, then you'll need to set each column to have a width of 480 (480 + 10 [padding left] + 10 [padding right] = 500).

Now, add the final touches. Use a background image (see the CSS for an example image that you can use. Feel free to find your own images online (assuming you have enough time).

Think about how you could have changed the page. For example, how could you have made the page use a 4 column layout?

1. Call me over to take a look at it.
2. Submit it into the Lab5 folder. Here's the good 'ol FTP submission guide.