Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Sample Design: A Cohesive Web Design

For this sample design, you will convert a web page design into an HTML and CSS design by using several of the solutions discussed in this book.

Setting the Page

The first step is to mark up the document with div elements:

<div id="header" class="">
 <h1><a href="/" title="Home Page">Kirkland Composition &amp;
Copyediting</a></h1>
</div><!-- /#header -->

<hr />

<div id="nav" class="">
 <div id="nav-site">
  <p class="hide">Content Navigation:</p>
  <ul>
   <li id="linkservices"><a href="/services/">Services</a></li>
   <li id="linkrates"><a href="/rates/">Rates</a></li>
   <li id="linkclients"><a href="/clients/">Clients</a></li>
   <li id="linksamples"><a href="/samples">Samples</a></li>
  </ul>
 </div>
 <div id="nav-info">
  <p class="hide">Information Navigation:</p>
  <ul>
   <li><a href="/about/">About</a></li>
   <li><a href="/guarentee/">Guarantee</a></li>
   <li><a href="/contact/">Contact</a></li>
  </ul>
 </div><!-- /#nav-info -->
</div><!-- /#nav -->

<hr />

<div id="content" class="">
 <div id="article">
  [...]
 </div><!-- /#article -->
<div id="aside" class="">
  [...]
 </div><!-- /#aside -->
</div><!-- /#content -->

<hr />

<div id="footer" class="">
 [...]
</div>

Note

I used HTML5 elements as id attribute values where possible. As HTML5 gains wider adoption in browsers, it will be easier to convert completely to the HTML5 DOCTYPE.

The first step is to use a CSS reset (see Resetting Browser-Style Defaults for Elements) to remove out-of-the-box settings by the browser, as shown in ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required