Building a Basic CSS Layout
This short tutorial will show you how to create a basic but effective CSS layout, using an excellent open source online tool: InkNoise's Layout-o-Matic. Use this tool when creating your CSS-styled pages and you'll have very few browser compatability problems -- and the layout is flexible enough for you to adapt it to your more complex design needs.
- Create a new folder on your desktop called "styles."
- Using Firefox, go to http://www.inknoise.com/experimental/layoutomatic.php and select which type of "layout" you'd like: full page, two columns, or three columns (this tutorial uses the "Two Column (left sidebar)" layout).
- Select the View button, which will bring you to a page that has some gray lines and boxes. This is the skeleton of your page.
- Select View | Source (or Page Source). Copy the entire code.
- Open an HTML editor (HTML-kit on the PC, Taco on a Mac) , and start a new HTML document.
- Delete any code that shows up. Paste the code you just copied from step 3 into your new document. If your HTML editor has a Preview function, select it and you'll see the same gray boxes and lines the Layoutomatic created.
- Save your page to the desktop as: "test.html" -- or something like that.
- Open a new file and save that file in "styles" folder on the desktop as "stylesheet.css". Note: Do not save the file to the desktop; if you do the tutorial will not work.
- Go back to "test.html" and add
lang="en"to the line that begins (2nd line of code)<html xmlns=so it begins like this instead:<html lang="en" xmlns= - Still in "test.html", cut the following code:
<style type="text/css">Press Save.
#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}
#content {
padding: 5px;
margin-left: 215px;
background-color: gray;
}
#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
}
</style> - Copy the following code and paste it in to "stylesheet.css" :
#container {These changes may not make sense now, but will be discussed on page 2 of the tutorial.
margin-left: auto;
margin-right: auto;
width: 760px;
border: 1px solid gray;
margin: 10px;
padding: 10px;
}
* html div #container { /* This is the Tan hack */
width: 782px;
w\idth: 760px; }
#banner {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}
#content {
padding: 5px;
margin-left: 215px;
background-color: gray;
}
#sidebar-a {
float: left;
width: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
* html div #sidebar-a { /* This is the Tan hack */
width: 210px;
w\idth: 200px; }
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
} - Enter the following line just below the <head> tag:
<link rel="stylesheet" href="styles/stylesheet.css" type="text/css" /> - Save the document. Open a Firefox, and then got to File | Open File, and open "test.html." From this point forward it is very important you preview the page in Firefox, and not in the HTML-kit preview window. Results will look different in the HTML-kit window -- especially when using advanced CSS.
- If you look back at "test.html" you will see code similar to this:
<div id="container">The code corresponds to the gray lines and boxes in the following manner:
<div id="banner"> </div>
<div id="sidebar-a"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
- To help you remember what is what for now, please add text so your "test.html" page looks something like this:
<div id="container">If you go back to the preview you will see something like the following:
<div id="banner">This is my banner.</div>
<div id="sidebar-a">This sidebar-a, where links can go </div>
<div id="content">This is where my main content will go. </div>
<div id="footer"> This is my footer.</div>
</div>
- Go to "stylesheet.css" and find the following bit of code:
#content {This code controls the appears of the content section of your web page. Lets make some changes to the code, so it looks something like this:
padding: 5px;
margin-left: 215px;
background-color: gray;
}#content {Now go back to "test.html" and change
padding: 0 5px;
margin-left: 215px;
background-color: white;
border: 1px solid #333;
}
#content p {
font-family: verdana, arial, sans-serif;
color: #000;
font-size: 12px;
}
<div id="content">This is where my main content will go. </div>so it looks like this:<div id="content"><p>This is where my main content will go.</p> </div>If you go back to the preview you will see something like the following:
