samples for download
Positioning in CSS is deceptively simple in concept. There are only a handful of relevant properties. Here is a review of the properties:
- position has five possible values: static, relative, absolute, fixed and inherit. Relative displaces the element relative to where it would have been in the normal flow of an uninterrupted HTML page. It works rather like an offset. Absolute allows you to place an element exactly where you want it. Absolute positioning disrupts the flow of the page and places an element exactly where you say regardless of the other elements on the page. It pulls the positioned element outside the flow of the page. The other elements on the page will continue to flow, ignoring the absolutely positioned content. Sometimes this can cause disturbing pile ups. Absolute positioning can take advantage of the z-index property to organize the elements in three dimensions. Using it you can create wonderful layered effects. Relative and absolute positioning are frequently used together. The relatively positioned element contains the absolutely positioned elements. We will be taking a closer look at this later on in our module.
- float allows elements to sit next to each other at the same height within a page. Left to their own devices, the natural behavior of block elements is to stack one on top of the other. Floats permit block level elements to sit next to each and still retain the properties of a block.
- clear interrupts the float and begins a new line. It is used in tandem with the float property.
- visibility has two values: visible and hidden. This property allows you to place an invisible element on a page and then use a JavaScript event to reveal the text on demand. There are a lot of interesting interfaces based on this concept.
- overflow tells the browser what to do if it has more content than an element can comfortably handle. It can be set to visible, which resizes the box; hidden, which hides the extra content; scroll, which inserts a scroll bar; and auto, which inserts a scroll bar only when needed. Combining the overflow property with the scroll set to auto is how modern iframes are implemented. To use the overflow property effectively, the dimensions of the element need to be defined.
The first two sections, baked and savory, get right margins. The last column doesn't need a right margin because it is the last and furthest right.
While we're at it, let's make sure the section headlines, the h3's, are all at the top. Our additional code looks like this so far:
Next we turn our attention to the article tags. In our reset CSS we defined the article tag as a block level tag. Each article will contain a floated image, so the article itself will need be floated left to contain the floated image. Since the article tags are floated, they will also need to clear the floats. Line 140 clears the floats, Line 141 adds a float left to each article.
Then we add a bit of margin to the top and bottom of each article to give them a bit of air.
We set the articles width to "inherit" their width from their parent, which is the sections. The sections are 285px wide. We could also have set the articles' width to be 100%, it would have produced similar results.
Finally we add a dotted top border to each article. Our article style reads like this:
No comments:
Post a Comment