problema sovrapposizione div in sito responsive

[dukeilduca]

ciao a tutti,
vi espongo subito il mio problema... sto creando un sito responsive e di certo non sono un drago ma mi sto impegnando per farlo da me...

Per ora sono riuscito a fare più o meno tutto quello che mi serviva (magari non tutto il codice sarà perfetto e pulito, ma per ora mi sembra andare bene...). C'è però un problema che non riesco a risolvere:

quando riduco la finestra del mio browser per fare in modo che tutta la pagina venga visualizzata su di un'unica colonna, il menu non mi viene centrato e l'immagine nella homepage va a finire in parte sopra al menu coprendolo e rendendolo quindi inaccessibile... qualcuno sa dirmi dove sbaglio?

di seguito il sito per mostrarvi l'errore:
http://angoloduke.altervista.org (provate a restringere sempre più la finestra fino a quando il menu si trasforma..)

e quì il codice css che ho utilizzato:

/* CSS Document - Dak ideas */

* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { background: #e0dcc6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 1,5%;}
ol, ul {list-style: none; margin: 0; }
ul li { margin: 0; padding: 0; }
h1 { }
footer, header, hgroup, menu, nav, section { 
display: block;
}

/* --- da terminare tutto il pezzo sopra --- */

/* --- struttura --- */
#wrapper {
min-width: 302px;
width: 96%;
max-width: 920px;
margin: auto;
padding: 0;
background: #FFFFFF;
}

#header-img {
height: 27px;
background: url(../img/header.png) repeat-x;
margin-bottom: 30px;
}

/* Logo H1 */
header #logo {
background: url(../img/logo.png) no-repeat;
height: 100px;
width: 301px;
float: left;
display: block;
text-indent: -9999px;
margin-bottom: 30px;
}

#main100 {
width: 98%;
margin: auto;
float: left;
padding-left: 1%;
padding-right: 1%;
text-align: justify;
padding-bottom: 1%;
}

#main60 {
width: 56%;
margin-right: 5%;
float: left;
padding-left: 1%;
padding-right: 1%;
text-align: justify;
padding-bottom: 1%;
}

#submain35 {
width: 33%;
float: right;
padding-left: 1%;
padding-right: 1%;
text-align: justify;
}

#footer {
margin-top: 5%;
width: 100%;
margin-right: 5%;
float: left;;
text-align: center;
background: url(../img/footer.png) repeat-x;
height: 148px;
color: #FFFFFF;
}

#footer-text {
padding-top: 70px;
}

#clear {
clear: both;
}

/* --- menu --- */
#menu-img {
background: url(../img/menu.png) no-repeat;
width: 572px;
height: 100px;
float: right;
}

header #menu {
text-align: right;
margin-top: 44px;
margin-right: 20px;
color: #FFFFFF;
}

header #menu li {
display: inline;
margin-left: 15px;
}


/* Media Queries */
@media screen and (max-width: 480px) {

#menu-img {
visibility: hidden;;
}

header #menu {
visibility: visible;
display: block;
float: left;
}

header #menu, #main100, #main60, #submain35, #footer {
float: left;
clear: left;
margin: 0 4px 0 4px; 
width: 95%;
}	

header #menu li {
margin: 0;
background: #850d67;
display: block;
margin-bottom: 3px;
}

header #menu a {
display: block;
padding: 10px;
text-align: right;
}		

}

 

[MAeSI]

Ciao,

prova ad aggiungere al menu height:auto;

/* Media Queries */
@media screen and (max-width: 480px) {

#menu-img {
visibility: hidden;
height:auto;
}

[...]

 

[dukeilduca]

Ciao, ti ringrazio per la risposta ma non è quello il problema.
Infatti il div #menu è già alto giusto in quanto vedo che si vedono tutte le voci, solo che l'immagine che fa passare le 4 immagini rimane sopra al menu, mentre dovrebbe abbassarsi e posiziionarsi appena sotto...

 

[MAeSI]

Ma hai provato?

Se non ho capito male, con quell'aggiunta nella media query, io vedo questo:

http://quellidelcucuzzolo.altervista.org/_altervista_ht/angoloduke.png

 

[dukeilduca]

Argh! errore mio, perfetto! grazie mille!