Listomatic does a good job in sumarizing navigation tricks.
(mind you, CSS Showcase does a pretty good job as well)

Basically, for a PURE CSS nav list create a list — then pretty it up with CSS.

In particular:

  1. Make it in-line
  2. Set Padding and Margins
  3. Set a borders (if you want)
  4. Create a:link and a:hover f you want rollover effects
Apr
19
2006
1:25 pm

** Centered page:
Set your element — wrapper, whatever — to a given width, then margin: auto.
For example:
#wrapper {
width: 800px;
margin: auto;
}

Auto will automatically create automagic margins that are equal … thereby creating a “centered” element.

Another way to is to set “padding” or “margins” of the element … but this isn’t as slick (and fluid), because these are relative to the outside of the page!
So, if you set the “margins” to 20px on the right and left, the main element will be 20px from the right and left and therefore centered.
If the screen width is 800, then the centered element will be 800 - 20 - 20 = 740px.
But if the screen width is 1000, then the centered element will change its width!
1000 - 20 - 20 = 840px.

** ADDENDUM **
Explorer quirks!!
As accounted for here: http://www.quirksmode.org/css/quirksmode.html


** THIS MUST BE ADDED — or MSIE will not recognize the margin: auto all the time! **

—————
** Eliminating the gutters:
* {padding: 0; margin:0;}
– basically between every element I think there is a natural “gutter”, maybe its margin, or maybe its padding.
Doesn’t matter … you can eliminate the space between them easily so that the elements are flush against each other.

—————
** Creating effective elements:
* you can actually set the dimensions of an element by setting “width” and “height”!
* you can then set stuff INSIDE those elements by setting positional identifiers: relative or absolute

—————-
** Preventing spillover of images;
Either “overflow: hidden;” or …
Set the element to the exact dimensions of the image.

—————-
** Replacing text with images:
Wrap a “div” around some text
In the div, set the text-ident so it places the text way, way, way out of the screen
Create a background-image to replace the text

—————-
** Roll-overs, CSS style
Create an image that has all the roller over images TOGETHER

Apr
19
2006
12:22 am

(Of course, I have now ordered “CSS Mastery” by Andy Budd through Amazon.com — but that’s not the point)

Priority 1: Learn CSS — so we can do certain “tricks”.

Epiphany: You wake up 5 years after a long slumber, only to find out that the fundamentals of web design have suddenly changed!? Semantic markup, DOM, DHTML, CSS — things which, due to the ‘browser wars’ were only talked about — are all standard now.? Rather than having in-line markup … its all done through imported CSS documents.

Web design is leaner, sleeker, and … bulletproof?

Here are the priorities for learning:

  1. Header
  2. Titles
  3. Navigation
  4. Rounded Boxes
  5. Floating Layout
Apr
17
2006
8:33 am