A little about Vernon...

Hey there everybody, I’m Vernon. I’ve been a full-time freelance web designer since 2002 and can honestly say it’s been a great journey.

If you’re interested, take a look at my services site and let me help you with your project.

You are currently browsing the archives of the Tutorials category.

0

Fixed CSS Centered Layout Tutorial
February 27th, 2007

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Recently in my stat logs I've been getting a lot of visitors coming from a search for "CSS Fixed Layout". Generally they've been hitting this post where I wrote about ___layouts. So I decided to take the time to put together a simple fixed CSS layout tutorial for those finding the site looking for it.

First, we'll start with the layout of the divs for the layout. For this example, I've chosen to take a standard type layout with a header, two columns and ending with a footer. The layout will be centered on the screen and the columns will have the appearance of being the same height.

PLAIN TEXT
HTML:
  1. <div id="main_cont">
  2.     <div id="page_head">
  3.         <h1>This is our site heading!</h1>
  4.     </div>
  5.     <div id="side_col">
  6.    
  7.     </div>
  8.     <div id="main_col">
  9.    
  10.     </div>
  11.     <div id="page_foot"></div>
  12. </div>

So there's our easy and simple layout. Because this is to show you how to do a fixed width CSS layout, we'll set the width at 770px. Let's get the CSS now...

PLAIN TEXT
CSS:
  1. body {
  2.     margin: 0 0 25px;
  3.     padding: 0;
  4.     background: #333;
  5.     text-align: center; /* centers for IE */
  6. }
  7. #main_cont {
  8.     margin: 0 auto; /* centers for Firefox and others */
  9.     width: 770px; /* sets width of main container */
  10.     background: #fff;
  11.     background-image: url(bg-grey.gif);
  12.     background-attachment: scroll;
  13.     background-position: left;
  14.     background-repeat: repeat-y; /* these are for the illusion of equal height columns */
  15. }
  16. #page_head {
  17.     background: #777;
  18.     color: #fff;
  19.     height: 100px;
  20.     padding-top: 10px;
  21.     text-align: center;
  22. }
  23. #side_col, #main_col {
  24.     float: left; /* this places the side_col on the left of the page to place it on the right just change float: left to float: right */
  25. }
  26. #side_col {
  27.     width: 180px;
  28. }
  29. #main_col {
  30.     width: 570px;
  31.     padding: 10px;
  32. }
  33. #page_foot {
  34.     background: #777;
  35.     height: 15px;
  36.     clear: both;
  37.     display: block;
  38. }

Now, for the extended columns you'll notice I used a background image in the main container image to create the illusion of equal height columns. This is only one solution to equal height columns using CSS.

Take a look at our example in action!

Please keep in mind that this example is not about the way it looks but to give you an easy example of how to achieve a fixed CSS centered layout.

Posted in CSS, Development Tips, Tutorials
1

Showing the Current Date on your site with PHP
February 6th, 2007

A lot of websites show the current date somewhere on the site whether it be in the header or sidebar area. Over on WebReference.com there is a long article about using Javascript to do this.

Granted, if you are trying to learn Javascript this is probably a good article to read. Yet, if you simply want to display the current date on your website PHP is the way to go.

Their are a couple of strengths of using PHP to display the current date. First, you don't have to worry whether your visitors have Javascript turned on or off. Second, you can accomplish in one line of code what takes a good bit of Javascript to do.

Below are quite a few different ways to display the current date using PHP:

Example: February 6, 2007

< ?php echo date('F j, Y'); ?>

Example: Feb. 6th

< ?php echo date('M. jS'); ?>

Example: 06-02-2007 (d-m-y)

< ?php echo date('d-m-y'); ?>

There are many ways to use PHP to display the current date, and they are all simple as pie. Take a look at the PHP website to see all of the different ways that you can display the date using PHP.

Posted in PHP - MySQL, Tutorials
0

Some Great Illustrator Tutorials
January 31st, 2007

NDesign Studio has a great post that covers some great Illustrator Tutorials.

These step-by-step Illustrator tutorials include the original source file for download. The tutorials go through a great range of skills and is perfect for users who are new or are just looking to brush up on their Illustrator skills.

Here’s a list of just a few of the Illustrator tutorials covered:

  • 3D Logo - Learn how you can quickly create a 3d logo with Illustrator CS2.
  • Envelope Distort - Make a trendy fashion ad with Illustrator Envelope Distort tool.
  • Abstract Background - Learn how to make a hi-tech style abstract background.
  • Tracing Photos - Full detailed tutorial on how to trace from a photo.
  • Graphs - Learn how to create 3D graphs at ease.
  • Comic Style Strokes - Create comic style strokes with Illustrator Art Brush.
  • Illustrator Template - Read this tutorial if you use Adobe Illustrator a lot.

Posted in Design Tips, Tutorials
« Previous Entries
Next Entries »