A head start of a pretty content page
Posted: Wed Nov 02, 2011 3:55 am
Being frustrated with what works and who behaves, I fusts around with the table layout schemes for a 'content' page layout and won! The result is a useful quick layout where pictures and text play in the sandbox nicely. it's what I call a mini-web page. Try it in a browser and it works great in the TinyMCE WYSIWYG when that editor is installed in version cmsms 1.10. Just paste into the content area when wysiwyg is diabled on the bottom checkbox then re-check "wha-la" a web page or at least a good start.
The Code:
<h1 align="center">WEB PAGE TITLE GOES HERE</h1> table webpage
<table style="height: 100%;" width="100%" cellspacing="0" cellpadding="10" border="1 ">
<tbody style="background: #ebecf6;">
<tr><!-- ============ HEADER SECTION ============== -->
<td style="height: 100px; background: #777d6a;" colspan="3">
header
<h2>Website Logo</h2>
</td>
</tr>
<!-- ============ NAVIGATION BAR SECTION ============== -->
<tr>
<td style= "background: #a9ae9f;" colspan="3" valign="middle" height="30">nav area<a href="#">Home</a></td>
</tr>
<tr><!-- ============ LEFT COLUMN (MENU) ============== -->
<td style= "background: #00ffff;"valign="top" width="20%"><a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a></td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td valign="top" width="55%">
<h2>Page heading</h2>
A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br /> <br /> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).</td>
<!-- ============ RIGHT COLUMN (MENU) ============== -->
<td style= "background: #7dc623; "valign="top" width="25%"> right column</td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td style= "background: #ececec;" colspan="3" align="center" height="20">Footer Copyright ©</td>
</tr>
</tbody>
</table>
The Code:
<h1 align="center">WEB PAGE TITLE GOES HERE</h1> table webpage
<table style="height: 100%;" width="100%" cellspacing="0" cellpadding="10" border="1 ">
<tbody style="background: #ebecf6;">
<tr><!-- ============ HEADER SECTION ============== -->
<td style="height: 100px; background: #777d6a;" colspan="3">
header
<h2>Website Logo</h2>
</td>
</tr>
<!-- ============ NAVIGATION BAR SECTION ============== -->
<tr>
<td style= "background: #a9ae9f;" colspan="3" valign="middle" height="30">nav area<a href="#">Home</a></td>
</tr>
<tr><!-- ============ LEFT COLUMN (MENU) ============== -->
<td style= "background: #00ffff;"valign="top" width="20%"><a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a><br /> <a href="#">Menu link</a></td>
<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td valign="top" width="55%">
<h2>Page heading</h2>
A three column layout with header, navigation bar and footer sections. The first, second and fourth table rows create the header, navigation bar and footer respectively and contain a single table cell each. All these table cells use colspan="3" attribute-value pair. <br /> <br /> The third table row contains three table cells which create the menu column (left), the content column (middle) and the extra column (right).</td>
<!-- ============ RIGHT COLUMN (MENU) ============== -->
<td style= "background: #7dc623; "valign="top" width="25%"> right column</td>
</tr>
<!-- ============ FOOTER SECTION ============== -->
<tr>
<td style= "background: #ececec;" colspan="3" align="center" height="20">Footer Copyright ©</td>
</tr>
</tbody>
</table>