Boxing with CSS, Part II: No Margin For Error
Exercises
|
| ||||
| ||||
|
|
This concludes our two-part introduction to the CSS visual formatting model. By now, you know how to control the box model properties, and how to do simple layout of block elements one after the other. The following excercises will help you get the bigger picture of how these methods are put into action despite browser bugs.
Explorer Challenge
Take the document below, and try to make it look like it should if it had the following style sheet:
BODY { margin: 1em; padding: 1em; } DIV { padding: 1em; margin: 1em; border: 1em solid green; background: cyan; } P { padding: 1em; margin: 1em; border: 1em solid blue; background: magenta; }
The style sheet you use should be legal CSS, and not create any bizarre effects if tried on Navigator or according to the specification. Any one who manages to do this, tell me how and you'll get an honorary mention in this tutorial.
<BODY> <DIV> <P>Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts.</P> <P>We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach.</P> </DIV> </BODY>
Netscape Coloring
Take the document above, and make both paragraphs have a square green background, with a white background on the body, without any borders showing.
