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

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="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>

</div>

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.