In-Class exercise: CSS Layout

CSS Layout

In the last in-class exercise, we looked at styling (mostly text). In this exercise, we'll focus mostly on layout: placing elements on the page.

We'll be using a (somewhat-simplified) version of a Wikipedia webpage. Your job is to create CSS for the page to approximate the layout of that page within Wikipedia. Here's what it looks like with the real styling:

  1. Open Webstorm and create a new empty project named 4-CssLayout.
  2. Download 4-Wikipedia.html to your new project's directory.
  3. Add a css file to your project (and make sure that 4-Wikipedia.html uses it).
  4. Add appropriate styles to your stylesheet so that when you view 4-Wikipedia.html, it looks approximately like the following:

    desired HTML with style.

    Note that you may not make any changes to the HTML file (other than adding the reference to the style tag).

    Suggestion: work bit-by-bit (baby steps). One possible sequence of steps:

    1. Arrange the high-level divs (talk-contributions-login, article-talk, read-edit-view-search, tools-panel, mw-body, footer) on the page.
    2. Set the gray background along the left and bottom
    3. Get rid of bullets as needed for list items
    4. Get rid of some of the H3 elements (like Namespaces)
    5. Make the necessary lists horizontal.
    6. Arrange the footer sub-divs appropriately within the footer.
    7. Arrange the read/edit/view and search elements to be horizontal.
    8. Add the wikipedia logo at the top of the left pane
    9. Set the infobox so that it floats to the right of the main content (and adjust sizing, border, and background).

Hints