Creating Sidebars with CSS
Sidebars can be a very useful component for many web pages. Not only do they help to break up large blocks of text, but sidebars can also:
- provide a link to a related story
- provide a link to a related photo gallery
- provide a link to extended information, details, statistics, graphs, etc.
Sidebars are also a good way to highlight important information related to a web page:
- deadlines
- reqistration information (ie: hotel information for a conference)
- recent changes to important information
- corrections to previous errors on the page
Creating a sidebar is relatively easy. All sidebars will have a containing <div> tag. Within that container, you can display any number of different elements, using the same style creation steps and conventions you used in the previous two lessons.
A <div class="sidebar-right">
B <p></p> /B
</div> /A
- Insert an overall <div> to contain our sidebar component, with a class attribute of "sidebar-right"
- Enter our sidebar content as a simple paragraph
The style declaration for our "sidebar-right" class would specify things like background, border, and location. By creating a style declaration for .sidebar-right p we can style how paragraph text looks when it is inside a sidebar-right element.
|
