This is the final part of the website build-up series I started, In this tutorial we will be styling the main content part of the page and the footer. By the end of this tutorial you will have a complete web page totally hand coded by you and totally understood by you for future maintenance and hopefully better understanding of XHTML & CSS.
Date: April 25, 2009
DEMO!
So as you’ve seen what we are going to end up with. Let’s start working for it.
Inside the content division start by adding a H2 heading and type any heading between the tags. Add a few paragraphs and at-least two images, give one of them a class of rightimg and the other one leftimg. You can add more images but make sure you give them any one of the two class I just mentioned.
<div id="content"> <h2>This is a heading:</h2> <img src="./images/leftimg.png" alt="Title of the image" class="leftimg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <img src="./images/rightimg.png" alt="Title of the image" class="rightimg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div><!-- end content -->
As we are adding content to the division I would like to share an amazing service I always use. It’s a Chris Coyier project called HTML-Ipsum. This is special: as clicking on any heading will copy the respective mark-up onto your clipboard. For example, if you want to add a couple of paras to the page, instead of finding the lorem ipsum routine online, go to HTML-Ipsum and click on Medium Paragraph come back to your source code and start pasting it. Trust me in the long run it will really make your life easier.
After we’ve added content to the content division, after the closing tags of content division and content-container division, right before closing tag of the container division(the main website container) add this code:
<div id="footer"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> <span id="copy">© Copyrights 2009</span> </div><!-- end footer -->
If we view the page in the browser, we can see the non styled part of the page.
The CSS code below should be added to the master CSS file. Due to some rendering issues on the page there were few minor tweaks(mostly width and border) I had to do in the master CSS file. Although I have notified most of the issues in the CSS file as comments, I would tell you a method to check the differences between your code and the downloadable source code available below. Google a software called WinMerge or goto: winmerge.org (for MAC users the software is: MELD). These softwares let you find differences between two text files. Just compare your master.css with my downloaded master.css and it will highlight all the differences for you. Me being a Windows User have experience with WinMerge and it’s awesome. As of MELD is supposed to be the MAC alternative for WinMerge and hopefully it will be good. Although I would like to know about it through the comments.
As of my CSS code, it is filled with explanatory comments and is pretty easy to understand.
RSS
/* Inside Content */
/*
I have changed the width of the content division we made in the last tutorial by 2 pixels as I have added 1 pixel left and right borders to it.
*/
#content{
overflow:hidden;/* as we will be floating elements inside this (mostly images)*/
/*you can and you should insert this property with the content division properties above I have placed it here to let you know that I have added this now*/
}
#content img{
background: #fff;
padding:5px;/*so the white background is visible*/
border:1px solid #000;
}
#content p{
margin-bottom:10px;
line-height:130%;/*to increase the vertical spacing between lines*/
}
#content h2{
font-size:25px;
font-weight:bold;
color:#263f5d;
font-family:Times, Times New Roman, Georgia, serif;
padding-bottom:5px;/*to make space between the border and text*/
border-bottom:2px dotted #263f5d;
margin-bottom:10px;
}
img.leftimg{/*a class for floating images left*/
float:left;
margin-right:5px;
}
img.rightimg{/*a class for floating images right*/
float:right;
margin-left:5px;
}
#footer{
width:958px;/*as there are left and right borders of 1px each which makes it 960*/
border:1px solid #444;
border-bottom:none;/*to remove the border-bottom*/
background:gray url('../images/footer-bg.png') repeat-x;/*just made a 1px wide and 80px long gradient image and repeated the background on the x-axis*/
height:80px;
line-height:80px;/*to vertically center the inline elements inside it*/
clear:left;/*for clearing the float of sidebar and content. had to insert it as the page wasn't rendering properly*/
/*for some reason our overflow hidden isn't clearing this float. Therefore the clear: left;*/
overflow:hidden;/*for clearing floats inside it*/
}
#footer ul{
width:50%;
float:left;
margin-left:10px;
}
#footer ul li{
display:inline;
margin-right:30px;
}
#footer ul li a{
color:#fff;
text-decoration:none;/*to remove the underline*/
}
#copy{
color:#fff;
float:right;
width:auto;
margin-right:10px;
}
If there are any queries please notify me in the comments and I will try my level best to help you with the code. You can also suggest tutorials you want in the comments. Also, please subscribe to my RSS feed, it will help me reach you much faster.
Thanks for reading!
Download the Source Code
No Comments Yet! Be the first to comment.
Comments currently closed.
When hundreds of web sites are designed up every other day, your website need to have something special to attract your potential customers.
Design magazines have always been a great source of inspiration for designers. It brings latest trends and new ideas into the mind of designers.
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which really produces cool effects. In todays time, java script is a must have component.
Invoicera has recently unveiled the release of their new fully blown web application with tons of powerful features to further simplify the management of bills and invoices. The new version is a complete makeover and you may probably even fail to recognize it.
After literally years of speculation, Apple’s tablet is here and it’s called the iPad. iPad runs almost 140,000 apps from the App Store. It’s also a useful tool for designers, illustrators and digital artists looking to get creative on the move.
Again it’s time for photoshop tutorials. The tutorials are good as an inspiration for creative ideas. You have to learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork.
Choosing a CMS for your project depends upon the requirement and complexity of the project.
The iPhone is more than just a phone. It combines three devices in one: a revolutionary phone, a wide screen iPod and a groundbreaking Internet device.
CSS definitely provides you the ease of changing the appearance of your entire website by just modifying a single file. What makes the entire process of changing the CSS files more easy is the use of CSS Editors.BestDesignTuts.com has brought to you 14 such CSS Editors which will cut half of the work load of every designer.
404! Error Pages once used to be seen as the most unwanted page that any visitor would like to see, and therefore the designers did not give the required piece of attention to it.
