Column CSS Layout: EHD (Parts 1 – 2)

September 30, 2011
0 Comments

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>

<html>

<head>

<title>Eight Hour Day</title>

</head>

<body>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

<ul>

<li><a href="#">follow us in TWITTER</a></li>

<li><a href="#">join our MAILING LIST</a></li>

</ul>

</div>

</div>

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

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

</div>

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

</div>

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

</div>

</div>

<ul>

<li><a href="#">ABOUT</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

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;

}

#content {

background-color: #FFF;

}

#footer {

height: 50px;

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-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;

}

Category: build, css, html, video

Column CSS Layout: EHD (Parts 1 – 2)

Column CSS Layout: EHD (Part 1-2)

Part 1

Part 2

HTML

CSS (style.css)

i’m looking for

Categories