How to Layout a Website 3

How to layout a Website 3In 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>

18 Responses to “How to Layout a Website 3”

  1. amro says:

    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

    • admin says:

      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 🙂

  2. amro says:

    Hi again,

    Thank you so much, and i’m looking forward.

  3. Lucas says:

    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!

    • admin says:

      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

  4. Lucas says:

    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?

    • admin says:

      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

  5. Jack says:

    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

  6. 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

  7. 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

  8. 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

  9. 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

  10. Hi Derek

    Sorry about the past too much code from tutorial How to layout an website

    Thanks

    D Calder

    • Derek Banas says:

      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.

Leave a Reply

Your email address will not be published.

Google+