With these layout basics you can now begin to structure a document.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sample Layout Beginning</title>
<style type="text/css">
body {
margin: 0;
font-family: Arial;
}
/* The box to nest the left and right divs inside, keeping to 800px wide minus 1px for border to match footer width. */
#container {
width: 799px;
background-color: #fff;
border-right: solid 1px #ccc;
}
/* Left sidebar */
#left {
width: 125px;
float:left;
background-color: #ccc;
padding:5px;
border-right: solid 1px black;
border-bottom: solid 1px black;
height: 500px;
}
/* Navigation menu */
ul.nav {
margin: 20px 0;
padding: 0;
list-style: none; /* no list bullets */
}
.nav a {
font-weight: bold;
font-size: 110%;
color: #909090;
}
/* Content */
#right {
width: 600px;
float:right;
background-color:inherit;
margin-right: 20px;
}
/* Footer and copyright */
#footer {
clear: both;
width: 800px;
float:none;
border-top: solid 1px #CCC;
text-align: center;
background-color: #C0C0C0;
height: 30px;
}
/* image float */
div#container #right img.left {
float:left;
padding: 4px;
border: 1px solid gray;
margin: 4px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">sample.com
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="right"><h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras non odio. Nunc vel mi id enim egestas bibendum. Donec arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas pulvinar ante vel justo. Etiam nec ipsum. Nulla facilisi. Sed nonummy fringilla nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus odio lectus, tempor in, tempus a, porta ac, velit. Maecenas id est at nunc porta varius.</p>
<ol>
<li>List Item</li>
<li>List Item</li>
</ol>
<p><img src="thumb.gif" class="left" alt="all day breakfast" />Donec vitae erat. Ut metus. Quisque quis diam. Cras justo mauris, placerat ac, faucibus ut, ultrices non, urna. Proin tristique ultricies erat. Morbi convallis nibh a dolor. Fusce quis justo. Mauris dignissim magna ac erat. Integer metus nisl, cursus at, posuere vitae, consequat nec, elit. Nulla facilisi.</p>
</div>
</div>
<div id="footer">copyright 2006</div>
</body>
</html>
(insert layoutstart.gif)
While working on your document and stylesheets, it is suggest to check your code in the main browsers such as Internet Explorer versions 6 and higher, and Firefox versions 1 and 2 at the least. While these are the most common browsers, you might also want to check in Mozilla, Opera, and Mac Safari. You should also make sure your code validates. You can do so at http://www.w3c.org. They have very useful CSS validators online (as well as XHTML and others) that will check your raw code, a page URL that you enter in their form, or by file upload.
TABLES VS CSS
The internet began as a text based medium, before HTML was heard of. With the development of HTML and the ability to present documents with more flair, tables were intended to present tabular data. But then designers realised that they could use tables to manipulate the content layout using these tables.
There are designers in both the pro-table and the pro-css layout camps, passionate about their tools. Finding truly objective opinions is difficult. It would seem that structuring tabled layouts can be easier as the results are more predictable across browsers than CSS based positioning. However, pages with large numbers of nested tables gain in file size and eating bandwidth, become difficult in updating, and keeping all pages visually consistent a more difficult job. As for accessibility, tables are less friendly to users with disabilities, and more handheld devices are being used to browse the web, of which many can't render these tables very well at all. CSS based layouts are also more search engine friendly and it does seem to improve ranking in many cases. CSS also presents it's own compatibility issues, with browsers not quite rendering all properties in the same way. There is a steeper learning curve with CSS, and novices will find it difficult to know whether a display problem they're having is due to a bug or to their inexperienced coding.
The one thing that both sides of the fence agree on, is that CSS and Web Standards are the way forward, but that tables still have their place in standards compliant code.
See also
Web Site techniques
Please note that articles in this section of our
web site were current and correct to the best of our ability when published,
but by the nature of our business may go out of date quite quickly. The
quoting of a price, contract term or any other information in this area of
our website is NOT an offer to supply now on those terms - please check
back via
our main web site
Web and Intranet - Cascading style sheets - putting it all together [501] - ()
[565] - ()
[994] - ()
[996] - ()
[1677] - ()
[2223] - ()
[4037] - ()
Web and Intranet - Introduction to Cascading Style Sheets [993] - ()
[994] - ()
[999] - ()
[1016] - ()
[1677] - ()
Web and Intranet - Elements of cascading style sheets [994] - ()
[999] - ()
[1017] - ()
[1019] - ()
[1677] - ()
[1831] - ()
[1998] - ()
[4037] - ()
Web and Intranet - Page layout with cascading style sheets [994] - ()
[1016] - ()
[1017] - ()
resource index - Deployment
Solutions centre home page
You'll find shorter technical items at
The Horse's Mouth and
delegate's questions answered at
the
Opentalk forum.
At Well House Consultants, we provide
training courses on
subjects such as Ruby, Lua, Perl, Python, Linux, C, C++,
Tcl/Tk, Tomcat, PHP and MySQL. We're asked (and answer)
many questions, and answers to those which are of general
interest are published in this area of our site.