[Intermediate] [CSS] How to make a Tableless Multi-Column Layout
Okay, I figure this is for reals intermediate. This will show you how to make tables, without using <table> tags. This can be very hard for some people, easy for others. Please note that this might also be a tutorial on how to start ur own CSS webpage o.O
We need to make 2 files first:
- index.html
- style.css
Anything that starts with
div.whatever {
like that or if it contains the brackets, needs to be placed in Style.css
Everything else goes in Index.html
First we need make some new elements in your css. Mine are typically named.
Code:
div.inside {
width: 300px;
padding: 5px 0 5px 15px;
background: #DFDFDF;
color: #0000AF;
margin-bottom: 15px;
}
Code:
div.outside {
border: solid 1px #000000;
background: #EFEFEF;
padding: 5px 0 5px 15px;
width: 500px;
margin: 5px;
}
You are allowed to put multiple of each without messing with the format of the other. Just make copies and paste the below to try it out.
The HTML would look like this:
Code:
<!-- Block within a Block -->
<div class="outside">
<div class="inside">Hello, World!</div>
This is an example of a block, within a block.
</div>
http://foxscapepro.com/examples/Screenshot_3.png
So that was just to make a new block which will be titled "container" (the area that "contains" all the content.) We will need a couple a new CSS for this:
Code:
div.container {
margin-left: auto; /* This and the below center the container on the page*/
margin-right: auto;
border: solid 1px #000000;
width: 700px;
min-height: 500px;
}
And the new HTML would look like this:
Code:
<div class="container">
<div class="outside">
<div class="inside">Hello, World!</div>
This is an example of a block, within a block.
</div>
</div>
http://htmlexamples.3owl.com/divtabl...reenshot_4.png
Now everything should be put in the middle of the page as shown above.
================================================== =====
Next thing we can do now, is make columns using the float element. This can be alittle tricky at times, so follow carefully what I do. We need to do this first to the CSS:
Code:
div.columntitle {
color: #0000AF;
font-weight: bold;
background: #EFEFEF;
width: 100%;
}
Code:
div.leftcolumn {
margin-top: 15px;
margin-left: 15px;
float: left;
width: 200px;
background: #DFDFDF;
}
Code:
div.rightcolumn {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
float: right;
width: 450px;
background: #DFDFDF;
}
The width, padding, AND margin WIDTH must be LESS than the container width, or layout will mess up!
Now the HTML will look like so:
Code:
<div class="container">
<div class="leftcolumn">
<div class="columntitle">This is the left column title</div>
Any text can go here. The more lines u add, the longer this box becomes.
</div>
<div class="rightcolumn">
<div class="columntitle">This is the right column title</div>
Any text can go here. The more lines u add, the longer this box becomes.
</div>
</div>
http://htmlexamples.3owl.com/divtabl...reenshot_5.png
================================================== ======
So Obviously, theres a few things that can be done here.
1. The words "test" are on the edge, which doesnt quite look right. We need to define yet another element to the Stylesheet like so:
Code:
div.block {
padding-left:10px;
background: #AFAFAF;
border: 1px soild #FF0000;
}
And now make ur left and right columns like so:
Code:
<div class="leftcolumn">
<div class="columntitle">This is the left column</div>
<div class="block">
Sample Text<br>
Sample Text<br>
Sample Text<br>
Sample Text<br>
</div>
</div>
<div class="rightcolumn">
<div class="columntitle">This is the right column</div>
<div class="block">
Sample Text<br>
Sample Text<br>
Sample Text<br>
Sample Text<br>
</div>
</div>
After that, your page should look like this now:
http://htmlexamples.3owl.com/divtabl...reenshot_6.png
================================================== =====
So now that both columns are done, we need to make a header, like for a banner or text, or whatever.
First thing we need to do is this:
Code:
div.toppage {
border-bottom: solid 1px #000000;
height: 100px;
}
Then add this to your html right below the container
Code:
<div class="toppage"></div>
So now we have a blank header. Lets add a basic image.
in the div.toppage we just added, we will be adding this element:
background-image:url('http://htmlexamples.3owl.com/divtables/images/banner.png') no-repeat;
so now it will look like this:
Code:
div.toppage {
background-image:url('http://htmlexamples.3owl.com/divtables/images/banner.png');
background-repeat:no-repeat;
border-bottom: solid 1px #000000;
height: 100px;
}
http://htmlexamples.3owl.com/divtabl...reenshot_7.png
================================================== ======
Now, there's no way to navigate to any other page, so lets make a top navigation menu going horizontally under the banner!
First off, we need to define the basic size and everything that the buttons will be contained in. So first, lets make this:
Code:
div.navigation {
border-bottom: solid 1px #000000;
height: 25px;
}
Now, we need to add this:
Code:
<div class="navigation">
</div>
right below this:
Code:
<div class="toppage"></div>
Now you should have this:
http://htmlexamples.3owl.com/divtabl...reenshot_8.png
================================================== =======
Now we just need to add buttons. So now we must make a new CSS element like so:
Code:
div.button {
border-right: solid 1px #000000;
width: 75px;
line-height: 25px;
text-align: center;
float:left;
}
a.button { text-decoration:none; color: #0000FF; }
a.button:hover { text-decoration:none; color: #0000FF; }
a.button:active { text-decoration:none; color: #0000FF; }
And then add this to the HTML:
Code:
<div class="navigation"> <!-- This should already be in the HTML. Just replace it with this -->
<div class="button"><a class="button" href="#">test</a></div>
<div class="button"><a class="button" href="#">test</a></div>
<div class="button"><a class="button" href="#">test</a></div>
<div class="button"><a class="button" href="#">test</a></div>
<div class="button"><a class="button" href="#">test</a></div>
</div>
Now u come out with this:
http://htmlexamples.3owl.com/divtabl...reenshot_9.png
You can see the Live Example here: http://htmlexamples.3owl.com/divtables/