Home Accessibility Courses Diary The Mouth Forum Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
Cascading Style Sheets - putting it all together

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

Related Material

Web and Intranet - Cascading style sheets - putting it all together
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [2223] CSS Style Diagrams - working out where attributes come from - (2009-06-08)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [996] Setting your colour theme through PHP - (2006-12-17)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [565] Using PHP to output images, XML, Style sheets, etc - (2006-01-15)
  [501] .css - using PHP to make dynamic style sheets - (2005-11-21)

Web and Intranet - Introduction to Cascading Style Sheets
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)
  [993] Positioning with Cascading Style Sheets - (2006-12-16)

Web and Intranet - Elements of cascading style sheets
  [4037] Cascading Style Sheets and formatting your web page - (2013-03-10)
  [1998] Text on a background image - (2009-01-16)
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1677] CSS training - Cascading Style Sheets (UK course) - (2008-06-15)
  [1019] span and div tags - a css comparison - (2007-01-02)
  [1017] css - handling white space and pre - (2007-01-01)
  [999] Cascading and the buses - (2006-12-18)
  [994] Training on Cascading Style Sheets - (2006-12-17)

Web and Intranet - Page layout with cascading style sheets
  [1017] css - handling white space and pre - (2007-01-01)
  [1016] Modernising from tables to cascading style sheets - (2006-12-31)
  [994] Training on Cascading Style Sheets - (2006-12-17)

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.

You can Add a comment or ranking to this page

© WELL HOUSE CONSULTANTS LTD., 2019: Well House Manor • 48 Spa Road • Melksham, Wiltshire • United Kingdom • SN12 7NY
PH: 01225 708225 • FAX: 01225 793803 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/solutions/general- ... ether.html • PAGE BUILT: Wed Mar 28 07:47:11 2012 • BUILD SYSTEM: wizard