I made a layout to see if I really learned something while studying HTML and CSS. Here’s a preview of it:
Simple Blue
I really didn’t want to give this layout a name but since I figured it’ll be troublesome if I don’t name it now since I’ll be making more layouts in the future. What I want to do right now is to explain how I made this theme so I could get a better understanding of it. Teaching is twice learning because I’ll be forced to understand it so I could explain it to you.
To start off, here’s the markup of the layout:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Terence Ponce</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>
<body>
<div id="container">
<div id="title">
<h1><a href="index.html"><span>Terence Ponce</span></a></h1>
</div>
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="blog">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content-container">
<div class="entry">
<div class="content">
<div class="content-title"><a href="#" class="title-link">Some blog post</a></div>
<div class="content-body">
<div class="author">Posted by <a href="#">Author</a> at Nov 19, 2010.</div>
<div class="comment"><a href="#">5</a> comments.</div>
<div class="clear"></div>
<p>
In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl.
Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor.
In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo,
non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.
</p>
<blockquote>
<p>
Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet,
turpis massa tristique justo, sed egestas metus magna sed purus.
</p>
</blockquote>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>
Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus.
Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra.
Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus.
Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies.
Cras nisl. Proin quis massa semper felis euismod ultricies.
</p>
</div>
</div>
</div>
<div class="entry">
<div class="content">
<div class="content-title"><a href="#">Another blog post</a></div>
<div class="content-body">
<div class="author">Posted by <a href="#">Author</a> at Nov 11, 2010.</div>
<div class="comment"><a href="#">3</a> comments.</div>
<div class="clear"></div>
<p>
In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl.
Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor.
In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo,
non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.
</p>
<blockquote>
<p>
Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet,
turpis massa tristique justo, sed egestas metus magna sed purus.
</p>
</blockquote>
<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>
<p>
Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus.
Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra.
Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus.
Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies.
Cras nisl. Proin quis massa semper felis euismod ultricies.
</p>
</div>
</div>
</div>
</div>
<div id="sidebar">
<h2>Something</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">pellentesque</a></li>
<li><a href="#">sociis natoque</a></li>
<li><a href="#">semper</a></li>
<li><a href="#">convallis</a></li>
</ul>
<h2>Another thing</h2>
<ul>
<li><a href="#">consequat molestie</a></li>
<li><a href="#">sem justo</a></li>
<li><a href="#">semper</a></li>
<li><a href="#">sociis natoque</a></li>
</ul>
</div>
<div class="clear">
</div>
<div id="footer">
© 2010 <a href="index.html">Terence Ponce</a>.
Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML</a>.
Design by <a href="http://terenceponce.com">Terence Ponce</a>
</div>
</div>
</body>
</html>
Feel free to copy and paste this to your favorite text editor. As for me, I usually type the sample code manually instead because it helps me understand the code better. It also helps me understand the structure of the markup faster. Now let’s move on to the CSS.
* {
margin: 0;
padding: 0;
}
body {
background: #036 url(images/bg.gif) repeat-y center top;
color: #333;
font: normal 75.5% "Lucida Sans Unicode", sans-serif;
}
a {
color: #39C;
}
a:hover {
color: #3CF;
}
p, ul {
font-size: 1.2em;
padding-bottom: 1.2em;
}
ul {
margin-left: 1.2em;
}
li {
list-style-type: bullet;
}
h2 {
font-size: 1.4em;
}
blockquote {
background: #FFF;
border-bottom: 1px solid #DDD;
border-top: 1px solid #DDD;
color: #333;
display: block;
font-size: 0.9em;
margin-bottom: 1.2em;
padding: 6px 12px;
}
blockquote p {
padding: 3px 0;
}
h1, h2, h3 {
color: #666;
}
#container {
width: 1000px;
margin: 0 auto;
}
#title {
background: #369 url(images/title.gif) repeat-x;
height: 60px;
width: 900px;
margin: 0 auto;
}
#title h1 {
font: normal 2.4em Verdana, sans-serif;
}
#title a {
color: #FFF;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}
#title span {
padding-left: 24px;
}
#title a:hover {
background: #39F url(images/title-hover.gif) repeat-x;
color: #FFF;
width: 100%;
}
#navigation {
width: 900px;
margin-left: 50px;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation ul li {
list-style-type: none;
display: inline;
}
#navigation li a {
display: block;
float: left;
padding: 10px 20px;
text-decoration: none;
border-right: 1px solid #DDD;
color: #39C;
}
#navigation li a:hover {
color: #3CF;
}
.entry {
clear: both;
}
.entry .date {
background: #068;
height: 40px;
width: 40px;
color: #966;
text-align: center;
float: left;
}
.entry .date h3 {
padding-top: 4px;
color: #966;
font-weight: normal;
font-size: 1em;
}
.entry .date p {
font: normal 1.6em serif;
}
.entry .content {
float: left;
width: 650px;
}
.content-title {
background: #069;
color: #FFF;
line-height: 40px;
padding-left: 16px;
font-size: 1.6em;
font-weight: bold;
}
.content-title a {
text-decoration: none;
color: #FFF;
}
.content-title a:hover {
color: #3CF;
text-decoration: underline;
}
.author {
font-size: 90%;
float: left;
margin-bottom: 10px;
margin-left: 5px;
}
.comment {
font-size: 90%;
float: right;
margin-bottom: 10px;
margin-left: 5px;
}
.entry .content-body {
padding: 12px 18px;
}
#content-container {
float: left;
margin-left: 50px;
}
#sidebar {
float: left;
margin-left: 1px;
width: 249px;
}
#sidebar h2 {
background: #069;
color: #FFF;
font-size: 1.3em;
line-height: 40px;
padding-left: 12px;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar li {
border-bottom: 1px solid #DDD;
list-style: none;
font-size: 90%;
}
#sidebar li a {
background: #FFF;
color: #553;
display: block;
padding: 8px 4px 8px 12px;
text-decoration: none;
}
#sidebar li a:hover {
background: #9CF;
color: #553;
}
.clear {
clear: both;
}
#footer {
background: #369 url(images/footer.gif) repeat-x;
color: #FFF;
font-size: 1.1em;
line-height: 40px;
text-align: center;
width: 900px;
margin: 0 auto;
}
#footer a {
color: #FFF;
}
#footer a:hover {
color: #3CF;
}
I’ll be going over the CSS in an incremental fashion so I can explain it better. Also, I won’t be going over everything in the CSS file since some of them are pretty understandable already. Now onto the bits of the CSS:
* {
margin: 0;
padding: 0;
}
For starters, I’ve overridden the margin and padding to 0 instead of the default. HTML provides a lot of default values for certain attributes. I don’t like most of them so I tend to just override them for convenience’s sake.
body {
background: #036 url(images/bg.gif) repeat-y center top;
color: #333;
font: normal 75.5% "Lucida Sans Unicode", sans-serif;
}
I made an image and used it as the background for the layout. Unfortunately, I still don’t have a full grasp on using images as background so I added in a background color (#036) just in case my image failed as a background. For the font-color, I decided to use #333 because I like how it blends in with the theme.
#container {
width: 1000px;
margin: 0 auto;
}
If you bothered to look at the markup, you’ll notice that I enclosed everything inside a div named “container”. I like enclosing everything inside a div because it adds control when it comes to CSS. In the old days, I never used an external div to enclose all my other divs so the only way I could control every div that I have was through the body attribute in CSS. I then found out how convenient an external div is, which is why I am doing it right now.
Now back to the code, I set the width to 1000px since most computers right now support at least 1024×768 in terms of screen resolution. I then set the upper and lower margins to 0 then set the left and right margins to auto so it would center the div automatically to the browser screen.
#title {
background: #369 url(images/title.gif) repeat-x;
height: 60px;
width: 900px;
margin: 0 auto;
}
One of the neat things I find about CSS is the repeat feature. It contributes a lot to faster page loading times. If you noticed, I set the width to be a little lower than #container‘s width. The reason behind this was because I was planning to make a certain div seem like it’s out of bounds. Unfortunately, I didn’t go with that plan in the end but I didn’t change it back to 1000px since that’ll ruin the background image that I made already. I then set the margin to 0 auto to place it in the center.
#title h1 {
font: normal 2.4em Verdana, sans-serif;
}
As I said before, I don’t like the defaults given by HTML when it comes to font-sizes. One of the things I’ve observed about the defaults of HTML is that they tend to be misleading to beginners. I see people use h1, h2, etc. in a wrong way just because of the font-size it gives instead of the structure. They tend to forget that we’re the ones controlling HTML through CSS, it’s not the other way around.
#title a {
color: #FFF;
display: block;
line-height: 60px;
text-decoration: none;
width: 100%;
}
I set the display to block to give the user more area to click to. One of the things that I’ve learned when it comes to UI design is that we should provide as much click area as possible for the users.
<div id="header">
</div>
If you’ve looked at the markup carefully, you’ll notice that I made a div named “header” just between #title and #navigation. I placed that just in case I want to put a header image between the two divs. You won’t see it being rendered in the CSS though.
#navigation {
width: 900px;
margin-left: 50px;
}
Next up, I want the navigation bar to appear just below #title and I want it to be the only thing in the row so I set the width to the same width as #title.
#navigation li a {
display: block;
float: left;
padding: 10px 20px;
text-decoration: none;
border-right: 1px solid #DDD;
color: #39C;
}
By default, an unordered list separates its list by a line break. We don’t want that kind of presentation since we’re aiming for a horizontal navigation bar. Setting the float attribute to left solves this problem. Next, we set the display to block and padding to 10px 20px and added a border to the right to give it a more box-y feel.
#content-container {
float: left;
margin-left: 50px;
}
I want the layout to be divided into 2 columns, the content and the sidebar. I made #content-container float to the left to achieve that look. I also added a margin to the left by 50px to add a bit of indenting.
.entry .content {
float: left;
width: 650px;
}
Yes, I know how redundant it is to set the float attribute to left. Feel free to ignore that line and focus on the width attribute. I set the width attribute to 650px to provide space for the sidebar.
#sidebar {
float: left;
margin-left: 1px;
width: 249px;
}
I set the float attribute to left to make #sidebar align next to #content-container. I then add margin by 1px then set the width 249px to make a total of 250px. That plus the width for the content makes 900px total.
.clear {
clear: both;
}
Clear is one of my favorite attributes in CSS. It makes sure that it stays at the bottom of all the floated objects that preceed it. It’s perfect for keeping your layout in control. I used this to make sure that #footer stays at the bottom of the screen.
#footer {
background: #369 url(images/footer.gif) repeat-x;
color: #FFF;
font-size: 1.1em;
line-height: 40px;
text-align: center;
width: 900px;
margin: 0 auto;
}
I used another image for the background. I also set the width to 900px to make sure that it doesn’t share spaces with another div.
That pretty much covers how I did the layout. I uploaded the finished product here. The file also includes the images that I used for the layout.
As a final note, if you look at the CSS carefully, you’ll notice how there are a lot of unused code there. To be honest, this layout didn’t go exactly as planned but I liked the accident that I made so I decided to stick with it. I’ll be using the unused code for future layouts that I’ll make.
