Hi,
I have been reading a lot of posts here and in the archives about writing better and cleaner markup.
I am not sure about <div class=‘clear’></div> clearing divs as they allow for one to see in the markup where clears are but they add additional markup.
The wrapper <divs> that are used for floating several items together and in some cases are just necessary for the way I have done the layouts.
Although it may not look like it, I have tried to keep the use of <divs> down in favour of using natural html selectors such as img, h2
I still get the feeling that I am over <div>ing yet the current layout is how I could get all that is going on working.
BTW the tabs were a real headache. I also have not optimized this yet for anything other than firefox.
Here is the code:
<?php
require_once("../forms/Forms.php");
require_once("../forms/home_forms.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>El template</title>
<meta http-equiv="content-type" content="text/html; charset='utf-8" ></meta>
<script type='text/javascript' src="https://www.google.com/jsapi"></script>
<script type='text/javascript' charset='utf-8'>google.load("jquery", "1.4");</script>
<script type='text/javascript' charset='utf-8'>google.load("jqueryui", "1.8");</script>
<script type='text/javascript' src='./js/home.js' charset='utf-8'></script>
<style type="text/css" media="screen">@import "css/import_home.css";</style>
</head>
<body>
<?php
// Common header
require_once('header.php');
// Centralized main menu file
require_once('menu.php');
?>
<div id='content_wrapper' >
<img c src='./images/home_contact/top_wide_corners.jpg' alt='top wide light grey corners'/>
<div class='clear'></div>
<div id='contact_summary_box'>
<h2>CONTACT SUMMARY</h2>
<div class='clear'></div>
<div class='cs_thick_dark_blue_line '></div>
<img class='line_ball' src='./images/common/line_ball.png' alt='decorative ball at the end of the blue divider line' />
<form action='home.php' method='post'>
<div id='contactSummaryForm'>
<?php
$post_obj = new Post();
$post = $post_obj->autoFill();
$contact_summary_obj = new ContactSummaryHandler();
$form = $contact_summary_obj->build($post);
if($_POST) {
$form=$contact_summary_obj->validate(&$post);
}
foreach($form as $widget) {
//var_dump($widget);
if ($widget->widget->id == 'start_time_frame') {
echo $widget->paint() . '<div id="start_time_frame_to" class="bold sm_form_txt "> to</div>';
} else {
echo $widget->paint();
}
}
?>
<div class='clear'></div>
<div id='contact_summary_submit'>
<input type="submit" value="Submit" />
<img src='./images/home_contact/bottom_wide_corners.jpg' alt='bottom light grey wide corners'></img>
</div>
</div>
</div> <?php // end contact_summary_box?>
</form>
<div class='clear'></div>
<div id='schedule_tabs'>
<h2>SCHEDULE</h2>
<div class='clear'></div>
<div class='button_wrapper'>
<div class='thick_dark_blue_line'></div>
<div id='schedule_buttons' class='buttons'>
<ul id='add_event'>
<li id='bn_add_event'><a href="#add_event" title="add a schedule event">Add Event</a></li>
<li id='bn_download'><a href="#download" title="download schedule evenst">Download</a></li>
</ul>
</div>
</div>
<div class='clear'></div>
<div id='tab_all'>
<div id="nav1">
<ul>
<li id="all"><a href="#pane_all">All</a></li>
<li id="day"><a href="#pane_day">Day</a></li>
<li id="week"><a href="#pane_week">Week</a></li>
<li id="month"><a href="#pane_month">Month</a></li>
</ul>
</div>
</div>
<div class='clear'></div>
<div id='schedule_body'>
<img class='top_corners' src='./images/common/top_dark_wide_corners.png' alt='top dark wide corners'/>
<div class='clear'></div>
<div class='home_content_wrapper'>
<img class='top_inside_corners' src='./images/common/inside_light_corners_top.png' alt='top inside light corners'/>
<div id='schedule_pane'>
</div>
<img class='bottom_inside_corners' src='./images/common/inside_light_corners_bottom.png' alt='bottom inside light corners'/>
</div>
<div class='clear'></div>
<img class='bottom_corners' src='./images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/> <?php //End schedule_body ?>
</div>
<div class='clear'></div>
</div><?php // End schedule_tabls ?>
<!-- ********************************** -->
<div id='messages'>
<h2>MESSAGES</h2>
<div class='clear'></div>
<div class='button_wrapper'>
<div class='thick_dark_blue_line'></div>
<div id='message_buttons' class='buttons'>
<ul id='message_actions'> <!-- used to be add_events -->
<li id='bn_new'><a href="#new_message" title="add a new message">New Message</a></li>
<li id='bn_delete'><a href="#delete" title="delete message">Delete Message</a></li>
</ul>
</div>
</div>
<div class='clear'></div>
<div id='message_body'>
<img class='top_corners' src='./images/common/top_dark_wide_corners.png' alt='top dark wide corners'/>
<div class='clear'></div>
<div class='home_content_wrapper'>
<img class='top_inside_corners' src='./images/common/inside_light_corners_top.png' alt='top inside light corners'/>
<div id='message_pane'>
</div>
<img class='bottom_inside_corners' src='./images/common/inside_light_corners_bottom.png' alt='bottom inside light corners' />
</div>
<div class='clear'></div>
<img class='bottom_corners' src='./images/common/bottom_dark_wide_corners.png' alt='bottom dark wide corners'/> <?php //End schedule_body ?>
</div>
</div>
</div> <?php // End content_wrapper ?>
</body>
</html>
and here is the link to the page in action:http://64.201.38.109:12342/el/home.php
If you have time I would love to here feedback, critisizim or whatever that can help me working towards better semantic code in applications.
Regards,
Steve
[edit] This may be more appropriate for the html forum; although it makes heavy use of CSS for the layout so I think this is the right place 
