This is a post detailing how to setup a HTML page layout using HTML and CSS
We already have our page size picked, set, and our background implemented. Now it is time to layout how the rest of our page is going to look. In this tutorial we will have a page header, a navigation bar under this, and our content displayed beneath with custom text boxes. We are going to add 3 divisions these being: header, navbar, and content. The custom text boxes will be declared and implemented in a later post.
You can see how we nest these three created divisions inside our page container division. The page container wrapper holds everything together. Also the divisions stack on top of each other as we reference them in the HTML. When we set the header width to 100%, but then nest it in the page container the header then takes up 100% of the page container, same with the navigation bar.
The CSSbody { text-align: center; background-image:url(‘images/bg.jpg’); } #pagecontainer { width: 960px; height: auto; background: #FFFFFF; margin-left: auto; margin-right: auto; border-style: solid; border-width: 2px; text-align: center; } #header { width: 100%; } #content { width: 100%; text-align: center; } #navbar { height: 20px; background: #660E16; border-top-style:solid; border-bottom-style:solid; border-top-width:5px; border-bottom-width:5px; border-left-style: solid; border-left-width: 2px; border-right-style: solid; border-right-width: 2px; } |
The HTML<html> <head> <title>My Website</title> <LINK REL=StyleSheet HREF=”site.css” TYPE=”text/css”> </head> <body> <div id=”pagecontainer”> <div id=”header”> </div> <div id=”navbar”> </div> <div id=”content”> <p> Some filler text here, so that we are able to see how our wrapper height extends to the height of our content. </p> </div> </div> </body> </html> The Result
|
[...] Creating the layout [...]