I imagine by now you're probably thinking margins, padding and borders are pretty dull stuff. Sure, they're good for highlighting an important item, off-setting a bit of text, but that's about it, you can't really do anything with them. Or can you. Let's design an interesting web page, without any graphics.
Just remember... it is CSS. The page will display in older browsers, but it will be plain. Backwards compatibility only means the page will be legible, not beautiful.
First we'll need a title banner announcing the name of the site. For this I used three boxes, slightly offset from each other. The boxes were staggered by specifying sequentially larger margin-left values. Padding was added to place the text in the desired position inside the border; line-height was added to keep the height of the boxes from being excessively high.
.button1 {
font : bold medium/0.7em Arial, sans-serif;
color: #000000;
background : #999999;
text-align : right;
margin-left : 2em;
padding : 0.3em 0.1em 0;
border-width : medium;
border-style : solid;
width : 200px;
}
Compare .button1 to .button2 and .button3 found on the completed style sheet for this page.
Once the 'buttons' were in place I needed to decide on a design for the page. I settled on a staggered/over-lapping box effect to best illustrate the effects that can be achieved with the margin/padding properties. This effect is better illustrated in this browser, but the effect is not at all displeasing in the other, just not quite as effective.
Declarations were added to the style sheet for three 'tiers', the center-focus tier, a tier with a negative margin-left value and one with a negative margin-right value. I tied the three tiers together with an additional DIV to center them on the page.
.tier2 {
color: black;
background: #999999;
border: .5em solid #000000;
margin-left: 10px;
margin-right: 15px;
padding: 3em .1em .1em 3em;
}
.tier3 {
color: black;
background: #FFFFFF;
border: solid;
margin-left: -70px;
margin-right: 25px;
padding: .5em .5em .5em 3em;
}
.tier4 {
color: black;
background: #E6E6FA;
border: .5em solid #000000;
margin-left: 25px;
margin-right: -35px;
padding: .1em 2em;
}
.main { margin-left: 2px;
margin-right: 2px;
}
Each paragraph was given a negative text-indent to distinguish the beginning of the paragraphs.
Without a doubt, this layout is more interesting if you're viewing it in a browser that displays the negative margins. View the full style sheet for this page.
