Code For My Site

At this point we know how to create an HTML and populate an HTML structure, create a CSS style-sheet and give color to our website by linking the style-sheet to our HTML; now we’re going to give our style-sheet some properties to align our website content.

Starting on this post we’re going to refer to our tags as element boxes, so you’ll get used to the term and you don’t get confused when reading more advanced tutorials.

Before we start we’re going to need to open our HTML in any browser and open our CSS file in a text editing program. Komodo Edit or Notepad would be fine.

If you haven’t been following our basic HTML and CSS tutorials, you can use your own files or just DOWNLOAD EXERCISE FILES HERE

1.- We’re going to start off by taking off all the automatic padding and margins that the browsers give to a website, we’ll do this by adding the next piece of code right after the @charset UTF-8 declaration.

* {
    padding: 0;
    margin: 0;
}

in this case the asterisk "*" means "all"; this Means all TAGS, DIVs, etc. will have zero padding and margin.

2.- Now we’re going to work on our menu alignment and size, to do this we’re going to start off by adding an ID attribute to our menu <UL> and then adding a piece of code to make our menu display inline and another property that makes our text bigger and bolder.

We’re going to start off by oppening our HTML file in our text editor and adding an ID attribute of “nav” to our menu <UL> tag like this:

<ul id="nav">
   <li><a href="http://www.codeformysite.com/">Home</a></li>
   <li><a href="http://www.codeformysite.com/">About Us</a></li>
   <li><a href="http://www.codeformysite.com/">Services</a></li>
   <li><a href="http://www.codeformysite.com/">Contact Us</a></li>
</ul>

Now we go to our CSS file and add a few properties to the list items <LI> of our new ID attribute “nav”.

#nav li {
	display: inline;
	font-size: 18px;
	font-weight: bold;
	padding-right: 10px;
}

Since we are specifying the LI or list item next to our ID nav identifier, this rules will only be applied to our list items inside the ul. The property rules are pretty self explanatory but we’ll give a brief explanation about them anyway:

• We are giving the DISPLAY property an INLINE value so instead of showing the text in a list order it displays all the list items in the same line.
• Our second property is FONT-SIZE; we are giving it a value of 18 PIXELS size for our list item text.
• The FONT-WEIGHT property is giving the BOLD value to our browser so our menu will be displayed with boldness.
• The PADDING-RIGHT property is giving 10 PIXELS of space to the right of every list item.

Our menu changes should look like this:

3.- The next step we’ll take is to give size and position to our header.

We’ll start with the header itself.

#header {
	position: relative;
	background-color: #111111;
	height: 150px;
}

Most property rules are pretty self explanatory here but the one that sticks out is the position property so we’ll try to explain a little about it.

• We are giving the POSITION property a RELATIVE value. This value tells the browsers that all positioning value that we give to the items inside the header DIV tag will be relatively positioned to the header DIV. If you’re not sure what this means, don’t worry, we’ll explain a little more when we’re positioning the H1 and the nav DIV.
• The HEIGHT property is taking an 150 PIXELS value to define how high our header will be.
• If you want to know more about background-color and color properties, visit our Basic CSS Style (color) post, because we won’t be explaining any color properties in this tutorial.

4.- Now we’ll position the items inside our header. To do this we’ll need to use the position property with an absolute value.

First we’ll position and give a new size to our main H1 title; since our H1 is a direct tag key and not an ID attribute we won’t need to include the "#" sign before the tag name.

h1 {
	position: absolute;
	font-size: 36px;
	top: 10px;
	left: 10px;
}

Like before, some property rules are self explanatory but in this case we’ll need to explain to you how we’re positioning the H1 inside our header.

• First we’ll explain the ABSOLUTE value for our POSITION property; what this value does is tell the browser to position the H1 based on our last tag with a POSITION-RELATIVE value, in this case the last tag with that value is the header DIV, so whatever top, left, right or bottom value we give to this H1 it will be relatively positioned to the header DIV (this means that our div or tag with an absolute value will always take the closest relative value as a base or starting point for positioning.).
• The TOP property is telling our browser to position our tag or H1 10 pixels from the top (in this case it will be 10 pixels from the top of our header DIV).
• The LEFT property is telling our browser to position our tag or H1 10 pixels from the left (in this case it will be 10 pixels from the left of our header DIV).

