hay varias maneras de hacerlo. yo uso en lugar float:left, display:inline-block; y con margin lo centro las opciones.
para centrar todo contenido se usa margin: 0 auto;
Cita: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#fondo {
height:425px;
width:893px;
background:url(
http://farm6.static.flickr.com/5065/...f35a7f83_b.jpg) no-repeat;
margin-top: 5px;
margin: 0 auto;
}
#caratula {
float:left;
height:313px;
padding-left: 5px;
padding-right: 5px;
padding-top: 20px;
padding-bottom: 0px;
}
#menu{
width: 100%;
}
#menu ul{
list-style-type: none;
}
#menu li{
width:150px;
height:38px;
font:15px Verdana;
background:url(
http://extremegamex1.gofreeserve.com...ton_menu_1.png) no-repeat center;
text-align:center;
color: #FFF;
line-height:38px;
display: inline-block;
margin: 0 4px;
}
</style>
</head>
<body>
<div id="fondo">
<div id="menu">
<ul>
<li>Descripción</li>
<li>Requisitos</li>
<li>Imagenes</li>
<li>Videos</li>
<li>Descargar</li>
</ul>
</div>
<div id="caratula">
<img src="http://extremegamex1.gofreeserve.com/aprendiendocss/images/caratula_crysis.png" width="250" height="313" />
</div>
</div>
</body>
</html>
prueba con esto. el bloque div #menu es opcional