Web Design 35S‎ > ‎CSS‎ > ‎

Floating Along

Before you make your web site, make a rough sketch on a piece of paper to show where all the various parts of the assignment will be located. Make sure I see the sketch before you begin.
 

One of the key things to do when making a website it to position the elements on it. Where all the pictures and text are arranged will determine whether you have an attractive or unattractive site.

Today we're going to play with two things namely floating divs and the cascading part of CSS (which stands for cascading style sheets).

  1. What was that about floating divs? you say. Well, as you've already figured out, divs are boxes that you can place on your page. The float will move a div to the side of a page, either to the left or right depending on what you set.
  2. Meanwhile, you're an expert on creating style sheets for your whole site. However CSS can also be used on your page to style individual sections. This is called "inline CSS." If you use CSS right in your page, it takes precedence over anything you put on your style sheet. 
    • Did you get that? If you didn't, now's the time to ask about it.
  3. What you need to do are to create three divs. \
    • Each one starts with <div> and ends with </div>
  4. You are going to style your divs with floats. A "float" command moves the div up to the left or right and nestles it next to the edge or to the nearest object.
  5. In each div you want to insert the style command like so: <div style=float:left></div> This should float your div to the left.
  6. You're going to put three or four pictures in that left div. All the pictures should be the same size.
  7. Set the width of the div to the width of the pictures, for example <div style=float:left;width:200px>
  8. Put in a middle div. Float it to the left. In this div you'll put some writing about your pictures. Set the width to 400px.
  9. Then put in a third div. Float it to the left. Put more pictures in it. Set the width to be the same as the pictures.
  10. If you do the inline styling correctly, you should have a vertical row of pictures on the left and on the right, with a box of text in the center.

Evaluation

  1. Three columns nestled against each other
  2. Center column is wider than the other two.
  3. Left column is full of equal sized pictures
  4. Right column is full of equal sized pictures


Comments