Guide Web Design Basic with CSS style Layout

In this article, we will guide how to create simple web page with css style layout. I hope this article will be continued with the same theme about how to create web page. In the previous discussion, we have been discuss about how and what is web page and html structure, find more information about this at Basic Learning Web Based Technology and Guidelines and Concept of HTML Tags and Elements.

For example in this discussion, we will design a web page with one column and style layout with css. We recommended to use notepad or others text editor, special with Notepad++, so we will understand with html and css syntax. To view result of the web page, we recommended to use Mozilla Firefox with Firebug plugin. It’s powerful utility for web design.

In this case, we will use transitional DTD to ensure browsers generally render elements correctly. See the following code, we use doctype code like this :

1
2
3

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

We will be designing a web page with one columns and header div, navigation div, content div and footer div. we will not use the table in the layout design, as it’s not standard, also it’s not flexible. We will use the tag “

” with a combination of css selector to design layout. See the following code, like this.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<title>One Column Layout with CSS</title>
 
<style type="text/css">
 
* {
    margin: 0px;
    padding: 0px;
}
 
ul, li {
    list-style: none;
}
 
a {
    text-decoration: none;
    color: white;
}
 
body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-family: Tahoma,Geneva,Helvetica,Arial,sans-serif;
    line-height: 120%;
}
 
div.wrapper {
    margin: 0px  auto;
    padding: 0px;
    width: 780px;
    text-align: left;
    border: 1px solid blue;
}
 
div.header {
    height: 100px;
    width: 100%;
    padding: 20px;
}
 
div.nav {
    height: 20px;
    width: 100%;
    background-color: navy;
    color: white;
}
 
div.nav li {
    display: inline;  
    font-size: 90%;
    font-weight: bold;
    margin: 0px 10px;
}
 
div.content {
    height: 200px;
    width: 100%;
    text-align: justify;
    font-size: 90%;
}
 
div.content p {
    padding: 10px;
}
 
div.footer {
    height: 20px;
    width: 100%;
    background-color: yellow;
    color: blue;
    font-size: 80%;
}
 
</style>
 
</head>
<body>
 
    <div class="wrapper">
          <div class="header">
                <h1>Sample Header</h1>     
          </div>
          <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                </ul>
          </div>
          <div class="content">
                <p>
                    If we want to build an enterprise web application services, 
                    we should not only focus on the features but the most important is to create 
                    the availability and security of the web application services. 
                    We also must focus to make good overall web services security. 
                    Many people focus only on the security mechanisms to make 
                    web application more secure. Security mechanisms are only valuable 
                    if they are part of an overall security fabric that provides 
                    the level of protection both desired and thought to be in place. 
                    It´s important that an enterprise´s security policy be comprehensive and thorough. 
                    So, It´s developing good policies more important that must 
                    provide for enterprise´s security strategy.
                </p>
          </div>
          <div class="footer">
                &copy;2009. Widya Tehnika
          </div>
    </div>
 
 
</body>
</html>

Save this document in the xxx.html and show this file with Mozilla Firefox, result of this design like this picture bellow.

web-page-basic