Laying Out Pages with CSS | How to create CSS layout
9:23 PM
•
CSS Layout Basics,
CSS Layout Creation,
Web Designer Resources
•
An intriguing development over the past several years has been the move
away from table-based design to transitional designs using lighter tables
and CSS, or out-and-out pure CSS layouts.
CSS ultimately frees the designer by providing much richer and more diverse
means of presenting and deliv
But page layout with CSS is in relatively early days yet, so designers need a lot of
additional information to work with their layouts effectively.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout Content Right, Navigation Left</title>
<style type="text/css">
#content
{
margin:0px 50px 50px 175px;
padding:10px;
}
#nav
{
position:absolute;
top:50px;
left:20px;
width:200px;
padding:10px;
line-height:17px;
}
</style>
</head>
<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum estibulum elit. Ut porta. Duis vulputate bibendum tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi mattis viverra turpis. Pellentesque blandit quam in sapien. Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna. Ut adipiscing.
</p>
<p>
Morbi ut sem non diam fringilla tincidunt. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim. Sed posuere turpis at nisl. Sed at sem. Nullam sagittis tincidunt magna. Duis tempus. Proin dui turpis, consequat quis, porttitor ut, molestie vel, libero. Phasellus sodales venenatis urna.
</p>
</div>
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="books.html">Books</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="consultation.html">Consultation</a></li>
<li><a href="about.html">About Molly</a></li>
<li><a href="fun.html">Fun Stuff</a></li>
</ul>
</div>
</body>
</html>
away from table-based design to transitional designs using lighter tables
and CSS, or out-and-out pure CSS layouts.
CSS ultimately frees the designer by providing much richer and more diverse
means of presenting and deliv
ering designs to various media including, but not
limited to, the following:
limited to, the following:
- Screen
- Projection
- Audio
- Braille
- Television
But page layout with CSS is in relatively early days yet, so designers need a lot of
additional information to work with their layouts effectively.
CSS Layout Basics
Several terms and concepts are referred to throughout this chapter, so it’s good to
let you know them up front:
- Box Model - Any HTML or XHTML element creates a box, and you can use CSS to access and style aspects of that box, including margins, padding, and borders. There are problems in Box Model
- Implementations—which is one of the reasons that CSS layouts require so much attention to detail and often require hacks to ensure proper cross-browser display.
- Graceful degradation- This is the concept that when styles are removed from a design, the actual text content is still available and easily accessed, even if all the visual layout and design elements are gone.
- Hack - A hack is any use of code outside its original, intended purpose.
- Workaround - A workaround is typically an exploitation of a bug within a browser allowing you to bypass support problems. Hacks and workarounds are very similar, and there’s always dissent as to whether a hack is a hack, a workaround, or a technique.
- Positioning - In CSS, you can position element boxes either absolutely, via specific coordinates, or relatively, in relation to other elements. You can create complete layouts with absolute positioning, as is sometimes called for.
- Floats - Floats in CSS are a means of floating something to the right or left. Intended mostly to float images, floating has become one form of laying out documents.
- Filters - Filters in this context are a means of bypassing specific browsers while targeting others. Filters are really hacks, but the terminology is used to define specific hacks that are filtering specific browsers.
Example :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout Content Right, Navigation Left</title>
<style type="text/css">
#content
{
margin:0px 50px 50px 175px;
padding:10px;
}
#nav
{
position:absolute;
top:50px;
left:20px;
width:200px;
padding:10px;
line-height:17px;
}
</style>
</head>
<body>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum estibulum elit. Ut porta. Duis vulputate bibendum tellus. Vivamus dictum egestas mi. Cras justo. Vestibulum nisl mauris, convallis a, vestibulum et, accumsan vel, lacus. Morbi mattis viverra turpis. Pellentesque blandit quam in sapien. Proin pellentesque, purus sit amet mollis sollicitudin, lacus leo rhoncus enim, nec vestibulum urna tellus at magna. Ut adipiscing.
</p>
<p>
Morbi ut sem non diam fringilla tincidunt. Maecenas nunc tellus, adipiscing eget, tincidunt ut, venenatis ut, enim. Sed posuere turpis at nisl. Sed at sem. Nullam sagittis tincidunt magna. Duis tempus. Proin dui turpis, consequat quis, porttitor ut, molestie vel, libero. Phasellus sodales venenatis urna.
</p>
</div>
<div id="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="books.html">Books</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="consultation.html">Consultation</a></li>
<li><a href="about.html">About Molly</a></li>
<li><a href="fun.html">Fun Stuff</a></li>
</ul>
</div>
</body>
</html>
