|
You created a great design for you website but now you're not sure
how to start coding it? How to structure it? How do you use CSS to
display that beautiful design in the browser? Well... this tutorial
should answer all those questions.
A mock-up
A rather simple design for the company Simple Designs.
Visualizing the structure
Now with a design in mind, you should see 5 sections: Branding, Navigation, Content, Sidebar and Site Info.
Start with the mark-up
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="siteinfo"></div>
</body>
</html>
You'll notice that I kept the same titles we used to define our
sections in the HTML. Most often than not, you will see designers use
HEADER instead of BRANDING but BRANDING is a much more meaningful word
that describes the content for this div. Same reasoning with SITEINFO.
Many use FOOTER but what's in a footer? Site information is usually in
there like address or phone numbers or just more information pertaining
to the site. Always try to be as descriptive as possible when creating
your sections (ID)
Now that we have our structure skeleton all checked, let's add the content.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="branding">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
<div id="content">
<h2>I create clean, simple and usable websites for small
business and organizations</h2>
<p>This is my web design portfolio.</p>
<p>I'm a designer and a coder. I can create a site from
an idea or take an existing site and make it more accessible
and search engine friendly without costing you an arm and a leg.</p>
<p>Have a look around and contact me when you're
ready. Hopefully I can help you get the idea
from your mind onto the web.</p>
<h3>Latest additions to the portfolio</h3>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company A"></a></div>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company B"></a></div>
<div class="postfolio"><a href=""><img src=""
width="200" height="200" alt="Company C"></a></div>
</div>
<div id="sidebar">
<div class="short_about">
<h4>A little bit about me</h4>
<p>Hello! My name is Karinne Legault. I'm a web
designer by day and a ... well I
need my beauty sleep so ... I sleep at night.
<a href="/about/">Want to know more?</a></p>
</div>
<h4>Lately on Simple Designs</h4>
<p>Welcome to the new version of Simple Designs. We are quite happy
with this new layout.Please ... let us know what you think of it.</p>
<div class="latest_dates">Tuesday, November 6th, 2007</div>
<p>Out with the old and in with the new! Just launched is the
snew site for Company A. A great new
design to complement the new energy from their new CEO.</p>
<div class="latest_dates">Friday, October 26th, 2007</div>
</div>
<div id="siteinfo">
<div class="one">
<ul class="supp_nav">
<li><a href="/">Home</a></li>
<li><a href="/company/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/company/privacy">Privacy</a><li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>Copyright © 2007 Karinne Legault</p>
</div>
<div class="two">
<p>Proudly hosted by <a href="">HostingCompany</a></p>
</div>
</div>
</body>
</html>
If you copy all that code and open it up in your favourite browser,
you should basically see what a person on a screen reader will see:
content.
While it's not pretty, it serves its purpose. With the headings in
place, once can look at the content and discern the areas and read the
website like a book.
Let's style it!
We will be putting all our styles in a separate stylesheet called
styles.css so let's add a link to this in the <head> of our HTML
document
<head>
<title>Simple Designs :: A web design portfolio by Karinne Legault</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen"
href="css/styles.css">
</head>
Now we'll dive in and start setting up the basic styling for our site.
- We want to remove the default margins and padding set by the browser.
- We want to use Verdana as the main font for the content and set it as 12px.
- We want links to be bold, underline and with color #4ecdc4 and not underline when on hover state.
- Assign the different size and colors to the different headings used throughout the site.
/*** COMMON ELEMENTS
********************************/
html, body {
margin: 0;
padding: 0;
}
body {
font: 12px Verdana, Geneva, sans-serif;
background-color: #fff;
}
a:link, a:visited, a:active {
color: #4ecdc4;
font-weight: bold;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
h2 {
color: #556270;
font-size: 24px;
}
h3 {
color: #c44d58;
font-size: 18px;
}
h4 {
color: #c44d58;
font-size: 14px;
}
Now that we've settled the basic styling for our common elements, we'll tackle each section individually.
One thing you notice when you look at the mock-up provided; there
are a lot of colors and bars and big backgrounds, etc... but all this
design will be using is 4 images. The rest will be set in the CSS.
BRANDING
Our branding will use the nice image to display the company name and slogan so we need to add that image in our HTML
<div id="branding">
<img src="i/branding.jpg" width="515" height="105"
alt="Simple Designs :: A web design portfolio by Karinne Legault">
<h1>Simple Designs</h1>
<h2>A web design portfolio by Karinne Legault</h2>
</div>
Now we need to hide the <h1> and <h2> by setting the two
elements to position: absolute; and giving them a text-indent:
-9999px;. This method was first introduced by Mike Rundle back in August of 2003 and I believe it to be the most accessible image replacement.
/*** BRANDING
********************************/
#branding {
background: #fff url(../i/branding-bg.jpg) repeat-x 0 0;
height: 118px; /* 142px */
padding-top: 24px;
overflow: hidden;
}
#branding h1, #branding h2 {
position: absolute;
text-indent : -9999px;
}
NAVIGATION
We will be using a list to display the navigation. As explained by Mark Newhouse in his Taming List article from A List Apart magazine:
These are often
marked up as a string of links, often in separate DIVs or paragraphs.
Structurally, however, they are a list of links, and should be marked
up as such.
<div id="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/company/about">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>
And the CSS:
/*** NAVIGATION
********************************/
#navigation {
background: #fff url(../i/navigation-bg.jpg) repeat-x 0 0;
height: 65px;
}
#navigation ul {
margin: 0;
padding: 0 0 0 15px;
list-style: none;
}
#navigation ul li {
float: left;
display: inline;
padding-right: 10px;
}
#navigation ul li a {
height: 29px;
min-width: 10px;
color: #000;
font-size: 18px;
font-weight: normal;
letter-spacing: 1px;
text-decoration: none;
display: block;
padding: 6px 7px 0;
}
#navigation ul li a:hover {
background-color: #7fefe7;
}
In the #navigation ul { }, the list-style: none; property is what removed the bullets from the unordered list element. display: inline; and float: left; will set the list elements to display in a line.
A simple hack
If you look at the present site in Internet Explorer 6, you will
notice that the navigation is not displaying inline. This is because
IE6 does not support the min-width property. We need to add width:
10px; property for IE6 and we will do this by using conditional comments.
Add this in the <head> of your document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css">
<![endif]-->
/*** NAVIGATION
********************************/
#navigation ul li a {
width: 10px;
}
CONTENT
Before we start we will add a #content_wrapper div to contain both
the #content and the #sidebar div to limit the space used to 780px.
<div id="content_wrapper">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</div>
/*** CONTENT - WRAPPER
********************************/
#content_wrapper {
width: 760px;
overflow: hidden;
padding: 0 10px;
}
The overflow: hidden; property is there to clear the floats:
A common problem with
float-based layouts is that the floats' container doesn't want to
stretch up to accommodate the floats. If you want to add, say, a border
around all floats (ie. a border around the container) you'll have to
command the browsers somehow to stretch up the container all the way.
The CONTENT and SIDEBAR area are side by side. We will be floating
both of them; one left and one right. Never use absolute positioning or
relative positioning for such simple tasks. The float property is much
simpler.
/*** CONTENT
********************************/
#content {
float: left;
width: 480px;
}
/*** SIDEBAR
********************************/
#sidebar {
float: right;
width: 230px;
}
Pretty simple huh? Hang in there... we're almost done!
SITE INFO
For the site info, we will do the same thing with did with the
CONTENT section and that is add a #siteinfo_wrapper to contain the
information in a 780px box.
<div id="siteinfo">
<div id="siteinfo_wrapper">
<div class="one">
...
</div>
<div class="two">
...
</div>
</div>
</div>
Since we've already declared this information for the
#content_wrapper, we will just add in the #siteinfo_wrapper to the
declaration.
/*** WRAPPERS
********************************/
#content_wrapper, #siteinfo_wrapper {
width: 760px;
overflow: hidden;
padding: 0 10px;
}
As with the content section we have 2 areas that we will float; again... one left and one right.
/*** SITE INFO
********************************/
#siteinfo {
background: #fff url(../i/siteinfo-bg.jpg) repeat-x 0 0;
height: 70px;
color: #fff;
font-size: 11px;
margin-top: 15px;
}
#siteinfo .one {
float: left;
width: 480px;
padding-top: 18px;
}
#siteinfo .two {
float: right;
width: 230px;
padding-top: 18px;
}
We also have added a supplementary navigation to the SITE INFO that we have put in a list again.
<div id="siteinfo">
<div id="siteinfo_wrapper">
<div class="one">
<ul class="sup_nav">
<li><a href="/">Home</a></li>
<li><a href="/company/about/">About</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/portfolio/">Portfolio</a></li>
<li><a href="/company/privacy">Privacy</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
<p>Copyright © 2007 Karinne Legault</p>
</div>
<div class="two">
<p>Proudly hosted by <a href="">HostingCompany</a></p>
</div>
</div>
</div>
And the CSS should look like this
ul.sup_nav {
margin: 0;
padding: 0;
list-style: none;
}
ul.sup_nav li {
display: inline;
border-right: 1px solid #fff;
margin-right: 10px;
padding-right: 10px;
}
The colors of the links need to change from the turquoise to white.
#siteinfo a:link, #siteinfo a:visited, #siteinfo a:active {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
#siteinfo a:hover {
text-decoration: none;
}
We're done!
SOME EXTRAS
Notice that this doesn't exactly look like the original mock-up; the
portfolio boxes are still one under the other, it's missing that pink
"About" box and the green background for the date so... if you have
some time, here's the code to get all those things sorted.
Portfolio boxes
This is a simple matter of floating each of them
portfolio {
float: left;
width: 145px;
height: 105px;
margin-right: 5px;
}
.portfolio a:link img {
border: #4ecdc4;
}
The big pink "About" box
By simply adding a background and some padding to the div containing
the "About" info, you can make simple things like this stand out
#sidebar .short_about {
background-color: #ff6b6b;
padding: 8px;
}
.short_about h4 {
color: #000;
margin: 0;
}
.short_about a {
color: #000;
}
.short_about a:hover {
text-decoration: none;
}
We've also changed the color of the heading and link color
Green background for dates
Again, just adding some background here
.latest_dates {
background-color: #c7f464;
font-size: 9px;
}
Conclusion
Creating the mark-up is the most important factor here. Once you
have it defined perfectly, you can change the look of a site without
even diving into the HTML.
A perfect example of this is the CSS Zen Garden. Every design uses the exact same HTML file. Only a different CSS stylesheet (and accompanying images) are loaded.
Happy coding!
|
iEntry 10th Anniversary
Announcements
Contact
