Il titolo ve lo spiego subito.
Sto realizzando un mio (primo) sito responsive.
Il succo da gestire è nel menu di navigazione. Imposto dunque i CSS per tre situazioni, a cascata:
/* Codice generale per i 3 casi [...] */
@media screen and (max-width: 768px) {/* Tablet */}
@media screen and (max-width: 480px) {/* Smartphone */}
Nelle regole generale ho imbastito quanto segue:
e un tag nav con dentro un ul, appunto il menu, a destra.
Voglio che arrivati alla formattazione per tablet e mobile, il logo si centri rispetto all'intestazione e poi appunto appaia il menu nuovo per la navigazione da dispositivi mobili (che realizzerò in seguito, prima voglio raccapezzarmici un attimo).
Annullo il float. Però il margin 0 auto non funziona.
Funziona solo così, ma non so mica perché:
Pensavo di dover mettere il position relative al #intestazione e il position absolute al figlio #logo ma non funzionava per niente. Spariva tutto. Così invece fa quello che gli si dice. Il problema appunto è che non capisco il motivo pur avendo masticato CSS da tanto e smanettato parecchio in materia.
Non è che magari ho fatto un erroraccio di fondo e funziona per questioni di #####.pardon, bottom?
Grazie come sempre a tutti e buon Web
Sto realizzando un mio (primo) sito responsive.
Il succo da gestire è nel menu di navigazione. Imposto dunque i CSS per tre situazioni, a cascata:
/* Codice generale per i 3 casi [...] */
@media screen and (max-width: 768px) {/* Tablet */}
@media screen and (max-width: 480px) {/* Smartphone */}
Nelle regole generale ho imbastito quanto segue:
Codice:
#intestazione {
max-width: 60em;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#logo {
width: 300px;
margin: 0 1% 0 0;
float: left;
}Voglio che arrivati alla formattazione per tablet e mobile, il logo si centri rispetto all'intestazione e poi appunto appaia il menu nuovo per la navigazione da dispositivi mobili (che realizzerò in seguito, prima voglio raccapezzarmici un attimo).
Annullo il float. Però il margin 0 auto non funziona.
Funziona solo così, ma non so mica perché:
Codice:
@media screen and (max-width: 768px) {
#logo {
clear: both;
position: relative;
left: 50%;
margin-left: -150px;
}
#menu {
display: none;
}
}Pensavo di dover mettere il position relative al #intestazione e il position absolute al figlio #logo ma non funzionava per niente. Spariva tutto. Così invece fa quello che gli si dice. Il problema appunto è che non capisco il motivo pur avendo masticato CSS da tanto e smanettato parecchio in materia.
Non è che magari ho fatto un erroraccio di fondo e funziona per questioni di #####.pardon, bottom?
Grazie come sempre a tutti e buon Web
Ultima modifica di un moderatore: