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

0

Blueprint CSS Framework
March 19th, 2008

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

I am not usually one who would work within a CSS framework, but I’ve got to hand it to the group of guys that put together Blueprint.  This is a CSS framework geared towards cutting your CSS development time.  With Blueprint you get a solid CSS foundation to build your project on with an easy-to-use grid, typography and even a stylesheet for printing.

With no lack of web-celeb on the project (Jeff Croft, Nathan Borror, Christian Metts, Eric Meyer), Blueprint CSS Framework looks like a great addition.

See a sample website built with Blueprint
See a demo of the grid
See a demo of the typography
Take a look at the quick tutorial

Features:

  • An easily customizable grid
  • Sensible typography
  • Relative font-sizes everywhere
  • A typographic baseline
  • An extendable plugin system
  • Perfected CSS reset
  • A stylesheet for printing
  • Powerful scripts for customizing your layout
  • No bloat of any kind

blueprintcss - Google Code

Tags: , ,

Posted in CSS
0

CSS Based Navigation Menus: Modern Solutions
March 15th, 2007

Smashing Magazine has become one of my favorite stopping points on the web to find quick and great information as a web designer. Today’s venture served no different as I was greeted with a great list of modern solutions for CSS Based Navigation Menus.

Navigation is one of the, if not the, most important elements in web design. Your navigation is used more often than any other portion of the site. Not to mention that the entry to the other pages on your site mostly relies on the ease of use of your navigation menu(s).

So how do other designers and websites attack the task of creating a navigation area that is both attractive and usable?

Well, Smashing Magazine has put together another great list. This time you’ll find 53 beautiful and user-friendly navigation menus that are using basic CSS styling (of course some can expect a little Javascript thrown in for cross-browser… ahem IE… support).

One important note to mention is that unfortunately all of the 53 menus are not purely CSS. Some are DHTML and Javascript based menus that were included by mistake.

modern css based navigation menus
Posted in CSS, Design Tips
0

Fixed CSS Centered Layout Tutorial
February 27th, 2007

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
« Previous Entries