...and people will notice, too!
Here's a peculiar use of CSS. Recreation of an outdoor scene, presumably for some sort of message board. The cloudy background is FIXED in the BODY. The top of the fence it it's own DIV with no content but a specific height. The big rock, the fence, and the little rocks at the bottom are all 100% height DIVs nexted inside each other. (We could've stuck anything behind/in front of the fence... grass, junk, a
the content is inside the 'lilrocks' DIV. To complete the look, we add a 'sign' class and a couple floating bolt DIVs. The end result is as eye-catching as it is pointless. Of course, in this day and age, 'eye-catching' is the point (or at least the 'starting point'!)
A simple, fixed background (fixed to provide a 'depth' illusion when you scroll the page and the fence moves but the sky doesn't). The margin:0; lets the other DIVs touch the edges of the window, and the height:100%; is required so that the DIVs nested inside with 'height:100%;' have a basis for reference ("100% of what?")
BODY {
background: url(cloudy.jpg) fixed;
margin:0;
height:100%;
}
 300x300 cloudy.jpg |
The fence top is designed to repeat across the top only. We give it a height so that it won't need content to appear, and will push the fence & rock DIVs down (to keep the tiled FENCE from filling to the top of the window)
We specify top and left as background positions of both to make sure the tiled fence lines up with the top.
.FenceTop {
background: url(fencetop.gif) repeat-x top left;
height:66px;
}
.Fence {
background: url(fence.gif) top left;
height:100%;
}
 228x66 fencetop.gif |
 57x66 fence.gif |
Basically more 'edge' DIVs, one off-center on the bottom and one to repeat along the bottom. You could use any graphic, put single objects (like the big rock) in front of the fence, etc. or layer as many in as you want. This is just to give you an idea...
The two percentages in the background property of the big rock are our positioning. It goes by order: the first is the X position (left/right,) the second is the Y position (top/bottom).
.BigRock {
background: url(bigrock.gif) bottom no-repeat 30% 100%;
height:100%;
}
.LilRocks {
background: url(rockbottom.gif) bottom repeat-x;
height:100%;
margin-top:1em;
padding-left:2em;
padding-right:2em;
padding-top:1em;
padding-bottom:4em;
/* padding-bottom to reveal big rock under content */
}
 205x139 bigrock.gif |
 267x31 rockbottom.gif |
A heavy border, slightly heavier and darker on the right & bottom to suggest depth/shadow. The bolts are self-contained DIVs with the float property set to right-or left. IMGs with ALIGN=LEFT or ALIGN=RIGHT could do the same thing, but then each bolt would take more HTML to draw, and to be properly compliant we'd have to provide ALT text on something that is truly only eye-candy.
.Sign {
background: url(whitewood.jpg);
border-left:3px solid #666;
border-top:3px solid #666;
border-right:5px ridge #999;
border-bottom:5px ridge #999;
margin-left:10%;
margin-right:10%;
margin-top:1.5em;
margin-bottom:5em;
padding:1em;
clear:all;
}
.LeftBolt {
background: url(bolt.gif) no-repeat;
width:26;
height:27;
float:left;
margin-right:20px;
}
.RightBolt {
background: url(bolt.gif) no-repeat;
width:26;
height:27;
float:right;
margin-left:20px;
}
 100x100 whitewood.jpg |
 26x27 bolt.gif |
Well, here it is--how to make all that wierdness fit together. This is the condensed version of what you'd see in the source of this page.
<HEAD> <STYLE><!-- (insert all CSS above here) --></STYLE></HEAD> <body> <div class=FenceTop></div><!--Self-contained--> <!--Three Nested levels of full-page DIVs--> <div class=BigRock><div class=Fence><div class=LilRocks> <!--Repeat this block for each 'sign'--> <div class=Sign> <div class=LeftBolt></div><div class=RightBolt></div> content ... content ... content <div class=LeftBolt></div><div class=RightBolt></div> (Short Content Line) and/or <br clear=all> </div><!--SIGN--> <p style="margin-top:10em;"></p><!--Gap at bottom--> </div><!--LILROCKS--></div><!--FENCE--></div><!--BIGROCK--> </body>
The only other graphic on the
|
260x59 notice.gif |