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="page">
    <div id="header">
        <img src="https://dev1-www.reliant.com/en_US/Images/Site_Component_Images/Header/reliant_logo_trans.png" />
        <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="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="wrapper">
        <div id="side">
            <input type="text" value="search" />  
            <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="content">
            
            <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 massa, arcu aliquam, dignissim, scelerisque nunc odio! Scelerisque amet sit aliquam, sit in! Integer lundium. Sagittis mid, penatibus. Mid sed proin ultricies sit pid facilisis integer nunc adipiscing quis et elementum,...

CSS

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

JavaScript

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