Class 4 handout two column layout w mobile web design

Intro to HTML/CSS
Class 4 Handout: Two Column Layout w/ CSS
+ Mobile Web Design

1. Two Column Layout

We are starting out with a two column layout. You can download the code and images here:

http://ge.tt/6YVcnPL/v/0

Unzip and open this in Aptana.

Here is the HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Two Column Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>My Vacation Blog</h1>
<h2>Places I like to go.</h2>
</div>

<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div id="content">

1

<div class="post">
<h3>First Post</h3>
<img src="images/big_wave.jpg" class="pic" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae enim ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nullam auctor, leo convallis rhoncus vestibulum, lectus justo tempor urna, egestas consequat
nisi nibh vitae magna. In auctor, erat id ornare auctor, turpis metus eleifend tellus, vel adipiscing
purus nunc lacinia turpis.
</p>
<p>
Aenean consectetur turpis at justo laoreet laoreet. Sed at sapien nec enim egestas
ultricies quis vehicula elit. Quisque mattis, urna in venenatis accumsan, nisl orci facilisis diam, a
hendrerit sapien sem eget libero. Cras ultricies ligula sed magna mattis mollis at at augue.
Curabitur iaculis vulputate elementum. Maecenas quis enim est, nec egestas massa. Ut nec
neque lorem. In volutpat pellentesque lacinia. Nulla facilisi.
</p>
</div>

<div class="post">
<h3>Second Post</h3>
<img src="images/sunset.jpg" class="pic" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.
Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a
ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a
ante.
</p>
</div>

<div class="post">
<h3>Third Post</h3>
<img src="images/on_the_rocks.jpg" class="pic" />
<p>
Vivamus lacinia iaculis felis, gravida sagittis libero aliquam id. Nam faucibus porta arcu,
nec ullamcorper felis tempor euismod. Nam nec metus et velit dignissim condimentum. Nulla
quis pretium erat. Sed vel urna ac sem accumsan scelerisque. Nunc vitae risus nisi, vel
convallis libero.
</p>
<p>
Ut pellentesque, nisi nec dignissim aliquam, tortor lacus tincidunt dui, et egestas augue
leo eget felis. In neque arcu, pulvinar quis imperdiet ac, facilisis a ipsum. Nam felis enim,
pellentesque sollicitudin pellentesque sed, ornare sed massa. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Quisque aliquam placerat pharetra. Mauris vel nisi libero. Sed ut viverra dui. Maecenas
consequat velit id turpis mollis a euismod lectus viverra. Donec ullamcorper elementum
interdum. In eget lectus et tellus tristique viverra non quis sem.
</p>

2

</div>

</div>

<div id="sidebar">
<div class="section">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.</p>
</div>
<div class="section">
<h3>About this Site</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac rutrum magna.
Maecenas ac orci ac justo dignissim fermentum. Nam sit amet sem ac est rutrum fermentum a
ac est. Pellentesque non quam dui. Aliquam ligula eros, dictum eget suscipit non, gravida a
ante.
</p>
</div>
</div>

</div>
</body>
</html>

Here is the CSS:

/*********************
Page Styles
*********************/

body {
margin: 0;
background: #90ADB7 url('../images/background.png') repeat-x;
font-family: verdana, sans-serif;
font-size: 0.85em;
}

#wrapper {
width: 960px;
margin: 0 auto;
}

p{
line-height: 1.5em;
color: #333;
}

a:hover {
text-decoration: none;
}

3

/*********************
Navigation
*********************/

#nav {
list-style: none;
padding: 0;
float: right;
margin: 40px 0;
}

#nav li {
float: left;
margin-right: 10px;
font-size: 1.4em;
font-weight: bold;
}

/*********************
Header
*********************/

#header {
font-style: italic;
float: left;
margin: 20px 0;
}

#header h1 {
font-size: 3em;
margin: 0;
}

#header h2 {
margin: 0;
color: #888;
font-size: 1.2em;
}

/*********************
Content
*********************/

#content {

4

float: left;
width: 700px;
margin-right: 20px;
}

#content .post {
background: #FFF;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #CCC;
}

#content .post h3 {
margin: 0;
color: #333;
}

.pic {
margin-left: 10px;
float: right;
}

/*********************
Sidebar
*********************/

#sidebar {
float: left;
width: 200px;
background: #FFF;
padding: 10px;
border: 2px solid #CCC;
}

#sidebar h3 {
margin: 0;
}

#sidebar .section {
border-top: 2px dashed #CCC;
padding-top: 10px;
}

#sidebar .section:first-child {
border-top: none;
padding: 0;
}

There are also some images in the zipped file in a folder called “images”.

5

Now make your browser window really small, about the size of a smartphone screen. It doesn’t
look so great. The navigation is difficult to click, etc.

We will add the following to the CSS:

/*********************
Media Queries
*********************/

@media handheld and (max-width: 480px),
screen and (max-device-width: 480px),
screen and (max-width: 600px) {

#wrapper, #content {
width: inherit;
}

#sidebar {
display: none;
}

#header {
float: none;
margin: 0px;
}

#header h1 {

6

text-align: center;
font-size: 2em;
margin: 5px;
}

#header h2 {
display: none;
}

#nav {
font-size: 0.75em;
margin: 5px;
float: none;
padding: 4px 0px;
text-align: center;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A5C6D1), to(#6A8087));
border-bottom: 1px solid #555;
-webkit-border-radius: 8px;
}

#nav li {
float: none;
display: inline;
margin: 0;
}

#nav li a {
padding: 4px;
padding-left: 6px;
text-decoration: none;
text-shadow: 0px -1px 1px rgba(0,0,0,0.5);
color: #FFF;
border-left: 1px solid #CCC;
}

#nav li:first-child a {
border-left: none;
}

#content {
margin: 5px;
}

.pic {
margin: 10px auto;
display: block;
float: none;
}

}

7

Now look at your browser again. It should look better for mobile devices.

The finished exercise file is here:
http://ge.tt/6SLuoPL/v/0

You can read more about media queries here:

http://www.w3.org/TR/css3-mediaqueries/

8

Class 4 handout two column layout w mobile web design

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a Class 4 handout two column layout w mobile web design

Similar a Class 4 handout two column layout w mobile web design (20)

Más de Erin M. Kidwell

Más de Erin M. Kidwell (7)

Último

Último (20)

Class 4 handout two column layout w mobile web design