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 &amp; 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">&copy; 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)”

  1. Mavi says:

    it looks like the twitter handle at the end of the videos is incorrect. I looked up @every_web and that’s definately not you. 🙂

    1. jamie says:

      Yes it was changed to @everything_web
      https://twitter.com/everything_web

      I haven’t changed the videos yet. The twitter feed is also in the footer of the everything about web site.

      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *