Problem

Ich würde statt des spans ein div nehmen, das ist von sich aus ein Blockelement, so dass du auf display:block verzichten kannst. Wenn du das Element statt mit top und position:relative mit margin nach oben ausrichtest, kannst du es auch mit margin (auto) zentrieren. Die zwei Bilder top_left.gif und top_right.gif könntest du mit float:left und float:right an den jeweiligen Rand platzieren - also in etwa so:

<div id="top"><img src="images/top_left.gif" id="top_left" width="55" height="19" alt="" /><img src="images/top_right.gif" id="top_right" width="55" height="19" alt="" /></div>

div#top {
margin:5px auto 0;
width:70%;
height:19px;
background-image:url(images/top.gif);
}
img#top_left {
float:left;
}
img#top_right {
float:right;
}

Das beste wäre es vielleicht, wenn du alles in einem Gesamt-Container packst, den du mit margin:auto zentrierst und für den du die Breite angibst. Die Menüs kannst du dann mit float:left und float:right unterhalb des Headers am linken und rechten Rand platzieren, z.B.:

<div id="gesamt">
<div id="header"></div>
<div id="menu-1"></div>
<div id="menu-2"></div>
<div id="content"></div>
<br class="clear" />
</div>

#gesamt { margin:auto; width:70px; }
#header { height:80px; }
#menu-1 { float:left; width:100px; }
#menu-2 { float:right; width:100px; }
.clear { clear:both; }