<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 'http://www.w3.org/TR/html4/loose.dtd"'>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Laying out a page with CSS instead of tables</title><link rel="stylesheet" type="text/css" href="openacs.css"><meta name="generator" content="DocBook XSL Stylesheets V1.78.1"><link rel="home" href="index.html" title="OpenACS Core Documentation"><link rel="up" href="tutorial-advanced.html" title="Chapter 10. Advanced Topics"><link rel="previous" href="tutorial-vuh.html" title="Using .vuh files for pretty urls"><link rel="next" href="tutorial-html-email.html" title="Sending HTML email from your application"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><a href="http://openacs.org"><img src="/doc/images/alex.jpg" style="border:0" alt="Alex logo"></a><table width="100%" summary="Navigation header" border="0"><tr><td width="20%" align="left"><a accesskey="p" href="tutorial-vuh.html">Prev</a> </td><th width="60%" align="center">Chapter 10. Advanced Topics</th><td width="20%" align="right"> <a accesskey="n" href="tutorial-html-email.html">Next</a></td></tr></table><hr></div><div class="sect1"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="tutorial-css-layout"></a>Laying out a page with CSS instead of tables</h2></div></div></div><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a name="idp140717560322368"></a>.LRN home page with table-based layout</h3></div></div></div><div class="mediaobject" align="center"><img src="images/dotlrn-style-1.png" align="middle"></div><p>A sample of the HTML code (<a class="ulink" href="files/dotlrn-style-1.html" target="_top">full source</a>)</p><pre class="programlisting"><table border="0" width="100%">
<tr>
<td valign="top" width="50%">
<table class="element" border=0 cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan=3 class="element-header-text">
<bold>Groups</bold>
</td>
</tr>
<tr>
<td colspan=3 class="dark-line" height="0"><img src="/resources/acs-subsite/spacer.gif"></td></tr>
<tr>
<td class="light-line" width="1">
<img src="/resources/acs-subsite/spacer.gif" width="1">
</td>
<td class="element-text" width="100%">
<table cellspacing="0" cellpadding="0" class="element-content" width="100%">
<tr>
<td>
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class=element-text>
MBA 101</pre></div><div class="sect2"><div class="titlepage"><div><div><h3 class="title"><a name="idp140717560327376"></a>.LRN Home with CSS-based layout</h3></div></div></div><div class="mediaobject" align="center"><img src="images/dotlrn-style-3.png" align="middle"></div><p>A sample of the HTML code (<a class="ulink" href="files/dotlrn-style-2.html" target="_top">full source</a>)</p><pre class="programlisting"><div class="left">
<div class="portlet-wrap-shadow">
<div class="portlet-wrap-bl">
<div class="portlet-wrap-tr">
<div class="portlet">
<h2>Groups</h2>
<ul>
<li>
<a href="#">Class MBA 101</a></pre><p>If the CSS is removed from the file, it looks somewhat different:</p><div class="mediaobject" align="center"><img src="images/dotlrn-style-2.png" align="middle"></div></div></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="tutorial-vuh.html">Prev</a> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right"> <a accesskey="n" href="tutorial-html-email.html">Next</a></td></tr><tr><td width="40%" align="left">Using .vuh files for pretty urls </td><td width="20%" align="center"><a accesskey="u" href="tutorial-advanced.html">Up</a></td><td width="40%" align="right"> Sending HTML email from your application</td></tr></table><hr><address><a href="mailto:docs@openacs.org">docs@openacs.org</a></address></div><a name="comments"></a><center><a href="http://openacs.org/doc/current/tutorial-css-layout.html#comments">View comments on this page at openacs.org</a></center></body></html>