Prev | Chapter 9. Advanced Topics | Next

## Laying out a page with CSS instead of tables

### .LRN home page with table-based layout

A sample of the HTML code (full source)

    <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

### .LRN Home with CSS-based layout

A sample of the HTML code (full source)

    <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>

If the CSS is removed from the file, it looks somewhat different:

Prev | Home | Next
Using .vuh files for pretty urls | Up | Sending HTML email from your application

View comments on this page at openacs.org