One Column CSS Layout (Parts 1- 3)

One Column CSS Layout (Part 1-3)

Part 1 covers organizing your files, creating an HTML and CSS file and linking the .css file in preparation for building a one column web page. Part 2 covers adding content to a one column web page including navigation, images and text.  Part 3 covers adding CSS (presentation) to a one column web page including styling navigation, images and text. See below for the HTML and CSS for this video tutorial.

Part 1

Part 2

Part 3

Below is the HTML and CSS for this video tutorial.

HTML
<html>
<head>
<title>Smithsonian Education</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="#">Educators</a></li>
<li><a href="#">Families</a></li>
<li><a href="#">Students</a></li>
</ul>
     </div>
</div>

<div id="content">
     <div id="photo">
  <img src="images/egyptian_empire.png" width="500" height="350" />
     </div>

     <div id="maintext">
  <h1>The Rise of the Egyptian Empire</h1>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
    there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the
    Semantics, a large language ocean. </p>
     <br />
     </div>
</div>

<div id="footer">
  <p>&copy; Smithsonian Education 2011</p>
</div>

</div>
</body>
</html>
CSS (style.css)
*{
    margin: 0px;
    padding: 0px;
}

body {
    margin-left: 0px;
    margin-top: 0px;
    background-color: #CBC6BD;
}

#wrapper {
    width: 990px;
    margin-right: auto;
    margin-left: auto;
}

#header {
    height: 150px;
    background-image: url(images/smithsonian_logo.png);

}
#content {
    background-color: #FFF;
}

#nav ul{
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 16px;
    color: #dee1e4;
    padding-top: 45px;
    padding-left: 55px;
    list-style-type: none;
    line-height: 22px;
}

#nav ul a {
    color: #dee1e4;
    text-decoration: none;
}

#nav ul a:hover {
    color: #9B591B;
}

#photo {
    margin-right: auto;
    margin-left: auto;
    width: 500px;
    padding-top: 50px;
}
#maintext {
    width: 500px;
    margin-right: auto;
    margin-left: auto;
}
#footer {
    height: 50px;
    background-color: #f3f2f2;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #bab8b8;
}    

#maintext h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
    color: #333333;
    padding-bottom: 5px;
    padding-top: 10px;
}
#maintext p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    padding-top: 5px;
    padding-bottom: 10px;
}
#footer p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: right;
    color: #b2b0b0;
    padding-top: 20px;
    padding-right: 50px;
}

One thought on “One Column CSS Layout (Parts 1- 3)”

  1. Pingback: everything about web*» Blog Archive » Code for 1, 2, and 3 CSS Column Layouts
  2. Trackback: everything about web*» Blog Archive » Code for 1, 2, and 3 CSS Column Layouts

Leave a Reply

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