Bueno, así es como lo haría yo:
#header {
width: 800px;
margin: 0 auto;
}
#header img {
display: block;
margin: 0; padding: 0;
border-width: 0;
width: 100%;
}
Bueno, y a todo esto ¿alguna razón para no hacer:
#header {
width: 800px;
height: 80px; <-- o lo que sea de la imagen
margin: 0 auto;
background: url('imagen con la foto y escudo');
position: relative;
}
#header #menu {
width: 800px;
height: 19px;
position: absolute;
bottom: 0; left: 0;
}
Y en tu html puedes tener simplemente:
<div id="header">
<div id="menu">
<ul>
bla bla bla
</ul>
</div>
</div>
Hmmm... incluso podríamos sacar ese <div id="header"> de ahí y dejar nada más menú:
#menu {
width: 800px;
height: 80px; <-- o lo que sea de la imagen
margin: 0 auto;
background: url('imagen con la foto y escudo');
position: relative;
}
#menu ul {
width: 800px;
height: 19px;
position: absolute;
bottom: 0; left: 0;
}