How to Layout a Website 2

How to Layout a Website 2In the last video / article How to Layout a Website, I showed you how to set up the header, import Google Web Fonts and the basics of CSS.

In the tutorial, I’ll show you how to make pretty complicated layouts. I show you how to overlay divs and how to make adjustments with CSS until everything looks perfect.

If you need to brush up on HTML or CSS here are video tutorials on those subjects.

Like always the code follows the video. Use it however you’d like. If you missed part 1 of this tutorial, definitely watch it first here How to Layout a Website.

If you liked this video, share it with others

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;
		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;
	}
	
	
	
	
	</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 -->
	
	</div> <!-- End of contentWrapper -->
	
	</div> <!-- End of pageWrapper -->

</body>
</html>

function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

div#menu{
background-color: #471F37;
position: relative;
z-index: 200;
}

table.navbar
{font: bold 16px/.5 'PT Sans Narrow', sans-serif;
text-shadow: #000000 1px 1px 1px;
margin: 0px;
padding: 0px; 
}

table.menu
{font-size: 10pt;
margin: 0px;
padding: 0px;
}

td.menuNormal
{padding: 0px 0px 0px 5px;
width: 160px;
color: white;
vertical-align: top; /* Sets the vertical alignment to the top of the div */
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+ */ 
border-right:1px solid #5f2c4b;
border-left: 1px solid #471F37;
}

td.menuHover
{padding: 0px 0px 0px 5px;
width: 160px;
color: #0bd4ff;
vertical-align: top;
/*remove the following lines for drop-down menu with images*/
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+ */ 
border-right:1px solid #5f2c4b;
border-left: 1px solid #471F37;
}

div.menuNormal
{display: none; /* States that this div should not display */
font: 12px/1.5 tahoma, sans-serif;
position: static; /* Tells the element to just flow with everything else */
}

div.menuHover
{
font: 14px/1.5 tahoma, sans-serif;
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+ */ 
display: inline; /* Tells the div to generate an inline box with no line break*/
position: absolute; /* Positions the element relative to the parent */
}

a.menuitem:link
{text-decoration: none;
color: white;
padding: 2.5px;
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+ */ 
text-shadow: #000000 1px 1px 1px;
display: block;
} /* Display a line break before and after the box */

a.menuitem:visited
{text-decoration: none;
color: white;
padding: 2.5px;
background: #471F37;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5f2c4b', endColorstr='#000f2e'); /* for IE */
background-image: -webkit-gradient(linear, left top, left bottom, from(#5f2c4b), to(#000f2e)); /* for webkit browsers */
background-image: -moz-linear-gradient(top,  #5f2c4b,  #471F37); /* for firefox 3.6+ */ 
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

a.menuitem:hover
{text-decoration: none;
color: #0bd4ff;
padding: 2.5px;
background: #471F37;
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

a.menuitem:active
{text-decoration: none;
color: #D8AFBE;
padding: 2.5px;
background: #5f2c4b;
border-bottom: 1px solid #5f2c4b;
border-top: 1px solid #471F37;
display: block;} /* Display a line break before and after the box */

Till Next Time

Think Tank

17 Responses to “How to Layout a Website 2”

  1. Kaustubh says:

    Awesome resource!
    Keep it up!

    How about a tutorial on designing sites using Liquid Layout Techniques?

  2. Aparna says:

    I am so impressed with your tutorials and I wonder how do you organize your day….how did you write some many article, made videos and as I see you also have a baby too. I am really motivated and feel, wish I could do at least 50% of what you have done in 1.5 years. Are of Marissa Mayer type who sleeps for just 4 hours and get going ? If there is really a secret on making the day so much productive can you please upload a video of the same….thx a lot again.

    • admin says:

      Thank you 🙂 I figured out early on that I processed information differently from most people. I’d sit in class for an entire day and not remember anything.

      Because I grew up rather poor, we didn’t have a television and I read for entertainment. By accident I taught myself how to speed read. Because I’d get bored, I would quickly scan through pages with my finger as I read. This is the basis behind how people speed read. I talk more about it here along with other ways I learned to study Study Methods.

      Another reason why I produce so much information, is because my personality is inclined to complete projects. That is why my early articles often have typos. I set a goal of writing an article or making a video every day. I literally beat myself up if I skipped more than 2 days without creating something. As you may have seen, my early articles were also very long. So, by not forcing myself to be perfect (grammar wise) I was able to generate a great deal of information.

      I would often speed read a book and then sit down and write an article based on what seemed most important. I’m almost positive I have attention deficit disorder, but because I was never treated with drugs I instead figured out how to live with it.

      I sleep, but like you said I rarely sleep more than 5 hours. I’m also very intense in person. I’ve never met anyone in the real world that first met me through my blog, but I’d guess they wouldn’t expect me to act the way I do.

      Well there is some random info on myself. Feel free to ask more questions. I do my best to answer all of them. – Derek

  3. Matt Dunton says:

    Hi, very inspiring. Excellent website. Really enjoying following your lessons. Thanks for your shared wisdom!

  4. I was searching of similar tutorials for start building my wordpress website. Thanks for wordpress videos which will help me in creating my own theme as I am new to wordpress i have to learn a lot

    Thanks again

  5. rog says:

    Just want to say ,Thanks and keep going.

  6. Phil Fanasia says:

    Sir
    I am a very big fan of you, and it’s amazing how you do all those tutorials and explain everything so clear, oh and your tone of voice is so good to my ears and makes me even more concentrated while learning from your tutorials.
    I am an IT student from the Solomon Islands but currently in chile, and I am currently working a website and with help from your tutorials I can manage to learn so many things for my project.

    I would like to say thank you so much.
    God Bless

    Phil Fanasia

    • Derek Banas says:

      Hi Phil, Thank you very much for the kind message 🙂 I greatly appreciate it! It is very gratifying to hear that I’m helping people all over the world.

      I plan on making videos for a very long time. I’m glad they are helping you. May God bless you and your loved ones as well.

      Derek

  7. Anjaneya says:

    Hello Derek,

    I want to Thank you for all that you do to enlighten the human race. I will also I to Thank your wife for allowing us to share the family’s time. My God bless you and yours. What a BIG heart you have. I see that you have FOUND your purpose in life. It’s great to see someone living out their purpose.

    So, here’s my question to you…I would like to put together a 4 to 6 page E-commerce website, with a blog post without using 3rd party software. I was wondering which set of tutorials of yours will help me along. And, if for some reason(s) I can’t finish by June ’14, what are your rates? By the way you can send your rates to my email address.

    Again, Thank you for everything….

    Anjaneya

    • Derek Banas says:

      Hi Anjaneya,

      Thank you for the very kind compliments and may God bless you and your loved ones.

      I made a tutorial on how to set up a secure shopping cart using free software here. This is what I use and there is pretty much no chance of anything being insecure because PayPal handles everything.

      To make something in which you except credit card numbers directly is very complex. Every time you hear about a security flaw, chances are that people who tried to use their own software shopping cart just lost a bunch of credit cards. There are always security holes. That is why I use PayPal, because if something goes wrong they are to blame.

      I plan on making a tutorial on the Zend framework some time soon. I have used it every time I needed to handle secure data.

      Thank you very much for the offer of work, but I just made this site to help people. I don’t solicit for business here. I’m very lucky to have more work then I can handle.

      Thank you for taking the time to say hi and the nice compliments 🙂
      Derek

Leave a Reply

Your email address will not be published.

Google+