Brooke — Thu, 15 Feb 2007 17:49:58 +0000

thanks guys for everything!!! Things are starting to really work!

If you go to: http://www.mnresourcerecovery.com/test/mnrr_facilities.html
you can see that the box that contains all of the nav is not long enough. (in FF) I am using dreamweaver templates so that box is only editable on the template page. At this point I will continue to use the template - but is there some way that I can expand that box...or some other solution?

TIA!

demonhale — Tue, 13 Feb 2007 01:59:08 +0000

I'll solve the alignment problem, wouldn't meddle with the hover thing... megan should cover that...

Ok, don't touch the css... pretty ok there, just one tip though, when using "text-align:center;" tag, don't use it on span classes or id's... It wouldn't work. If you insist on using span, then you should wrap those spans with a div and add the "text-align:center;" property to the div... In your case the easiest solution is to change the span wrapper on the Newsletter area for winter and summer to div...

Heres a before and after on that area...

~~Before~~

      <p><img src="index_files/newsletters.gif" alt="newsletters" border="0" height="29" width="171"><br>
          <<strong>span </strong>class="indent">winter</<strong>span</strong>><br>
        <<strong>span</strong> class="indent">summer</<strong>span</strong>></p>
      <p>&nbsp;</p>

~~After~~

      <p><img src="index_files/newsletters.gif" alt="newsletters" border="0" height="29" width="171"><br>
          <<strong>div </strong>class="indent">winter</<strong>div</strong>><br>
        <<strong>div</strong> class="indent">summer</<strong>div</strong>></p>
      <p>&nbsp;</p>

That should fix it...

Megan — Mon, 12 Feb 2007 20:39:03 +0000

Here's a quick example of CSS-based mouseovers:

http://admmail.uwaterloo.ca/~mjjack/demos/CSS_mouseovers.html

(that code doesn't work in IE 6 though... nevermind, that was an easy fix)

Megan — Mon, 12 Feb 2007 19:01:23 +0000

For centering, your #container code should look something like this:

#container {
width: 750px;
margin: 0px auto;
background-color: #FFFFFF;
background-image:url(images/bg_left.gif);
background-repeat:repeat-y;
min-height: 625px;
}

For your navigation graphic, the image would go in as a background image on the #navigation div. You can set it to no-repeat and align bottom. That should be in the DW CSS panel. I almost never use the DW CSS - it's way too annoying, I'd rather type it all in myself. Auto-complete is very helpful when you forget what the possible values are.

The mouseovers on the navigation menu is a little trickier. Ideally that would be done as a list with links inside the list items, but that's a little complicated for just starting out. What you'd have is something like this:

#navigation a {background: url("path/image.gif") no-repeat left top; height: 14px; width: 80px;}
#navigation a:hover {background: url("path/image-hover.gif") no-repeat left top; height: 14px; width: 80px;}

This will swap out the images on mouseover, instead of using javascript. Much cleaner I'll see if I can find a how-to article on that (if not, I will be writing one for the new content site here!)

Edit: it might be a little more complicated than that in reality - I don't normally use pure graphic navigation menus anymore. It's easier and more SE friendly just to style regular links to make them look nice You'd probably have to put a display: block in there at least. I'll play with this if I have some spare time this afternoon.

Here are some articles that might help if you want to try this:

http://www.monkeyflash.com/css/image-rollover-navbar/

Brooke — Mon, 12 Feb 2007 18:15:44 +0000

Okay - this is what I have now...http://www.mnresourcerecovery.com/test/index.html

Yuck -
1. Still centering problem

Regarding your tip...whaaa?

No really - what would be the first step?
Does every graphic get put into a seperate div tag?
So you put the graphic link in the bg - then you type a plain link in, then you do a swap?
I am using dreamweaver - I guess I don't follow...but I would like to learn...

Thanks Megan!!!

Megan — Mon, 12 Feb 2007 17:28:10 +0000

1. Try margin: 0px auto; on your container div.
2. It would be better to have that image as a background image on the navigation div, then the newsletter links can just be placed inside that div rather than in a separate positioned layer.

Tip: instead of using javascript to swap the images, put them in as background images on plain links and use a hover attribute to swap them.