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

CSS Tab Menu
February 20th, 2007

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

Koller Jürgen has given out a free download to easily create a CSS Tab Menu. (Take a look at the example image below)

You can set whether the tabs change on click or mouseover. The one thing I don’t like is that everything is in one file. I would personally put the CSS in an file and the javascript in a file. Of course Koller notes that you can do this as well.

There’s a lot of ways to achieve this type of menu, but this solution is a good one. Go give it a look.

css tab menu

1

Christos Constandinou has taken YUI Grids and made ___layouts which is a simple CSS layout builder. It is quite easy to use and does work with fixed-width layouts. I do like the ‘tidy’ and ‘untidy’ features that give you the easy ability of having equal height columns or not.

The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom” style scaling effect and two core templates which give you the ability to nest subdivided regions of one to four columns.

  • Supports fluid-width (100%) layouts.
  • Supports preset fixed-width layouts at:
    • 640px
    • 760px
    • 900px
    • 1000px
  • Supports easy customization of the width for fixed-width layouts.
  • Option to make layout flexible in response to user initiated font-size adjustments
  • Self-clearing sections. No matter which column is longer, each div.section will clear correctly.
  • Option to center within the viewport pages less than 100%.
  • Supports easy to over-write CSS classes for people who require “pixel perfect” layouts
  • font.css based on YUI fonts.css though changed slightly to rid you of having to look up calculations for different font-sizes (so now: 1em = 10px, 1.3em = 13px, etc…).

There is also a builder application (FF only) which will give you a view on the layout.

0

CSS is important, we should all agree on that. CSS gives you a lot of options you don’t have trying to use tables in a web layout. When done correctly, you can change the entire layout, look and design of a site by simply modifying or replacing your CSS file.

Over on Smashing Magazine they have compiled a great list of CSS articles and tutorials that cover many useful techniques. Many of these techniques are essential and they will make your life easier when developing websites.