Column CSS Layout: EHD (Parts 1 – 2)
Column CSS Layout: EHD (Part 1-2)
Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file, and adding content to a column web page including navigation, images, and text. Part 2 covers adding CSS (presentation) to a column web page including styling navigation, images, and text. See below for the HTML and CSS for this video tutorial.
Part 1
Part 2
Below is the HTML and CSS for this video tutorial.
HTML
<html> <head> <title>Eight Hour Day</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> <div id="nav"> <ul> <li><a href="#">OUR WORK</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div id="secondary"> <ul> <li><a href="#">follow us in TWITTER</a></li> <li><a href="#">join our MAILING LIST</a></li> </ul> </div> <div id="blog"><a href="blog.html"><img src="images/blog.png" width="76" height="66" /></a></div> <div id="logo"><img src="images/logo.png" width="560" height="47" /></div> <div id="studio"><img src="images/studio.png" width="261" height="54" /></div> </div> <div id="content"> <div id="main_photo"><img src="images/main_home1.png" width="1049" height="451" /></div> <div id="featured"> <div id="feature1"><img src="images/feature1.png" width="207" height="120" /> <h1>AIGA Wisconsin</h1> <p>This past Friday we were honored to give a little talk over at <a href="#">Planet Propaganda</a> in Madison. A big thank you to the <a href="#">AIGA Wisconsin</a> for making this happen and to Planet for hosting. You can see some of our presentation slides and photos from the event on the AIGA WI Flickr site.</p> <h5>AUGUST 25, 2011</h5> </div> <div id="feature2"><img src="images/feature2.png" width="209" height="120" /> <h1>Proxart Summer 2011</h1> <p>During our LA Creative Mornings talk we got a chance to meet the crew from <a href="#">Proxart Magazine </a>a publication dedicated to art & design from the suburban landscape. They just released their summer issue and we are honored to be featured! You can <a href="#">download it</a> here.</p> <h5>JULY 21, 2011</h5> </div> <div id="feature3"><img src="images/feature3.png" width="210" height="121" /> <h1>The Modernist by Gestalten</h1> <p>We are such big fans of the book publisher <a href="#">Gestalten</a>! It goes without saying that we are honored and thrilled to be included in their new book: The Modernist aside so many talented designers. Check it out at the <a href="#"> Gestalten Shop</a>!<br /> <br /> </p> <h5>JUNE 28, 2011</h5> </div> <div id="feature4"><img src="images/feature4.png" width="210" height="119" /> <h1>AIGA Design Show Part 2</h1> <p>We've been absolutely thrilled with the success of the <a href="#">Walker Art Center</a> activity packs and yesterday we got more great news. The WAC packs have been featured in the <a href="#">2011 Minnesota AIGA Show</a>! Thanks to the Walker for being such a great client and to the AIGA for the honor.</p> <h5>MAY 12, 2011</h5> </div> </div> <br /><br /> </div> <div id="footer"> <div id="footer_nav"> <ul> <li><a href="#">OUR WORK</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> <div id="copyright">© 2005 - 2011 Eight Hour Day. All rights reserved.</div> </div> </div> </body> </html>
CSS (style.css)
*{ margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; background-color: #f6f6f4; } img { border: none; } #wrapper { width: 1050px; margin-right: auto; margin-left: auto; background-color: #f6f6f4; } #header { height: 150px; background-image: url(images/header.png); } #content { background-color: #FFF; } #footer { height: 50px; background-image: url(images/footer.png); clear: both; } #nav { float: left; width: 400px; margin-left: 43px; padding-top: 15px; } #nav li { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #f6f6f4; letter-spacing: .15em; display: inline; padding-right: 33px; } #nav li a { color: #f6f6f4; text-decoration: none; } #nav li a:hover { color: #333; } #secondary { float: left; width: 365px; margin-left: 50px; padding-top: 15px; } #secondary li { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #642512; letter-spacing: .15em; display: inline; padding-right: 20px; } #secondary li a { color: #642512; text-decoration: none; } #secondary li a:hover { color: #f6f6f4; } #blog { float: left; margin-left: 75px; } #logo { float: left; width: 560px; padding-top: 10px; padding-left: 43px; } #studio { float: left; padding-top: 10px; padding-left: 150px; } #main_photo { padding-top: 40px; } #featured { background-image: url(images/verticals.png); background-repeat: repeat-y; width: 1050px; margin-right: auto; margin-left: auto; overflow: auto; margin-top: 40px; } #feature1 { float: left; width: 210px; margin-right: 20px; margin-left: 40px; } #feature2 { float: left; width: 210px; margin-right: 20px; margin-left: 20px; } #feature3 { float: left; width: 210px; margin-right: 20px; margin-left: 20px; } #feature4 { float: left; width: 220px; margin-right: 30px; margin-left: 20px; } #featured p a { color: #e94235; text-decoration: none; } #featured p a:visited { color: #e94235; text-decoration: none; } #featured p a:hover { color: #e94235; text-decoration: underline; } #featured h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; font-weight: 100; color: #e94235; padding-top: 10px; padding-bottom: 10px; } #featured p { font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 18px; color: #333; padding-right: 30px; } #featured h5 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 100; color: #bab198; padding-top: 10px; padding-bottom: 10px; } #footer_nav { float: left; width: 400px; margin-left: 43px; padding-top: 15px; } #footer_nav li { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #726c63; letter-spacing: .15em; display: inline; padding-right: 33px; } #footer_nav li a { color: #726c63; text-decoration: none; } #footer_nav li a:hover { color: #f6f6f4; } #copyright { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #726c63; float: right; width: 300px; padding-top: 20px; padding-left: 50px; text-transform: uppercase; }
2 thoughts on “Column CSS Layout: EHD (Parts 1 – 2)”