Now we’ll use the same positioning method for our DIV tag with an ID nav attribute.

#nav {
	position: absolute;
	bottom: 5px;
	right: 10px;
}

Much like the H1 position properties; the POSITION ABSOLUTE value combined with the BOTTOM and RIGHT values, is positioning our nav DIV based on our header position, in this case its positioning our nav DIV 5 pixels from the bottom of the header and 10 pixels from right to left of our header.

5.- Now we move on to the main_content DIV and our two DIVs inside it; here we’ll divide our content into two columns by floating our tags and giving them a specific width in percentage.

We’ll start off by giving some rule properties to our main_content DIV.

#main_content {
	background-color: #ffffff;
	overflow: auto;
	padding: 10px;
}

Ok, background-color you should know by now, OVERFLOW is kind of a complicated subject and PADDING is fairly simple.

• First we’ll explain why we’re using the OVERFLOW value. In some cases like this one, when we don’t give a specific height to our DIV tag or element box and we float the content inside that element box, the content will render outside the element box; in this case our element box or DIV tag has a background-color of white (#ffffff) so if we don’t specify the overflow rules, our element box just won’t grow with our content and it won’t show our white background.
  To find out more about the overflow property, just visit w3schools OVERFLOW
• Now for our PADDING property, we are using PADDING 10 PIXELS to give a 10 pixel space between all of our main-content borders and our content and sidebar borders.

Now we’ll move on to the content DIV.

In this case we are going to give our content div a % PERCENTAGE width so it will grow with our window and we’re going to give it a FLOAT property to align it to the left.

#content {
	float:left;
	color: #000000;
	width: 70%;
	padding: 10px;
}

There’s not much to explain here except the float and maybe why we are using float and the width percentage.

• The FLOAT property has 4 values, but we’ll be using only LEFT and RIGHT for our websites. the float property helps us put two DIV tags or element boxes right next to each other. This property also lets us float a photograph to the left or right and put text right next to it. In this case we’re floating our content DIV to the left.
  To find out more about the float property, just visit w3schools FLOAT
• on the WIDTH property we’re using a 70% width so the content size will grow depending on the size of the window you are watching it on and to leave a 30% to place our sidebar.

Now that our content DIV is floating to the left and has a 70% width we are going to do something similar to our sidebar DIV.

#sidebar {
	float: right;
	background-color: #cccccc;
	color: #000000;
	min-width: 20%;
	padding: 10px;
}

In this case we floated our element box or sidebar DIV to the right of the screen and gave it a minimum width of 20% of the total size of our window.

• This time we gave our FLOAT property a value of RIGHT; this value is going to align our sidebar DIV to the right of our screen.
• We are using the MIN-WIDTH or minimum width because we are going to let our sidebar automatically fill the remaining percentage of our window but not shrink below 20% of our window size.

6.- One of our last steps is to align our footer, this will be fairly simple since all we have to align is our site info.

Our footer will only have two values.

#footer {
	padding: 10px;
	text-align: center;
}

the only thing we’ve done for our footer is that we gave it a 10 PIXEL PADDING all around and we’ve centered the text with the TEXT-ALIGN property and the CENTER value.

7.- Finally we are going to give a couple of touches to our CSS and HTML codes to make our website look a little more populated.

We are going to start by adding a CLASS selector to our IMG tag on our HTML code, we are going to name this class selector "img_left" like this:

<img class="img_left" src="xmain_pic.jpg" alt="Our Main Picture" />

As you can see, adding a CLASS selector is much like adding an ID attribute to a tag or element box, all we’ve done in our HTML file is, we’ve added class="img_left" to our IMG tag.

• The difference between an ID attribute and a CLASS selector is that we can add the CLASS selector to more than one item in the same HTML file to obtain the same effect on different element boxes. We could use the ID attribute to do this, but it would be some of the worst HTML coding practice and if we were to validate our code, we would receive an HTML error for repeating the same ID attribute on different element boxes
  To find out more about the CLASS selector, just visit w3schools CLASS

As we mentioned before, to let CSS know that we are going to give style to an ID attribute we use the "#" sign; in this case to let CSS know that we are going to give style to a CLASS selector we are going to use a dot "." instead of a pound "#" sign to start our code, like this:

