How to Layout a Website 3
In the previous tutorials How to layout a website Part 1 and Part 2 I created a website template from scratch. Here I continue that process.
As you see making a website is a process of placing each individual part of the page in a box (DIV) and then moving this boxes into the correct position.
I hope is that through repetition you will be able to recreate any design. It really isn’t that hard to make custom website templates. It just takes some practice.
All of the code from the video follows the video.
If you like these types of tutorials spread the word
Code From the Video
If you want the menu bar code look on How to Layout a Website.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link rel="StyleSheet" href="./includes/menu.css" />
<script type="text/javascript" src="./includes/menu.js"></script>
<style type="text/css">
#pageWrapper {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
width: 1000px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
border: 5px solid black;
}
#header {
height: 127px;
width: 1000px;
}
#logo {
position: relative;
left: 15px;
}
#blogSlogan {
position: relative;
width: 240px;
left: 715px;
top: -124px;
}
#searchBox {
position: relative;
left: 740px;
top: -80px;
width: 230px;
}
#contentWrapper {
background-color: #471F37;
float: left;
}
#leftSidebar {
float: left;
}
.leftContainer {
background-color: #fff;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
width: 177px;
height: 271px;
padding: 2px;
}
.bannerTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 96px;
height: 26px;
text-align: right;
padding-right: 6px;
position: relative;
left: 78px;
top: -21px;
}
#cindy {
float: left;
padding-right: 4px;
padding-bottom: 4px;
padding-top: 5px;
padding-left: 2px;
}
.sidebarExcerpt {
position: relative;
left 0px;
top: -62px;
color: #244f4f;
font-size: 10pt;
}
.featured {
background-color: #fff;
border: 3px solid #000;
margin: 10px;
margin-right: 3px;
width: 177px;
height: 350px;
padding: 2px;
}
.eachArticle {
position: relative;
top: -18px;
}
.articleExcerpt {
color: #244f4f;
font-size: 10pt;
position: relative;
top: -10px;
}
.horzRule {
background-color: #471f37;
height: 2px;
width: 170px;
margin-left: 3px;
position: relative;
top: -10px;
}
.middleColumn {
width: 260px;
margin-right: 20px;
float: left;
}
.middleContainer {
background-color: #FFF;
border: 3px solid #000;
margin: 10px;
width: 264px;
height: 270px;
padding: 2px;
}
.middleTitle {
font: 14px/1.4 'PT Sans Narrow', sans-serif;
background-color: #471F37;
color: #FFF;
width: 188px;
height: 26px;
text-align: right;
padding-right: 7px;
position: relative;
left: 72px;
top: -20px;
z-index: 20;
}
.featuredImage {
position: relative;
left: 1px;
top: -45px;
}
.middleArtTitle {
position: relative;
top: -45px;
padding-left: 4px;
}
.middleArtDate {
position: relative;
top: -45px;
padding-left: 4px;
}
.horzMidRule {
background-color: #471f37;
height: 2px;
width: 256px;
margin-left: 3px;
position: relative;
top: -45px;
}
.middleExcerpt {
color: #244f4f;
font-size: 10pt;
margin-left: 3px;
position: relative;
top: -50px;
}
</style>
<title>HTML Layout</title>
</head>
<body>
<div id="pageWrapper">
<div id="header">
<img src="./images/logo2.png" alt="Social Voice Logo" width="167px" height="109px" id="logo" />
<h1 id="blogTitle"></h1>
<p id="blogSlogan">Your Source for Mobile/Social Media Marketing</p>
<div id="searchBox"><input type="text" name="search" size="25" /><input type="submit" value="SEARCH" /></div>
</div> <!-- End of header -->
<div id="menu">
<!-- This dropdown menu is created by using a table named "navbar". It has a default width of 1000 pixels -->
<table class="navbar" width="1000">
<tr>
<!-- We are creating the first column in the table and assigning the css attributes assigned to "menuNormal". We are defining the width to be 160 pixels. We will trigger javascript functions on both the onmouseover and onmouseout events. -->
<td class="menuNormal" onmouseover="expand(this);"
onmouseout="collapse(this);">
<!-- This is the menu item name that will appear at the top of the screen -->
<p>Menu 1</p>
<!-- Each drop-down menu is contained within a DIV element nested within each top-level TD element. There is a table nested inside of each of those div's. When a onmouseover event is triggered the div's attribute display is switched from none to inline, which allows a visitor to see the div on screen.-->
<div class="menuNormal" >
<table class="menu" >
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 1</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 4</a>
</td></tr>
</table>
</div>
</td>
<td class="menuNormal" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p>Menu 2</p>
<div class="menuNormal" >
<table class="menu" >
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 1</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 4</a>
</td></tr>
</table>
</div>
</td>
<td class="menuNormal" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p>Menu 3</p>
<div class="menuNormal" >
<table class="menu" >
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 1</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 4</a>
</td></tr>
</table>
</div>
</td>
<td class="menuNormal" onmouseover="expand(this);"
onmouseout="collapse(this);">
<p>Menu 4</p>
<div class="menuNormal" >
<table class="menu" >
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 1</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 2</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 3</a>
</td></tr>
<tr><td class="menuNormal">
<a href="page.htm" class="menuitem">Item 4</a>
</td></tr>
</table>
</div>
</td>
</tr>
</table>
</div> <!-- End of menu -->
<div id="contentWrapper">
<div id="leftSidebar">
<div class="leftContainer">
<div class="bannerTitle"><h4>WHO WE ARE</h4></div>
<p class="sidebarExcerpt"><img src="./images/cindy.png" alt="Cindy" width="73px" height="73px" id="cindy" /><br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</div> <!-- End of leftContainer -->
<!-- FIRST FEATURED SIDEBAR VIDEOS -->
<div class="featured">
<div class="bannerTitle"><h4>VIDEOS</h4></div>
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of eachArticle -->
</div> <!-- End of featured -->
<!-- SECOND FEATURED SIDEBAR ARTICLES -->
<div class="featured">
<div class="bannerTitle"><h4>ARTICLES</h4></div>
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
<div class="horzRule"></div>
</div> <!-- End of eachArticle -->
<div class="eachArticle">
<div class="articleTitle"><b>FACEBOOK MARKETING</b></div>
<p class="articleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of eachArticle -->
</div> <!-- End of featured -->
</div> <!-- End of leftSidebar -->
<!-- BEGINNING OF MIDDLE BAR 1 -->
<div class="middleColumn">
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
</div> <!-- End of middleColumn -->
<!-- BEGINNING OF SECOND MIDDLE COLUMN -->
<div class="middleColumn">
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
<div class="middleContainer">
<div class="middleTitle"><h4>ARTICLE</h4></div>
<img src="./images/featuredImage.png" alt="Featured Image" width="260px" height="142px" class="featuredImage" />
<div class="middleArtTitle"><b>FACEBOOK MARKETING</b></div>
<div class="middleArtDate"><b>SEPT 8, 2011</b></div>
<div class="horzMidRule"></div>
<p class="middleExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex <a href="#" class="clickForMore">More</a></p>
</div> <!-- End of middleContainer -->
</div> <!-- End of middleColumn -->
</div> <!-- End of contentWrapper -->
</div> <!-- End of pageWrapper -->
</body>
</html>
Hi,
i’m following you a while ,but new i have one qustion or say one favor .
i want know how i can make wordpress shopping cart with wp ecommerce plugin and how i can design it .
i hope to get from you positive answer .
thank you anyway
Amro Eldewiny
I’ll be making 2 shopping carts in WordPress. They will be available as soon as I get them finished and tested. Thanks for taking the time to say HI 🙂
Hi again,
Thank you so much, and i’m looking forward.
You’re very welcome
Hi Derek,
Why did you give .middleTitle such a high z-index? I gave it 1 and it was enough…
Is it some kind of a trick?
Have a nice day!
I just do that to guarantee that it shows up on top. A 1 z-index will work in almost all situations. Sorry about the confusion
Does this z-index problem depend on the browser?
Anyway, I like the series because it explains how to put different elements together. You can learn about html/xhtml etc. but the question is – can you put your theoretical skills into action? Your tutorials explain a lot here.
However, manipulation of the DOM and divs is a complicated thing, I believe.
BTW, will you make a tutorial about html5?
No the Z-index is the same for every browser. I’m very happy that you enjoy the videos. Thanks for that. I also cover numerous real world tools you can build in other tutorials on my site and youtube. Sometimes it is easier to see them all on my 404 page. I hope that helps
Hi,
i’ve done everything exactly the same as you but my middle column is showing up underneath the left sidebar. The code is exactly the same.
Any suggestions?
~jack
There is probably a missing tag some place. Did you copy and paste my code?
Hi Derek
I am on the Third tutorial I am trying to get the second middle column to work the problem is that it goes on the end of the first middle column instead of having three columns I have have two instead of three
I have tried to find out where I need to cut and past the code for Second middle column. I am still trying to find out what I have to do this right.
Thanks
D Calder
Hi Derek
I have completed tutorials 1 and 2 I am trying to complete lesson three
the cut and past thing is still bug-gin me the drop down and menu things are fine but is at the end of tutorial 3 where you add the second middle side bare or Second middle column. I am have trouble with. I have check the code for error message every is ok. I gone throw tutorials One and two and I have check the code under below video tutorials. I have the sidebar and the first middle column. is adding the second middle column when I try it goes the the end of the first middle column.
Thanks
D Calder
Hi Derick, I’m sorry that you are struggling with it. Try comparing your files to mine using DiffNow. I’m sure it is a little typo. I wish you the best 🙂
Hi Derek
I have decided to do every thing again. Tutorials 1 2 and 3 to find out what I did or didn’t do to get the Second middle bar.
Thanks
D Calder
PS Great tutorials
Thanks
D Calder
Hi Derek
I have completed 1 and 2 I am now going to do tutorial 3.
I am learning a lot from the tutorials. And I must say these are the best tutorials I have seen and I will continue to follow the tutorials.
Thanks again.
D Calder
Hi Derick,
I’m very happy that you are enjoying them. I’m not very popular so it is always nice to hear that I’m helping 🙂
Hi Derek
Sorry about the past too much code from tutorial How to layout an website
Thanks
D Calder
It is better to upload the code to the internet. I have a tool I use to find errors in CSS, but the code must be online. Send me the URL and I’ll take a look.