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

** 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

(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

There is a great tutorial on how to turn photographs to pictures.

Basically it is the following:

1) Create the photo-border by creating a rectangle shaped gradient
2) Create a selection that is 4 pixels less than the gradient … this is where the photograph will go
3) Open your photograph of choice and shrink it down a little bit so that it will fit into that selection
4) Save selection
5) Select “ALL” on the photograph, and COPY that selection
6) On the photo-border, load up the selection if its gone, and (HERE’s the KICKER) Edit –> Paste into selection
7) This will create an automatic mask! Adjust the photograph position
8) Then create another layer (transparent)
9) You should have three layers: 1) the photograph mask layer 2) rectangle shaped gradient 3) the new transparent layer(which is new)
10) You now need to create the shadow in the new layer
11) Load up that selection that you saved, and on the “PATHS” tab, click on the small arrow, and click on “make work path”
12) Click on the Pen ICON and stretch the corners of the work path so that they appear like the shadows around corners
13) right click path and say “Make selection”
14) Select “feather 4pixels”
15) Then fill the selection, but select that last transparent layer first, so that you can fill it with this “shadow”.
16) Arrange the Mask and the rectangle shaped gradient on top of the shadow layer — and voila!

The website is sort of up … in a ver 0.5.

Powered by: Dreamhost
CM by: Wordpress
Gallery by: Gallery2.02
WPTheme: vSlider

* Can upload pictures easily by just “Publishing through XP” plug in … and right through the desktop.
Nifty!

Currently: San Diego is up, and are some of pictures from Vegas.

Further Plans:
[? ] a web2.0 badge?
[? ] email addresses for the family
[? ] customized 404 page, since it is error protected.

Moral of the story: don’t do anything when you’re tired as hell.

So, the dilemma below is actually solved pretty easily with the following.

1. Download Gallery2 version 2.02
2. Download module: PublishXP from that SAME VERSION.
(where I previously downloaded PublishXP from ver 2.1!!)
3. Delete Gallery2
4. Upload Gallery2
5. Install modules: PublishXP, imageblock, imageframe
6. Delete plugin: WPG2 and re-install, and re-configure.

Getting a good photo gallery up in Word press is a NIGHTMARE.

Gallery2 is probably the only decent alternative.

However, it is ABOMINABLY slow to upload, and unless you’re using something FileZilla, you can actually *lose* files to the upload making the actual script impossible to use. You can imagine how frustrating it is to start searching for those files, then manually uploading it thereafter.

Also, getting some of the modules to work has been an abomination too.

1) I wanted to get publishXP to work so Anita can upload images easily. Turns OUT that it only works with certain modules ALREADY installed … in the 2.1 version. Fine. I upgrade to 2.1

2) THEN when I go to WPG2 plugin, I find out (PULLING HAIR OUT) that it only compatible with gallery 2.0(!).

Dilemma: publishxp very slick … but otherwise cannot integrate it with WP as a plug in which also is driving me batty.

What’s really surprising is that no one has created an easy-plug-in gallery for WP that works really well.