Welcome to part 2 of the series! Before starting this tutorial, please complete “Designing a Professional Website from Scratch – Part 1”.
For the sake of brevity, I’m not going to go over slicing images. You may download my sliced images in order to follow along, but please note that I am not including the social networking icons or the photo. I don’t believe that I have the right to redistribute these. I included the link the photo in the last article, and you can download the social networking icons from the original creator.
Also, remember to download the 960 Grid CSS Framework. This will give us a big step in the right direction.
With that out of the way, we’re ready to begin.
Setting up your HTML Document
The HTML is really simple. However, pay really close attention to the id’s and classes. The 960 Grid uses a system of classes in order to create positioning and widths. The easiest way to comprehend the concept is for me to first show you the HTML, and then explain what is going on.
Create a new html document and call it “index.htm”. I have created a new web project in Visual Studio, as in the next tutorial I will go over creating a site with Master Pages for working in ASP.NET.
Here’s the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Example Test Site</title>
<link href="stylesheets/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/text.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/960.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outer">
<div id="container" class="container_12">
<div id="header" class="clearfix">
<h1 class="grid_4 suffix_4"><a href="/">alligatortek Website Design and Development</a></h1>
<div id="searchbox" class="grid_4">
<input type="text" class="text" value="enter search term" />
<input type="submit" value="Search" class="button" />
</div>
</div>
<div id="navigation" class="clearfix">
<ul id="primary" class="grid_9">
<li><a href="/">Home</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">About Us</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
<ul id="secondary" class="grid_3">
<li><a href="http://twitter.com/alligatortek" title="alligatortek on twitter"><img src="images/twitter.jpg" alt="alligatortek on twitter" /></a></li>
<li><a href="http://www.facebook.com/alligatortek" title="alligatortek on facebook"><img src="images/facebook.jpg" alt="alligatortek on facebook" /></a></li>
<li><a href="http://www.linkedin.com/companies/alligatortek" title="alligatortek on LinkedIn"><img src="images/linkedin.jpg" alt="alligatortek on LinkedIn" /></a></li>
</ul>
</div>
<div class="clear"><!-- clear floats --></div>
<div id="content" class="clearfix">
<div id="left-col" class="grid_9">
<div id="banner">
<h3 class="tel">Call Today! <span class="value">(708)535-8800</span></h3>
<p>We offer great service with no hidden costs. <a href="#">Contact us today</a> for a free consultation.</p>
<ul>
<li><a href="#">CMS</a> Content Management Systems</li>
<li><a href="#">Web Design</a> Custom Business Websites</li>
<li><a href="#">Software</a> Custom Developed Software</li>
</ul>
</div>
<h2>Welcome to Our Website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie sagittis elit at auctor. Aenean nec nulla eu nisl imperdiet aliquet eget quis ligula. Maecenas vel urna ut purus bibendum suscipit in id dui. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum ultricies aliquam. Proin faucibus sem velit, at lobortis risus. Donec viverra rutrum sodales. Sed sodales tortor in neque fermentum ac fringilla augue ultricies. Suspendisse magna enim, tempor vitae mollis nec, congue sit amet ipsum. In hac habitasse platea dictumst.</p>
<p>Curabitur sodales hendrerit metus. Fusce at enim velit, nec sodales felis. Duis et dui id sapien ullamcorper euismod ac at mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac justo orci, at ultrices lorem. Fusce urna neque, rhoncus eget mattis nec, auctor non purus. Curabitur ut lorem diam, sit amet rhoncus eros. Maecenas at felis ac est sodales scelerisque. Cras nec tellus mauris, fermentum rutrum mi. Sed vel nisi ut eros sodales varius eget at nisl. </p>
<p>Proin faucibus sem velit, at lobortis risus. Donec viverra rutrum sodales. Sed sodales tortor in neque fermentum ac fringilla augue ultricies. Suspendisse magna enim, tempor vitae mollis nec, congue sit amet ipsum. In hac habitasse platea dictumst.</p>
</div>
<div id="right-col" class="grid_3">
<h2>Quick Contact</h2>
<div class="form">
<div class="row">
<label for="txtName">Name:</label>
<input type="text" class="text" id="txtName" />
</div>
<div class="row">
<label for="txtEmail">Email:</label>
<input type="text" class="text" id="txtEmail" />
</div>
<div class="row">
<label for="txtSubject">Subject:</label>
<input type="text" class="text" id="txtSubject" />
</div>
<div class="row">
<label for="txtMessage">Message:</label>
<textarea class="text" id="txtMessage">Your Message</textarea>
</div>
<div class="button-row">
<input type="submit" class="button" value="Send" />
</div>
</div>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 220,
height: 300,
theme: {
shell: {
background: '#161616',
color: '#ffffff'
},
tweets: {
background: '#161616',
color: '#ffffff',
links: '#a3e775'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('alligatortek').start();
</script>
</div>
</div>
</div>
<div class="clear"><!-- clear floats --></div>
</div>
<div class="clear"><!-- clear floats --></div>
<div id="footer">
<div id="footer-inner" class="container_12 clearfix">
<div class="left grid_3">
<h4>alligatortek Headquarters</h4>
<p>7021 W. 153rd Street - Suite 1<br />
Orland Park, IL 60462<br />
Phone: (708)535-8800<br />
Fax: (708)535-8801</p>
</div>
<div class="center grid_6">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">About Us</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
<p>©2010 alligatortek. All rights reserved.</p>
</div>
<div class="right grid_3">
<a href="/" title="alligatortek Website Design and Development"><img src="images/footer-logo.jpg" alt="alligatortek Website Design and Development" /></a>
</div>
</div>
</div>
</body>
</html>
Notice that we are including 4 stylesheets in the header. The first three come from the 960 Grid System, and the fourth is a stylesheet that we need to create. Notice that we have created a folder in the site root called “stylesheets” in which we put the stylesheets.
You have seen above, that we are using 960 Grid’s class system to layout our screen. Notice that the grid has a simple system for designating your grid layout.
Classes:
container_# (12 or 16): designates the outside container, and how many columns are in the grid
grid_# (1-16): designates the number of columns in the width of the designated element
prefix_# (1-15): designates the number of columns before the designated element
suffix_# (1-15): designates the number of columns after the designated element
clear: clears floated elements.
Any element with a “grid_#” class is floated, so you need to clear these elements in order to stretch backgrounds and containers, or break if your columns don’t take up an entire width. For example, if you want to layout some elements that don’t take up the entire width you could do something like this:
<div class=”container_12”>
<div class=”grid_2”>Some Image</div>
<div class=”grid_8”>Description of Image</div>
<div class=”clear”><!-- Clear Floats --></div>
<div class=”grid_2”>Some Image</div>
<div class=”grid_8”>Description of Image</div>
<div class=”clear”><!-- Clear Floats --></div>
</div>
Notice the way that I am also putting an HTML comment in the clearing div. This is actually a hack that I use to prevent IE6 from inserting extra space into the clearing div. There are many ways to accomplish this, but I find that this method produces the most consistent results.
As a result, you would have something like a photo gallery with descriptions aligning to the right of the image totaling in 10 columns in width without the next image popping up to the right of the previous description.
There are more classes to the 960 Grid System, but these are the only ones that we are using for this layout.
Let’s give what we have so far a quick look to see where we’re at:
As you can see, this gave us a huge step in the right direction without having to write any of our own CSS.
The next step is to actually start our own CSS.
The CSS
We’re going to start with the basic backgrounds that we need for the body, and work our way down the page.
body
{
font: 12px/18px Verdana, Arial, sans-serif;
color: #161616;
background: #446a32;
}
img, a img {
border: none;
}
#outer {
background: #d5d5d5 url(../images/background.jpg) left top repeat-x;
width: 100%;
padding-top: 30px;
}
#content {
background: #ededed url(../images/content-background.jpg) left top repeat-y;
padding: 15px 0 15px 0;
float: left;
}
As you can see, we’re setting the background color of the body to the same green that appears at the bottom of the footer gradient. This ensures that if the content shrinks that the footer will smoothly blend out into the page. We’re setting the default text styles, and setting the background for the content area.
Notice that we are using a background image to designate the background colors of our columns. This is a method known as “faux columns”, as to establish the appearance of equal height columns. If you have ever tried to make flexible equal height columns, you will know straight away why this is needed. There are other methods for doing this, but this is the most elegant for our purposes at this point.
Your layout will now look like this:
#header {
background: transparent url(../images/header-background.jpg) left top no-repeat;
height: 69px;
width: 100%;
float: left;
}
#header h1 a {
display: block;
float: left;
width: 225px;
height: 47px;
text-indent: -9999px;
background: transparent url(../images/alligatortek-logo.jpg) left top no-repeat;
margin: 18px 0 0 15px;
}
#searchbox {
padding-top: 40px;
}
#searchbox .text {
width: 220px;
}
#searchbox .button {
width: 62px;
}
#navigation {
background: transparent url(../images/navigation.jpg) left top repeat-x;
width: 100%;
float: left;
border-bottom: 1px solid #ffffff;
}
#primary {
float: left;
margin-bottom: 0;
}
#primary li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#primary li a {
font-size: 18px;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
float: left;
display: block;
padding: 7px 15px 6px 15px;
background: transparent url(../images/navigation-divider.jpg) right 5px no-repeat;
}
#primary li.last a {
background-image: none;
}
#primary li a:hover {
background: #456d33;
}
#secondary {
text-align: right;
margin-bottom: 0;
padding-top: 3px;
height: 27px;
}
#secondary li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
Above we have designated our header styles. There is nothing unusual about this CSS. Pay close attention to the navigation styles. This is a common method for laying out a horizontal navigation.
We are floating the ul left, and getting rid of the margin the 960 Grid has set.
We are then displaying the li within the ul as “inline”. This will make the list items all display in a row. Many people float li items left and keep them as block. I have found that this method tends to create more display issues with Internet Explorer 6. I have encountered fewer issues if I just set this to inline. Reset the padding and margins to 0.
We create all of the text and background styling on the anchor, rather than the list item. The reason for this is that we will create a larger hit zone on the navigation items. Also, it will make it easier to create cross-browser hover effects on these items. While the CSS spec does call for the :hover sudo-class to be enabled for most items, of course IE6 does not accommodate for this.
Notice that we have also used an image replacement technique for the logo. We’re using this as an SEO/Accessibility method for laying out a page.
You should now have something along these lines:
We’re going to move on to styling the footer:
#footer {
background: #446a32 url(../images/footer-background.jpg) left top repeat-x;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
}
#footer a {
color: #ffffff;
}
#footer .left {
border-right: 1px solid #ffffff;
width: 219px;
}
#footer .right {
border-left: 1px solid #ffffff;
width: 219px;
text-align: center;
}
#footer .left, #footer .right, #footer .center {
height: 150px;
}
#footer h4 {
font-size: 14px;
margin-bottom: 5px;
}
#footer .center {
text-align: center;
}
#footer .center ul {
margin: 0;
padding: 0;
}
#footer .center ul li {
list-style: none;
display: inline-block;
float: left;
margin: 0;
padding: 0 5px;
font-weight: bold;
border-right: 1px solid #ffffff;
}
#footer .center ul li.last {
border: 0;
}
#footer .center p {
margin-top: 10px;
clear: left;
}
Notice that we are setting heights, and reassigning widths to the columns since we set a 1px border on the columns. With the 1px border, the width will exceed the allotted space. This will push one of the columns down.
Your footer will now look like this:
We’re now going to create some simple styles for the form elements that will give them a little pop.
.text {
background: #ffffff url(../images/field-background.jpg) left top repeat-x;
font: 12px/18px Verdana, Arial, sans-serif;
color: #161616;
border: 1px solid #161616;
padding: 4px;
}
.button {
background: transparent url(../images/button-background.jpg) left top repeat-x;
background-color: #161616;
border: 1px solid #161616;
font: 12px/18px Verdana, Arial, sans-serif;
text-transform: uppercase;
color: #ffffff;
padding: 4px;
height: 26px;
}
label {
display: block;
width: 100%;
font-weight: bold;
padding: 3px 0 2px 0;
}
Pay close attention to the button styles. Internet Explorer has a really hard time understanding CSS when it comes to styling form elements. This is about as close as we’re going to get without conditional comments and extra stylesheets. While it’s strange to first set the background color to transparent, and then set it again for the semi-black color, this is just a little work-around for getting it to display consistently. Also, IE is going to give the buttons a 2px border rather than the 1px border like we told it to. I haven’t figured out why it blatantly ignores what we tell it, but it looks close enough for my taste.
You should now have something like this:
Notice that the form fields have the subtle background gradient which makes them really stand out. There is a way to accomplish this effect with pure CSS, but these methods are not yet fully supported by all browsers. You can give it a try if you feel inclined, but we’re going to keep it simple.
Now for the magic! We’re going to create our banner with CSS. I say “magic” because it’s a graphical banner with accessible text. This is not always practical, but it is ideal. Notice that we have multiple clickable items that we’re not going to have to create image maps to access.
We’re going to implement these styles:
#banner {
background: transparent url(../images/banner.jpg) top left no-repeat;
padding: 10px 10px 0 488px;
color: #ffffff;
height: 346px;
margin-bottom: 20px;
}
#banner h3 {
font-size: 14px;
background: transparent url(../images/phone-icon.jpg) left top no-repeat;
padding: 0 0 0 40px;
}
#banner a {
color: #a3e775;
}
#banner ul {
margin: 0;
padding: 0;
}
#banner ul li {
margin: 0;
padding: 0 0 7px 40px;
list-style: none;
background: transparent url(../images/check-icon.jpg) left top no-repeat;
}
#banner ul li a {
display: block;
width: 100%;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
The only thing unusual about the CSS above is the way that I am implementing the check-mark bullet points. Notice that I am using them as background images, and simply adding padding the left of the li element in order to push the text over. The reason that I’m going this route rather that using the image as a list-style image is that we are gaining much more precise control over the positioning of the bullets. You can try it both ways and let me know which way you find easier. I developed this method for myself a couple years back and have been using it ever since. Note also that I’m using the same method on the h3 element!
You will now have something that looks like this:
We could also create the title on the left with CSS3, but we’re going to keep that simple as well. Besides, we repeat the same verbiage on the right…
The only this that we have left to do is to style the content, and clean up the form on the right:
/* Text Style */
#left-col h2 {
font-size: 24px;
font-weight: normal;
border-bottom: 1px solid #456d33;
padding-bottom: 7px;
}
#right-col h2 {
font-size: 24px;
color: #ffffff;
font-weight: normal;
}
/* Style the form */
#right-col .form {
padding-bottom: 20px;
}
#right-col .form .text {
width: 210px;
}
#right-col .form textarea.text {
height: 75px;
}
#right-col .form .button-row {
text-align: right;
padding-top: 5px;
}
We could go a step further and add more styling for the subsequent header tags, lists, blockquotes, and any other elements, but I’m going to leave that up to you. Get creative and see what you can come up with.
Our final product will look like this:
That wraps up this section of the tutorial series. Please post a link to your version of this layout in the comments, we’d love to see your derivation of your results. I will follow-up with a master page tutorial in the coming months. We hope that you are enjoying the tutorials so far. Thanks for reading!