Salve, ho una situazione classica di <header> contenente un logo con sotto un <nav> contenente un menù, entrambi posizionati in un container... Ho impostato che <header> e <nav> siano fissi in cima alla pagina con un position: absolute.
Ridimensionando la pagina, il logo nell'header si scala se non c'è spazio a sufficienza... Vorrei che il <nav> restasse subito sotto all'<header> ma non riesco a passargli un parametro "relativo"...
CSS default, perfettamente funzionante:
codice:
header {
position: absolute;
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
height: 92px;
font-size: 13px;
background-color: inherit;
}
nav {
position: absolute;
top: 92px;
left: 0px;
padding: 2px 0px 2px 0px;
width: 100%;
height: 16px;
font-size: 12px;
text-align: center;
text-transform: uppercase;
background-color: inherit;
}
CSS da correggere...
codice:
@media only screen and (max-width: 720px) {
header {
width: 100%;
height: auto;
}
#logo {
width: 100%;
height: auto;
}
nav {
position: absolute;
top: 92px;
left: 0px;
padding: 2px 0px 2px 0px;
width: 100%;
height: 32px;
font-size: 16px;
text-align: center;
text-transform: uppercase;
background-color: inherit;
}
E lo stralcio di HTML...
codice:
<header><img id="logo" src="banner_grande_new.gif" alt="Descrizione..."></header>
<nav>
<div id="menu">
Menu...
</div>
</nav>