Alt-Web Design & Publishing
CSS2 & HTML Tutorial
Bringing Image Slices into a CSS-based Layout
Method:
1. Start with these three image slices and save them to an Image folder in your local site.
Download the Zip File (with images & html page)
Top
Middle
Bottom
2. Copy & paste this CSS code into your external stylesheet.
CSS Code
#TopContainer {
text-align:center;
height:50px;
background:url(Images/Pshop3_01.gif) no-repeat top;}
#MainContainer {
text-align:center;
background: url(Images/Pshop3_02.gif) repeat-y center;}
.contentContainer {
padding:1em;
margin:0 auto;
width:500px;
text-align:center;}
.left {text-align:left}
#BottomContainer {
text-align:center;
height:50px;
background:url(Images/Pshop3_03.gif) no-repeat bottom;}
3. Copy and paste this code into your html page between the <body> and </body> tags.
HTML Code
<div id="TopContainer"> </div> <!--end TopContainer -->
<div id="MainContainer">
<div class="contentContainer">
<h3 class="left">Finished box</h3>
<p class="left">Increase/decrease text size in your browser to test this container's ability to expand or contract accordingly.</p>
<p class="left">Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.</p>
</div> <!--end contentContainer -->
</div> <!--end MainContainer -->
<div id="BottomContainer"> </div> <!--end BottomContainer -->
Finished box
Increase/decrease text size in your browser to test this container's ability to expand or contract accordingly.
Lorem ipsum dolor sit amet, eodem eleifend ad consuetudium humanitatis formas. Adipiscing est nulla in nihil nibh id. Claram processus hendrerit eorum ii investigationes delenit ut mazim. Amet iusto cum ex veniam me, anteposuerit commodo et at. Facit sollemnes saepius non lectores litterarum. Insitam eu quod te volutpat tincidunt eua nobis lius per. Iriure molestie dynamicus, erat decima. Videntur consequat legunt te odio assum iusto me est. Non, per elit, nunc suscipit fiant enim at. Euismod consuetudium videntur ad hendrerit eodem adipiscing laoreet cum claritas, etiam.
