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)”