Michael Sobczyk
CSCI 106
Design: DJ Style
Designer: Ramon Bispo
I’m looking at the “The Road to Enlightenment” div and heading.
They used a box with a width of 291px, float left and a background image for the box.
For the header they used a background image, and a width of 291px and a height of 50px. It also has a
solid white border of 1px.
CSS
.preamble {
width: 291px;
float: left;
background: url(bg_preamble.gif) no-repeat;
}
.preamble h3 {
background: url(header_preamble.gif) no-repeat;
width: 291px;
height: 50px;
margin: 0;
padding: 0;
border-top: 1px solid #ffffff;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
HTML
<div
class="preamble"
id="zen-preamble">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific
tags, incompatible <abbr title="Document Object
Model">DOM</abbr>s, broken <abbr title="Cascading Style
Sheets">CSS</abbr> support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been
achieved thanks to the tireless efforts of folk like the <abbr title="World
Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards
Project">WaSP</abbr>, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the
important lessons of the masters. Begin to see with clarity. Learn to use
the time-honored techniques in new and invigorating fashion. Become
one with the web.</p>
</div>
</section>