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:
- Open Webstorm and create a new empty project named 4-CssLayout.
- Download 4-Wikipedia.html to your new project's directory.
- Add a css file to your project (and make sure that 4-Wikipedia.html uses it).
- Add appropriate styles to your stylesheet so that when you view 4-Wikipedia.html, it looks approximately like the following:
.
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:
- Arrange the high-level divs (talk-contributions-login, article-talk,
read-edit-view-search, tools-panel, mw-body, footer) on the page.
- Set the gray background along the left and bottom
- Get rid of bullets as needed for list items
- Get rid of some of the H3 elements (like Namespaces)
- Make the necessary lists horizontal.
- Arrange the footer sub-divs appropriately within the footer.
- Arrange the read/edit/view and search elements to be horizontal.
- Add the wikipedia logo at the top of the left pane
- Set the infobox so that it floats to the right of the main content (and adjust sizing, border, and background).
Hints