stai allestendo una pagina evidentemente per la tua risoluzione. Usi larghezze in percentuale per i div ma in realtà sei legata a quel 1280px dell'immagine, e allora lasciamo da parte il width:100% e usiamo una larghezza fissa per semplificare.
Anche le altezze in percentuale non sono l'ideale, comunque: dobbiamo innanzitutto impostare l'altezza su body e html, d'altra parte vuoi un'altezza pari al 100% ma fra il div con l'immagine che è alto 768px + la barra del menu + il padding che vuoi in basso arriviamo a circa 900px. Il body dovrà avere quindi un'altezza minima di 900px
Rivedendo il codice avremo quindi:
codice HTML:
<!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=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
* {margin:0; padding:0;}
html, body {height:100%; min-height:900px; /* 768px dell'immagine + i 100 e rotti del menu + lo spazio che vogliamo lasciare in basso */ background:#070707;}
#wrapper {width:1280px; height:100%;min-height:900px; /* occorre rispecificare di nuovo il min-height per non avere problemi con Opera e Safari */ position:relative; margin:auto;}
#menu { position:absolute; bottom:30px; z-index:1}
#menu ul{width:1272px; /* con i bordi 4px+4px arriviamo a 1280*/ list-style:none; height:100px; line-height:100px; border:double 4px #6d5e48; border-radius: 10px; background:#473219; opacity:0.7; overflow:hidden; margin:0 auto}
#menu li{width:20%; display:block; float:left; text-align:center}
#menu a { color:#fff;text-decoration:none;font-size:48px; font-family:vivaldi;}
#menu a:hover { color:#000;}
#immagine {width:auto; height:100%; min-height:900px; background:#fff; margin:0 auto}
#logo { width:182px; height:80px; left:5%; top:2%; background:url(../) center no-repeat; opacity:0.67; z-index:1}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="immagine"><img src="" ... /></div>
<div id="menu">
<ul>
<li><a href="./index.html" title="">Home</a></li>
<li><a href="#" title="">Introduzione</a></li>
<li><a href="#" title="">Capitoli</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Contenuti</a></li>
</ul>
</div>
</div>
</body>
</html>
ora aggiungi il tuo logo (ho indicato uno z-index che serve ad indicare il livello su cui viene a trovarsi, superiore al div in cui lo includerai)
Inoltre: usi un font che non si trova tra i font di sistema e che molti non visualizzeranno (aggiungi delle alternative). Mi fermo qui, ora studiati un po' il codice. Buon lavoro
Permessi di invio
Rispondi quotando