.img_left {
	float: left;
	margin: 0 10px 10px 0;
}

• We can now use the img_left CLASS selector to put in any element that we would want to float to the left with a margin of 0 PIXELS on top, 10 PIXELS to the right, 10 PIXELS on the bottom and 0 PIXELS to the left.

Our final touch is to add some CSS style to our paragraphs and a little more text to our HTML paragraphs to give it a more populated feeling to our website. In this case we are going to use some text generated by LoremIpsum.com, but you can put any text you like in there.

All we are going to do is justify our text and give a 10 pixel padding on the bottom after we finish each paragraph.

p {
	text-align: justify;
	padding-bottom: 10px;
}

And we’re done!!

By now your HTML code should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta name="" content="" />
<title> My New Website </title>
<link rel="stylesheet" type="text/css" href="main_style.css" />
</head>

<body>
<div id="header">
    <h1>My New Site</h1>
    <ul id="nav">
       <li><a href="http://www.codeformysite.com/">Home</a></li>
       <li><a href="http://www.codeformysite.com/">About Us</a></li>
       <li><a href="http://www.codeformysite.com/">Services</a></li>
       <li><a href="http://www.codeformysite.com/">Contact Us</a></li>
    </ul>
</div>
<div id="main_content">
    <div id="content">
        <img class="img_left" src="xmain_pic.jpg" alt="Our Main Picture" />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, lectus rutrum adipiscing faucibus, ligula lacus iaculis turpis, vel laoreet orci lorem in velit. Aliquam lacus nulla, aliquam ut interdum at, sagittis a velit. Nam auctor, velit nec suscipit scelerisque, libero odio bibendum massa, id placerat nibh augue eu risus. Nunc id ligula eget orci mattis feugiat a et erat. Proin lobortis faucibus congue. Nunc quis diam erat, id porttitor purus. Proin eu enim nibh. .</p>

		<p>Aenean congue erat eget purus pharetra gravida. Nunc est ligula, mollis in aliquam ut, vehicula sed leo. Morbi eget erat non lectus molestie commodo. Vestibulum eget interdum lacus. Proin et lectus urna, a pharetra risus. Curabitur purus arcu, varius non mattis eget, gravida id erat. Aliquam erat volutpat.  </p>
    </div> <!-- This closes the content div -->
    <div id="sidebar">
        <h3>sidebar title</h3>
        <p>Proin eu enim nibh. Aliquam auctor, arcu a sagittis aliquet, arcu odio bibendum massa, eu ultricies ante augue sed ligula. </p>
        <p>Nunc est ligula, mollis in aliquam ut, vehicula sed leo. Morbi eget erat non lectus molestie commodo. Vestibulum eget interdum lacus. </p>
    </div> <!-- This closes sidebar div -->
</div> <!-- This closes the main_content div -->
<div id="footer">
    <span>2011 All rights reserved Me | Programed by Me</span>
</div><!—This closes footer div -->

</body>
</html>

Your CSS code should look like this:

@charset "utf-8";
* {
    padding: 0;
    margin: 0;
}
body {
	background-color: #000000;
	color: #aaaaaa;
}
a {
	color: #00a2ff;
}
a:hover {
	color: #247AA3;
}
h1 {
	position: absolute;
	font-size: 36px;
	top: 10px;
	left: 10px;
}
p {
	text-align: justify;
	padding-bottom: 10px;
}
.img_left {
	float: left;
	margin: 0 10px 10px 0;
}
#header {
	position: relative;
	background-color: #111111;
	height: 150px;
}
#nav {
	position: absolute;
	bottom: 5px;
	right: 10px;
}
#nav li {
	display: inline;
	font-size: 18px;
	font-weight: bold;
	padding-right: 10px;
}
#main_content {
	background-color: #ffffff;
	overflow: auto;
	padding: 10px;
}
#content {
	float:left;
	color: #000000;
	width: 70%;
	padding: 10px;
}
#sidebar {
	float: right;
	background-color: #cccccc;
	color: #000000;
	max-width: 25%;
	padding: 10px;
}
#footer {
	padding: 10px;
	text-align: center;
}

And your website should look like this:

There’s still much to learn before we can make an actual website, but I only wanted to cover the basics before I could start posting advanced coding for menus, banners, gallerys, forms, etc.

You can download files here: