980px

HCDE532 » Page Layout for Your Web Page

Now that we have created our first web page, let’s actually lay it out like a normal site.

A Page Layout for our Web Page

A Page Layout for our Web Page

View: http://faculty.washington.edu/sinkum/page-layout-for-your-webpage/

Code: https://github.com/msinkula/HCDE598/tree/master/page-layout-for-your-webpage

Step One: Create an Image Folder

Since we are going to start using images in our page layout, let’s create a folder for our images:

Create Your Folder for Images

Create Your Folder for Images

You will notice that I have placed the background file that we are going to use temporarily and the image of my logo.

Download: bg-960.png

See Also: Using Images | HCDE598 | Premium Design Works

Step Two: Place Your Background Image

Let’s start by placing the 12 column 960 grid background into our page so that we can use it as a reference point.

See Also: 960 Grid System, by Nathan Smith

Once you have downloaded the background file and uploaded it to your server, we can reference it from our style sheet:

Select Code
1
2
3
4
5
6
7
8
body {
background-image: url(images/bg-960.png);
background-position: center;
background-repeat: repeat-y;
background-color:#FFFFFF;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}

You should see the background centered in your page now:

Preview the Background in Youe Page

Preview the Background in Youe Page

We are now ready to start laying out our page divisions to our 12 column layout.

Step Three: Create Your Page Divisions

Next, let’s break our page into the following page divisions:

1. Header

Select Code
1
2
3
4
5
<!-- Begin Header -->
<div id="header">
<h1>Mike Sinkula's First Web Page!</h1>
</div>
<!-- End Header -->

Note: You can place your own logo image or leave this as text.

2. Navigation

Select Code
1
2
3
4
5
6
7
8
9
10
<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

Note: Use whatever navigation items you would like to.

See Also: Creating Menus with HTML & CSS | HCDE532 | Students of Premium Design Works

3. Content

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Begin Content -->
<div id="content">
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</div>
<!-- End Content -->

4. Footer

Select Code
1
2
3
4
5
<!-- Begin Footer -->
<div id="footer">
<p>&copy;2014 Mike Sinkula. All rights reserved.</p>
</div>
<!-- End Footer -->

See Also: Page Layout with HTML & CSS | HCDE598 | Premium Design Works

Let’s preview or page divisions:

Preview Your Page Divisions

Preview Your Page Divisions

At this point in time things won’t look a whole lot different until we add some styles to our page divisions.

Step Four: Style Your Page Divisions

We are now going to center our page divisions in our webpage.

1. Header

Select Code
1
2
3
4
5
6
#header {
width: 940px;
margin: 0 auto;
padding: 0 20px;
border: 1px solid black;
}

2. Navigation

Select Code
1
2
3
4
5
6
#navigation {
width: 940px;
margin: 0 auto;
padding: 0 20px;
border: 1px solid black;
}

3. Content

Select Code
1
2
3
4
5
6
#content {
width: 940px;
margin: 0 auto;
padding: 0 20px;
border: 1px solid black;
}

4. Footer

Select Code
1
2
3
4
5
6
#footer {
width: 940px;
margin: 0 auto;
padding: 0 20px;
border: 1px solid black;
}

Let’s preview our styles at work:

Preview Your Page Division Styles

Preview Your Page Division Styles

See Also: The Box Model | HCDE598 | Premium Design Works

Let’s notice that our text looks a little funny at the moment because of some of the settings we used in our Creating Your First Web Page exercise. So, let’s go ahead and get rid of some of the widths and margins that we used earlier.

You can do this by commenting out these declarations:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
h1 {
/*width: 620px;*/
font-size: 36px;
line-height: 36px;
/*margin-top: 25px;*/
/*margin-bottom: 20px;*/
/*margin-left: 50px;*/
/*border-bottom: 1px solid #000000;*/
}

h2 {
/*width: 620px;*/
font-size: 24px;
line-height: 24px;
padding-top: 8px;
margin-bottom: 2px;
/*margin-left: 50px;*/
}

h3 {
/*width: 620px;*/
font-size: 18px;
line-height: 18px;
padding-top: 8px;
margin-bottom: 2px;
/*margin-left: 50px;*/
}

p {
/*width: 620px;*/
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
/*margin-left: 50px;*/
}

ol, ul {
/*width: 620px;*/
font-size: 16px;
line-height: 24px;
padding-left: 40px;
margin-bottom: 10px;
/*margin-left: 50px;*/
}

Let’s preview again:

That looks better.

That looks better.

Great! Now we are ready to work on columns for our content area!

Step Five: Create Columns in Your Content Area

When we are working with our 960 Grid, we can easily create two columns in our content area for the text and sidebar regions.

First, lets make our text area 620px wide and float it to the left.

To do this we need to first place an <article> tag around our text area:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Begin Text -->
<article id="text">
<h2>Header Level 2</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h3>Header Level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</article>
<!-- End Text -->

Second, we need to declare the properties in our style sheet:

Select Code
1
2
3
4
#text {
width: 620px;
float: left;
}

Next, we will need to create a region for our sub-navigation in our sidebar that is 300px wide and floated to the right..

Let’s create an <aside> just below or <article> to do this:

Select Code
1
2
3
4
5
6
7
8
9
10
<!-- Begin Sidebar -->
<aside id="sidebar">
<h2>Headline</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
</aside>
<!-- End Sidebar -->

Then, we can declare the properties in our style sheet:

Select Code
1
2
3
4
#sidebar {
width: 300px;
float: right;
}

Then, preview again:

Uh, oh... what happened?

Uh, oh… what happened?

Let’s notice a really annoying bug that happens when we float child elements within a parent element. It seems that the parent element collapses when it contains floated elements.

Luckily, there is an easy fix to this. We just need to add one line of css to our parent content element:

Select Code
1
2
3
4
5
6
7
#content {
width: 940px;
overflow: hidden; /* prevents the great collapse */
margin: 0 auto;
padding: 0 20px;
border: 1px solid black;
}

See Also: All About Floats | CSS-Tricks

Let’s preview it again:

Preventing the "Great Collapse"

Preventing the “Great Collapse”

Much better. Now let’s get to work on our main navigation.

Step Six: Main Navigation Layout

Because we used list items that are block level elements to create our main navigation, our main navigation is currently stacked. So, let’s work on getting the navigation elements to sit side-by-side like a traditional navigation.

To accomplish this, all we need to do is write a bit more CSS:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#navigation {
width: 940px;
margin: 0 auto;
padding: 10px 20px; /* lets change this to 10px top/bottom and 20px left/right */
border: 1px solid black;
}

#navigation ul {
overflow: hidden; /* prevents the great collapse */
border: 1px solid grey;
padding: 10px 0;
margin: 0; /* overwrites existing margins */
}

#navigation ul li {
list-style: none; /* gets rid of the bullets */
float: left;
margin: 0; /* overwrites existing margins */
margin-right: 20px; /* gives the items space between */
}

Wait for it… preview:

Am I done with my layout yet?

Am I done with my layout yet?

See Also: Creating Menus with HTML & CSS | HCDE598 | Premium Design Works

Congrats!! You are now done with laying out your first web page! Doesn’t it look pretty? No? Then let’s add a bit of visual design to our page.

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php