Help? Header text behind image & single image nav links

I hate for my first post to show how thick I am but frustration is getting the better of me. Just when I think I’m getting the hang of the finer points of css, I run into something that I just can’t figure out...

I have 3 problems that I can’t find an answer for by Googling for it..

1) I don’t want to shoot my image alt text -9999px off page because I want it to be available when browsers aren’t reading images. In other words, I want to keep it BEHIND the images that I have in the header.

2) I have a second menu – a single image, below the header that I want to block off as clickable links. I’ve tried using individual images for each link but messed that up and have resorted to a single image. Since it doesn’t effect load time, I think I’ll stick with this (unless someone has an easy way to do individual images).

3) my last problem… not sure why this is but when I re-size the browser window, the images and text (content divs) move around. I’m currently using “em” units for the text and tried using “pt” units but that didn’t make a difference. As for the content divs re-sizing…???

Here is the test page: http://easynicheplr.com/test/

...see what I mean about re-sizing the page to view it properly..? It used to work but I don’t remember what I changed – there have been so many…

...something funny about this upload… it doesn’t show the header text sitting above the header image BUT it does show it here: http://erskinefree.com/abc

Here is the HTML

<div id="heading">

<div id="container">

<div id="logo"> <!-- MY HEADER IMAGES -->

<h1 id="logoimg"><span></span><a href="http://ErskineFree.com">">'>http://ErskineFree.com">">[home page]</a></h1>

<h2 id="logotxt"><span></span><a href="http://ErskineFree.com">[home page]</a></h2>

</div> <!-- end logo -->

<ul id="nav"> <!-- MY TEXT LINKS (no problem here) -->

</ul> <!-- END NAV -->

<ul id="nav-buttons"> <!-- MY NAV IMAGE -->

<li class="hours"><a href="hours.html"></a>Hours</li>

<li class="events"><a href="events.html"></a>Events</li>

<li class="articles"><a href="articles.html"></a>Articles</li>

<li class="podcasts"><a href="podcasts.html"></a>Podcasts</li>

<li class="missions-committees"><a href="missions-committees.html"></a>Missions</li>

<li class="further-study"><a href="further-study.html"></a>Study</li>

</ul>

</div><!-- END CONTAINER -->

</div> <!-- END HEADING -->

Here is the CSS

/*===== for the text behind header images =====*/

#logo h1 { position:absolute; left:580px; font-size:10pt; color:#000000; }

#logo h2 { position:absolute; left:80px; top:65px; font-size:10pt; }

#logoimg { background-image:url(images/logo-efce.png); width: 310px; height: 232px; }

#logotxt { background-image:url(images/logotxt.png); width: 486px; height: 62px; }

/* move the text under the h1 image */

#logoimg span { margin-bottom: -75px; }

#logotxt span { margin-bottom: -75px; }

/* code for styled h1 & place the span on top */

h1 span { display: block; position: relative; width: 310px; height: 232px; top: 100px; z-index: 1; }

h2 span { display: block; position: relative; z-index: 1; }

/*===== to section off a single image for nav links =====*/

#nav-buttons { position:absolute; left:33px; width:975px; height:235px; }

#nav-buttons li { float:left; } /* background:none; */

#nav-buttons li.first { background:none; } <!-- no beginning divider -->

#nav-buttons li a { color:#e8f1f9; }

#nav-buttons li.hours-of-worship { float:left; display:block; position:relative; }

#nav-buttons li.events { float:left; display:block; position:relative; }

#nav-buttons li.articles { float:left; display:block; position:relative; }

#nav-buttons li.podcasts { float:left; display:block; position:relative; }

#nav-buttons li.missions-committees { float:left; display:block; position:relative; }

#nav-buttons li.further-study { float:left; display:block; position:relative; }

Not sure what other code to include – hopefully this will paint an ugly enough picture

Thx very much in advance for your help.