If you would like to migrate your table layout to CSS layout, if you are looking for easy and efficient way to build your website layout the information on this page may be helpful. The short tutorial on this page is inspired by information published on the following websites:http://www.bluerobot.com/web/layouts/, http://glish.com/css/ as well as the simple and beautiful design of http://www.alistapart.com/.
The page we are going to build has two column layout and look like this:
If you are looking for three or four column layout you may find some information on the websites mentioned above.
If you are looking for three or four column layout you may find some information on the websites mentioned above.OK. Let's start building the layout step by step.
1. The first thing is to set wrap layer that will hold the two columns:
<div id="wrap"></div> |
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #000000;
margin: 0px; border: 0px; padding: 0px;
background-color: #A9C1A2;
}
div#wrap {
width: 776px; border: 2px solid #999; background-color: #ddd;
margin-bottom: 10px; margin-top: 10px; margin-left: auto; margin-right: auto;
}
|
2. Now we add two more layers that will hold the page name or banner if we select to have one and the page main navigation bar:
<div id="wrap">
<div id="header"><h1>CSS Layout Example</h1></div>
<div id="header_menu">
<ul id="ul_menu">
<li><a href="/" title="">home</a></li>
...
</ul>
</div>
</div>
|
The second DIV holds an unordered list - the main navigation menu.
We set the items on the list (UL) to appear in horizontal position and add them a border:
ul#ul_menu li {
float: left; display: block;
padding: 0px; margin: 0px; border: 0px;
}
|
#header_menu ul li a {
display: block; width: 173px; height: 1.5em;
padding: 10px; margin: 0px;
border-top: 1px solid #696; border-bottom: 1px solid #696; border-right: 1px solid #696;
background-color: #ccc;
}
#header_menu ul li a:hover { background-color: #FFFFCC; }
|
3. The right column will be 200px wide and we may use it to place additional navigation links, news, etc.:
<!-- html code of the right column -->
<div id="side_bar">
<p>right column</p>
<p>right column</p>
</div>
<!-- end of html code -->
/* right column style */
div#side_bar {
width: 180px; float: right;
margin: 0px; padding: 10px; border: 0px;
}
|
4. The left column will be wider and will hold the main content of the page. We set a left border on this column so that it is more clearly separated from the right column:
<!-- html code of the left column -->
<div id="content">
<p>main column contents</p>
...
</div>
<!-- end of html code -->
/* left column css */
div#content {
width: 550px; border-right: 1px dashed #666;
margin: 0px; padding: 0px; padding: 10px;
}
|
We might as well set footer that holds bottom navigation menu, but that is up to you. You can look at the html code here and also checkthe CSS file. Make some modification yourself. If you have any questions send them to support@jeox.com and we will do our best to help.
What are the advantages of using CSS layout instead of table layout?
1. The HTML is separated from the page style. By changing the CSS file we can easy and fast modify the page looks without modifying the page itself.
2. Visitors using text browsers like lynx will have no problems viewing your page.
3. The HTML code for implementing CSS layout is in most cases considerably shorter than the layout using tables.
Comments
Post a Comment