SDL

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="header">
        <div>logo here</div>
        <ul>
            <li><a href="#">Feedback</a></li>
               <li><a href="#">Support</a></li>
               <li><a href="#">Contact & Useful Links</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">
            <ul id="nav">
                <li>Communications</li>
                <li>Marketing</li>
                <li>Training & QD</li>
                <li>Other</li>
            </ul>
            <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, purus in ac est platea enim tincidunt sociis. Sed rhoncus cursus? Risus, natoque nunc, mattis porta vel sed nec nunc a, a? Sed hac, montes cum, magnis? Nunc. Elementum massa porta habitasse! Nec...

CSS

div {border:1px solid blue; float:left;}
#header {width:100%; min-height:70px;}
#header ul {float:right;}
#header ul li {display:inline;}
#nav {margin:0px; padding:0px;}
#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;}
#content {width:68%;}

JavaScript

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