How to Layout a Website 4

How to Layout a WebsiteHere I finish off the website I started creating in part 1 of How to Layout a Website.

I finish up the right sidebar and the footer. Then I move on to clean up any loose ends that exist.

I’ve made this whole website out of my head using just a photograph as a reference so that you can see how a designer thinks. Maybe more importantly you get a chance to see what mistakes I make and how to easily correct those mistakes.

All of the code follows the video. If you want the code for the menu bar refer to part 1 of this tutorial How to Layout a Website Pt 1.

In the next video I’ll finish styling each individual page. Then I’ll turn the whole site into a WordPress Theme. I’ve already done a lot with WordPress Themes here WordPress How To.

If you find this video useful share it with the world

.

Code From the Video

<!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;
	}
	
	#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;
		width: 1000px;
	}
	
	#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;
		margin-left: 15px;
		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;
	}
	
	#rightSidebar {
		float: left;
		margin-left: 12px;
		margin-right: 0px;
	}
	
	.rightContainer {
		background-color: #FFF;
		border: 3px solid #000;
		margin: 10px;
		margin-right: 0px;
		width: 177px;
		height: 269px;
		padding: 2px;
	}
	
	#eBookForm {
		position: relative;
		top: -30px;
		left: 2px;
	}
	
	.eBookExcerpt {
		position: relative;
		left: 2px;
		top: -30px;
		color: #244f4f;
		font-size: 10pt;
	}
	
	.socialIcons {
		width: 177px;
		margin-left: 15px;
		padding: 2px;
	}
	
	.affiliateContainer {
		background-color: #fff;
		border: 3px solid #000;
		margin-right: 0px;
		margin-left: 10px;
		margin-bottom: 20px;
		width: 177px;
		height: 150px;
		padding: 2px;
	}
	
	#footer {
		background: #471F37;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#471F37'); /* for IE */
		background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#471F37)); /* for webkit browsers */
		background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
		float: left;
		width: 1000px;
		height: 100px;
		text-align: center;
		color: #fff;
		
	}
	
	
	</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 -->
		
		<!-- BEGINNING OF RIGHTSIDEBAR -->
		
		<div id="rightSidebar">
		
		<div class="rightContainer">
		
			<div class="bannerTitle"><h4>FREE EBOOK</h4></div>
			
			<p id="eBookForm">
				<b>EMAIL</b><br />
				<input type="text" name="email" size="20" /><br />
				<b>NAME</b><br />
				<input type="text" name="name" size="20" /><br />
				<input type="submit" value="Submit" />
			</p>
			
			<p class="eBookExcerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
		
		</div> <!-- End of rightContainer -->
		
		<div class="socialIcons">
		
			<img src="./images/RSS_logo.png" alt="RSS Feed" width="40px" height="40px" class="socialNetwork" />
		
			<img src="./images/facebook_logo.png" alt="Facebook" width="40px" height="40px" class="socialNetwork" />
			
			<img src="./images/twitter_logo.png" alt="Twitter" width="40px" height="40px" class="socialNetwork" />
			
			<img src="./images/linkedin_logo.png" alt="Linkedin" width="40px" height="40px" class="socialNetwork" />
			
		
		</div> <!-- End of socialIcons -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		<div class="affiliateContainer"> 
		
			<div class="bannerTitle"><h4>AFFILIATES</h4></div>
		
		</div><!-- End of affiliateContainer -->
		
		
		</div> <!-- End of rightSidebar -->
		
	
	</div> <!-- End of contentWrapper -->
	
	<div id="footer">
		
		&copy; 2011 My Theme
		
	</div>
	
	</div> <!-- End of pageWrapper -->

</body>
</html>

4 Responses to “How to Layout a Website 4”

  1. Carla says:

    Hello! I just created my footer and another div where I am having a frustrating issue with both. I type in text and using CSS I centered the Text. However in both Divs the the text does not span the entire div. It is almost like it thinks the div is smaller than it really is. Can you help me? I have not encountered this before 🙁 here is a photo of what i mean: http://amplifyfinancial.com/images/footerdiv.jpg

    SOS! Eek!

    -Carla

    • admin says:

      I think this is what you are looking for? It was taken from your site

      #footer .footer-holder {
      width:100%;
      overflow:hidden;
      padding:55px 0 25px 6px;
      }

Leave a Reply

Your email address will not be published.

Google+