Alright, let's get started. When im doing CSS work, I often switch back and forth between the HTML and CSS as I go along, so you will be switching back and forth between your CSS file and your HTML file often.
Before we even start coding, let's visualize how it should look in our browser, first we want to make sure that the layout is centered, in internet explorer AND firefox, it should have a header, 1 column for content, and another for navigation, easy enough!
So let's start with some CSS
body {
margin : 0px auto ;
text-align : center ;
background-color : #f59751; /* This is set to light orange, change this to the color you want as your site's background. */
}
.end {
clear : both ;
}
Alright, let's break this code down.
body {
margin : 0px auto ;
The body { part means that we are editing the body of the HTML (The <body> tag) so it effects our whole page, the margin: 0px auto; is what makes our site centered, in firefox.
text-align : center ;
This is what makes it centered, in IE (Internet Explorer). Don't worry, not all of our text is going to be centered, because we just change it back to normal when we make our container!
background-color : #f59751; /* This is set to a light orange, change this to the color you want as your site's background. */
}
This is just what the global background color of our site is going to be, I have set it to a light grey, just change the hex color to whatever you want and the site's background will change.
Now we need to start our HTML document, just the nasty beginning stuff.
<!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" >
<head>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8" / >
<title> TutorialCode.com - CSS 2 Column Layout </title>
<style type = "text/css" media = "screen" title = "Main StyleSheet" > @import "style.css"; </style>
</head>
<body>
This just start off our HTML document, remember to always code by the standards (It's not mandatory though). This will set your document type to transitional, as well as set your character set, we also put our title (which you can change) and include our stylesheet. Then we end our head section, and start our body.
#container {
width : 750px;
text-align : left ;
margin : 0px auto ;
background-color : #de7c3d; /* This is a darker orange */
}
Now we finally create our container, I'll explain a part of it.
text-align : left ;
This is where we set our text back to normal, since everything will be contained within this container, all text will be written on the left, but since we have our body set to center, the whole template will be centered.
Back to our HTML for a quick add! Right underneath of your <body> tag, add this -
<div id = "container" >
This starts our container div for our layout, for the most part your CSS file is accessed using the <div> tag, you will learn more about it after.
#header {
width : 730px;
margin-left : 10px;
background-color : #f7771c; /* Pure Orange */
height : 115px;
}
#header h1 {
font-size : 20px;
font-family : georgia;
color : #3975bd; /* A blue */
padding : 20px;
}
This is where we create our header, our header is just going to be a background color, with some text in it. I'll break down some of the parts of it.
margin : 10px;
background-color : #f7771c; /* Pure Orange */
height : 115px;
This margin makes it so that everything is spaced 10px away from the header, on all sides. We then set our background color and then we make our header 115px in height.
#header h1 {
Now, we want to put some text in our header, and let's say we want to use the <h1> tag to display it, the default <h1> tag is very ugly, so we style it. As you can see, we leave the #header part in front of the h1, that is because we only want <h1> tags to be styled this way, in our header. Just by reading the rest of it, you can understand it!
Now let's put our header in action, with our HTML, directly under the <div id="container"> tag would this code -
<div id = "header" >
<h1> Simple 2 Column Layout </h1>
</div>
This starts our header, and writes something using our <h1> tag that we specified.
Now let's create our content area.
#content {
width : 520px;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 10px;
float : left ;
background-color : #eee; /* Light Grey */
font-family : tahoma;
font-size : 11px;
color : #666666; /* Dark Grey */
padding : 5px;
}
This is quite a big portion of CSS, it's all pretty easy though. You have seen everything in here except for -
float : left ;
This is how we get 2 divs (our content and navigation) right next to eachother. The rest is easy enough to understand, now let's make our navigation.
#navigation {
width : 190px;
float : left ;
background-color : #eee;
font-family : tahoma;
font-size : 11px;
color #666666;
}
#navigation li {
padding-left : 8px;
margin : 0px;
list-style : none ;
}
#navigation li a {
text-decoration : none ;
color : #49a8ec;
font-family : tahoma;
font-size : 11px;
}
Well, that's even MORE CSS. First we create our navigation column in the same was as our content column, then we get to the #navigation li part, this is where we define the <li> tag, it's an easy way to display links in a navigation, we give them a padding of 8, so all our links are 8px away from the left side also the
list-style : none ;
code means that there wont be anything beside each li element,the default is those ugly dots. Now that doesn't take care of our link styling though.
text-decoration : none ;
color : #49a8ec;
That part of the code makes our links have no underline, and makes them a nice blue. Then we just set the font.
Now we just finish up our HTML and were done! We now add our content div -
<div id = "content" >
filler text......
</div>
You may want to go to lipsum.org to generate some filler text so you know what your site will look like with text in it, that's what I did at least!
<div id = "navigation" >
<li> <a href = "#" > Link Test </a> </li>
<li> <a href = "#" > Link Test </a> </li>
<li> <a href = "#" > This is a long Link Test </a> </li>
<li> <a href = "#" > Link Test </a> </li>
<li> <a href = "#" > Link Test </a> </li>
<li> <a href = "#" > Link Test </a> </li>
</div>
This is where we put our navigation into the HTML, we start our navigation div, then for each link we start a new <li> element, add in our link, and just continue onto the next one. This makes for very clean navigation code, and is easy to read, then we close our navigation div, almost done!
<div class = "end" > </div>
</div>
</body>
</html>
The <div class="end"></div> part is so that our container background, is pulled as far as our content box goes, if we don't put that our container background will only go as far as the header, and it looks weird! Then we close up our container, end our body and html tags and were done!
If you have any questions, just leave a comment! You will be answered quickly, or if you have anything you want to say just feel free to leave a comment.
Download the source files here
No comments:
Post a Comment