Приглашаем посетить

Complex Layouts

Now the task before you is to begin combining techniques to come out with more advanced layouts. A good example is a fixed, centered design with three columns. If you're thinking you'd mix the positioning technique for centered, fixed designs with floats for the columns, go to the head of the class! Example 13-7 shows how.

Example 13-7. Complex layout with centering, positioning, and floats

[View full width]

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>working with style</title>
<style type="text/css">
#container {position: absolute; left: 50%; margin-left: -300px; width: 600px; margin-top:
 10px;}
#masthead {width: 600px;}
#nav {float: left; width: 150px;}
#content {float: left; width: 290px; margin-right: 5px; margin-left: 5px;}
#sidebar {float: right; width: 140px; margin-right: 10px;}
#footer {clear: both; width: 600px;}
</style>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<div id="container">
<div id="masthead">
<h1>Readings from Edgar Allen Poe</h1>
</div>
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="poe3.html">Forward</a></li>
<li><a href="poe1.html">Back</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>The Black Cat</h1>
<h2>By Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my
 own. Observing my partiality for domestic pets, she lost no opportunity of procuring those
 of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish
, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This latter was a <a href="http://vig.prenhall.com/">remarkably</a> large and beautiful
 animal, entirely black, and sagacious to an astonishing degree. In speaking of his
 intelligence, my wife, who at heart was not a little tinctured with superstition, made
 frequent allusion to the ancient popular notion, which regarded all black cats as witches
 in disguise. Not that she was ever serious upon this point - and I mention the matter at
 all for no better reason than that it happens, just now, to be remembered.</p>
<p>Pluto - this was the cat's name - was my <a href="http://vig.prenhall.com/">favorite</a>
 pet and playmate. I alone fed him, and he attended me wherever I went about the house. It
 was even with difficulty that I could prevent him from following me through the streets.</p>
</div>
<div id="sidebar">
<h2>poe trivia</h2>
<p> Best known for his poems and short fiction, Edgar Allan Poe, born in Boston, Jan. 19,
 1809, died  Oct. 7, 1849 in Baltimore, deserves more credit than any other writer for the
 transformation of the short story from anecdote to art.</p>
<p>He virtually created the detective story and perfected the psychological thriller. He
 also produced some of the most influential literary criticism of his time -- important
 theoretical statements on poetry and the short story -- and has had a worldwide influence
 on literature.</p>
</div>
<div id="footer">
<p class="footertext">All text content is in the public domain. Images &copy; 2004</p>
</div>
</div>
</body>
</html>

I've got a couple of things to point out: First, you'll see how I've used embedded style to demonstrate the fundamental layout technique, and linked a style sheet to handle my other styles. Next, I've included all the divs within the main container div. This enables me to center the float-based design (see Figure 13-10).

Figure 13-10. Complex CSS layout.

Complex Layouts

Table of Contents