<!-- ----------- this is the "main_content" ------------ -->

back to Week 15

Here's the CSS code for the "wrapper" id
#wrapper{
width:700px;
height:1000px;
background:#FFF;
padding:10px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
text-align:left;
}
Here's the CSS code for the body
body{
background-color:#CCC;
font-family: Helvetica,Arial, sans-serif;
color:#000;
font-size:12px;
line-height: 1.5em;
text-align:center;
}
Here's the CSS code for the "main_content" id
#main_content {
padding: 20px;
float: left;
width: 300px;
border: 1px solid #CCC;
}

<!-- this is the "sideBar" -->

Here's the CSS code for the "sideBar" id
#sideBar {
background-color: #CCC;
padding: 20px;
float: right;
width: 260px;
border: 2px solid #C00;
}

jQuery Effects :

- about jQuery
- jQuery.com
- Here's the code ( version 1.7.1 )

BACKSTRETCHING

( resizes BG image to fit the browser window )

LIGHTBOX

you will need :

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

to do this:

here's the HTML code :
<a href="image-1.jpg" rel="lightbox[roadtrip]" title="this is the caption for image 1">
<img src="images/thumb-1.jpg" width="50" height="50" border="0" />
</a>

This is 1 of many alternatives to LightBox:
fancybox.net

jQuery, ".slideToggle"