SDL MAIN

by Joe Saad

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <div id="wrapper">
    <div id="header">
        <img src="https://dev1-www.reliant.com/en_US/Images/Site_Component_Images/Header/reliant_logo_trans.png" alt="Reliant Logo" />
        <div id="headingM" style="border:1px solid red;">
        <ul id="common_nav">
            <li><a href="#">Feedback</a> | </li>
               <li><a href="#">Support</a> | </li>
               <li><a href="#">Contact & Useful Links</a></li>
        </ul>
        <ul id="main-list">
            <li>CCPAL</li>
            <li>BUSPAL</li>
            <li>CCMR</li>
            <li>OTHER</li>
        </ul>
        </div>
                   
        <ul id="nav">
          <li><a href="#">Communications</a></li>
          <li><a href="#">Marketing</a></li>
          <li><a href="#">Training &amp; QD</a></li>
          <li><a href="#">Other</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="side">
            <input type="text" value="search" size="10" />  
            <button type="button">Go</button>
            <div id="searchResults">
                <ul>
                    <li>search result 1</li>
                    <li>search result 2</li>
                    <li>search result 3</li>
                    <li>search result 4</li>
                </ul>                
            </div>           
        </div>
            <div id="article">
                <h2>CCPAL</h2>
                <div id="article_content">
                    <p>  Elementum elementum sagittis et in dignissim, porttitor sit etiam et, ridiculus. Pid massa enim in cursus lundium augue porta adipiscing a porttitor aenean! Elit! Lorem, integer placerat ridiculus tincidunt dolor, sed facilisis a...

CSS

body {font-size:10px; color:#000; background-color:#fff; font-family:verdana; }
#wrapper{margin:0 auto; width:500px; float:none;}
div {border:1px solid blue; float:left;}
#header {width:100%; min-height:70px;}
#header div ul#common_nav {float:right; clear:both;}
#header div ul li {display:inline;}
#nav li a {text-decoration:none;}
#nav {margin:10px 5px 0px 115px; padding:0px; float:left;}
#nav li {display:inline; border:1px solid blue;  height:20px;}
#nav li:hover {background-color:red;}
#content{float:left; clear:left; width:100%;}
#side {width:30%;}
#side input, #side button {float:left;}
#searchResults {clear:left; border:1px solid green; width:99%;}
#article {width:68%;}
#main-list {float:left;margin-top:0px;border:1px solid blue;}
img {border:1px solid blue;float:left;}
#main-list {border:1px solid orange; float:left;clear:both;margin:30px 30px 20px;}
#headingM {float:right; width:70%;}

JavaScript

$(function(){
    $('#searchResults ul li:even').css('background-color','#cccccc');
});