Two Column CSS Layout (Parts 1- 2)
Two Column CSS Layout (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 two column web page including navigation, images, and text. Part 2 covers adding CSS (presentation) to a two 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>Justine Jones</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="497" height="55" /></div>
<div id="nav">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">BLOG</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="main_content"><img src="images/main_photo.jpg" width="550" height="367" />
<br />
<h1>Graffiti Paris</h1>
<p>This is the piece of art created in Paris in 2010 while walking through the streets of the city.
I noticed two men fighting and one gentleman lost his glasses. Graffiti Paris is created with oil paint.</p>
<h4>September 23, 2011</h4>
<h1>Fifth Floor Gallery</h1>
<p>I'm happy to annouce that my art work will be featured at the<a href="http://www.fifthfloorgallery.com"
target="_blank"> Fifth Floor Gallery</a> in Los Angeles from October 8, 2011 through December 18, 2011.
The opening will be Saturday, October 8 at 8:00pm in the main space of the gallery.</p>
<p>Please join me for the opening. You may RSVP at <a href="mailto:info@fifthfloorgallery.com">
info@fifthfloorgallery.com</a>.</p>
<p>Fifth Floor<br />
502 Chung King Court <br />
Los Angeles, CA 90012<br />
213.687.8443<br />
<a href="mailto:info@fifthfloorgallery.com">info@fifthfloorgallery.com</a><br /></p>
<br />
</div>
</div>
<div id="sidebar">
<div id="main_sidebar"><img src="images/justine.jpg" width="250" height="230" />
<p>My name is Justine Jones. I'm living, learning, and painting in Los Angeles.</p>
<h2>let's connect</h2>
<img src="images/facebook.png" width="51" height="51" /><img src="images/twitter.png" width="51"
height="51" /><img src="images/linkedin.png" width="51" height="51" />
<img src="images/artwork1.jpg" width="250" height="188" />
<br />
<br />
<img src="images/artwork2.jpg" width="250" height="188" />
<br />
<br />
<br />
</div>
</div>
<div id="footer">
<p>© 2009 - 2011 Justine Jones </p>
</div>
</div>
</body>
</html>
CSS (style.css)
* {
margin: 0px;
padding: 0px;
}
body {
margin-left: 0px;
margin-top: 0px;
background-color: #D7D7D7;
}
img {
border: none;
}
#wrapper {
width: 990px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#header {
height: 130px;
background-color: #a5b9c4;
}
#nav li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #725d4c;
display: inline;
padding-right: 35px;
list-style-type: none;
}
#logo {
float: left;
padding-top: 60px;
padding-left: 60px;
}
#nav {
float: right;
width: 335px;
padding-top: 85px;
}
#nav li a {
color: #725d4c;
text-decoration: none;
}
#nav li a:visited {
color: #725d4c;
}
#nav li a:hover {
color: #FFF;
}
#content {
background-color: #FFF;
width: 650px;
float: left;
}
#main_content {
width: 550px;
padding-top: 40px;
padding-left: 50px;
}
#main_content h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
color: #787d80;
padding-top: 15px;
padding-bottom: 10px;
}
#main_content p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
color: #787d80;
padding-bottom: 20px;
}
#main_content h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 100;
text-transform: uppercase;
color: #997b63;
padding-top: 5px;
padding-bottom: 5px;
}
#main_content a {
font-weight: bold;
color: #997b63;
text-decoration: none;
}
#main_content a:hover {
text-decoration: underline;
}
#sidebar {
background-color: #eae6e6;
width: 339px;
float: right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #997b63;
}
#main_sidebar {
width: 249px;
padding-top: 40px;
padding-left: 50px;
}
#main_sidebar p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 18px;
color: #787d80;
padding-bottom: 20px;
}
#main_sidebar h2 {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
font-weight: 100;
text-transform: uppercase;
color: #7a6453;
letter-spacing: 1px;
padding-bottom: 10px;
}
#main_sidebar img {
padding-bottom: 10px;
}
#footer {
height: 40px;
background-color: #86969f;
clear: both;
}
#footer p {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #f9f5f5;
padding-top: 10px;
padding-left: 50px;
}
do you have this templates folder available? You provide the final html and css code but id like to follow along with you with the templates without any information on them.
I’m taking a class at SMC taught by Jamie’s colleague. She posted the templates on her blog here: https://webdesign1smc.wordpress.com/classes/class-5b/ However, I am pretty sure that when we did the one column lesson, I just stopped the video and typed them up. The templates are not that complicated. That is the beauty of them. I keep them in dropbox and plan to use them from now on.
The photoshop file is here: http://www.everythingaboutweb.com/classes/downloads/art_by_justine/two_column_artbyjustine.psd.zip
And the images are here: http://www.everythingaboutweb.com/classes/downloads/art_by_justine/images.zip
You speak and move at an easy pace between tasks, but when you are actually doing tasks you go too fast. I think this is especially more challenging for people who have DW CC, since the menus and tool bars are set up differently. Fortunately, we can stop and rewind.
Hi Nicole,
Thanks for your comment. I will try to slow it down when I make future videos. Thanks for the suggestion.
Thanks for bringing up CC, Nicole! I am having trouble with DW CC as well. I started with PS CS4 and recently got CC. The menus are confusing and the CSS pop out menu is not where Jamie says it is (not her fault I don’t see why they had to move it) and it is called something slightly different. I also think I need dual monitors to follow along better . I’m trying to toggle between the video and DW. I finally ended up running the video on the iPad.