Here - let me parse it out for you....
Here is the code on the page -
<body>
<div id="wrapper">
<div id="top">
<div id="bottom">
<div id="content">
<p>Consectetur adipisicing elit, excepteur sint occaecat cupidatat
non
proident. Eu fugiat nulla pariatur. Velit esse cillum dolore ut
enim
ad minim veniam, lorem ipsum dolor sit amet.</p>
<p>Qui officia deserunt ullamco laboris nisi sunt in culpa. In
reprehenderit
in voluptate quis nostrud exercitation mollit anim id est laborum.
Ut enim ad minim veniam, cupidatat non proident, lorem ipsum dolor
sit amet. Ullamco laboris nisi. Quis nostrud exercitation lorem
ipsum
dolor sit amet, ut aliquip ex ea commodo consequat.</p>
<p>Excepteur sint occaecat ut labore et dolore magna aliqua. Sunt in
culpa mollit anim id est laborum. In reprehenderit in voluptate
cupidatat
non proident, lorem ipsum dolor sit amet. Eu fugiat nulla
pariatur.
Consectetur adipisicing elit, ullamco laboris nisi duis aute irure
dolor.</p>
<p>Lorem ipsum dolor sit amet, ullamco laboris nisi duis aute irure
dolor.
Eu fugiat nulla pariatur. Velit esse cillum dolore consectetur
adipisicing
elit, ut labore et dolore magna aliqua.</p>
<p>Qui officia deserunt ullamco laboris nisi ut enim ad minim
veniam.
In reprehenderit in voluptate excepteur sint occaecat ut labore et
dolore magna aliqua. Consectetur adipisicing elit, sunt in culpa
sed
do eiusmod tempor incididunt. Mollit anim id est laborum.</p>
<p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo
consequat.
Ut labore et dolore magna aliqua. Cupidatat non proident, quis
nostrud
exercitation in reprehenderit in voluptate. Qui officia deserunt
lorem
ipsum dolor sit amet, ut enim ad minim veniam.</p>
<!-- /content --></div>
<!-- /bottom --></div>
<!-- /top --></div>
<!-- /wrapper --></div>
</body>
Note that there are three 'containers' nested sequentially within each
other: content is the innermost. It is nested in bottom, which is nested
within top.
Content has a background image that is the darkened left and right vertical
sides of the 'box' graphic. It is set to tile in the vertical only,
establishing a left and right graphic border to the content area that
expands as the content expands. The container called bottom has a background
image that is set to not repeat, and that is positioned at the BOTTOM of the
container. This is the bottom graphic edge to the surrounding box. A
similar approach is used for the container called "top" except that the
background image is positioned at the top of the container.
I could have done the same thing with three non-nested containers just
stacked one on top of the other, but this seemed simpler.
For your consideration, here is the associated CSS -
<style type="text/css">
<!--
html, body {
min-height:101%;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
text-align:center;
font-size:100%;
}
#wrapper {
text-align:left;
width:486px;
margin:0 auto;
background-image: url(images/film-clipbkg_tile.jpg);
background-repeat: repeat-y;
}
#wrapper #bottom {
z-index: 1;
background-image: url(images/film-clipbottom.jpg);
background-position: bottom;
background-repeat: no-repeat;
}
#wrapper #content {
z-index: 99;
padding: 40px;
}
#wrapper #top {
z-index: 1;
background-image: url(images/film-cliptop.jpg);
background-repeat: no-repeat;
}
-->
</style>
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"David A. Prontnicki" <webforumsuser (AT) macromedia (DOT) com> wrote
Quote:
Yes that is exactly what i'm looking to do. How did you do it?
|
Re: 100% Height or Working with vertical spacer images -
11-08-2005
, 08:37 AM
Linear Mode
