Page Design (CSS) - three-column right nav

iGuest · September 16, 2004

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://forums.xisto.com/no_longer_exists/;-- DW6 --><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><link rel="stylesheet" href="3col_rightNav.css" type="text/css"></head><body> <div id="masthead"> <h1 id="siteName">Site Name</h1> <div id="globalNav"> <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> | <a href="#">global link</a> </div> <h2 id="pageName">Page Name</h2> <div id="breadCrumb"> <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / </div> </div> <div id="headlines"> <h3>Headlines</h3> <p> Headline <a href="#">full story...</a> </p> <p> Headline <a href="#">full story...</a> </p> <p> Headline <a href="#">full story...</a> </p> <p> Headline <a href="#">full story...</a> </p> <p> Headline <a href="#">full story...</a> </p> <div id="advert"> <img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad copy ad copy. </div> </div>  <div id="content"> <div class="feature"> <img src="" alt="" width="250" height="250"> <h3>Feature title </h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> </div> <div class="story"> <h3>Story Title</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> </div> <div class="story"> <h3>Story Title</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> </div> </div>  <div id="navBar"> <div id="search"> <form action="#"> <label>search</label> <input name="searchFor" type="text" size="10"> <input name="goButton" type="submit" value="go"> </form> </div> <div id="sectionLinks"> <h3>Section Links</h3> <ul> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> <li><a href="#">Section Link</a></li> </ul> </div> <div class="relatedLinks"> <h3>Related Link Category</h3> <ul> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> </ul> </div> <div class="relatedLinks"> <h3>Related Link Category</h3> <ul> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> <li><a href="#">Related Link</a></li> </ul> </div> </div>  <div id="siteInfo"> <img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | ©2003 Company Name</div> <br> </body></html>

Sign In

Page Design (CSS) - three-column right nav

Recommended Posts

iGuest 3

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information