Posizionare un div "wrapper" sotto una barra di navigazione fissa?

Ho iniziato a lavorare su un sito nuovo di zecca e ho giocato con i progetti per un po ', tuttavia un problema che mi sembra di avere riguarda il posizionamento di una barra di navigazione con una larghezza dello schermo che è fissa per scorrere. Sotto ho creato un div chiamato "wrapper" che è impostato per centrare ad una larghezza di 980px. Di seguito è riportato un esempio di codice;Posizionare un div "wrapper" sotto una barra di navigazione fissa?

<style> 
    #navBar { 
     background: RGB(0, 0, 0); 
     height: 30px; 
     position: fixed; 
     width: 100%; 
    } 

    #wrapper { 
     margin: 0 auto; 
     width: 980px; 
    } 
</style> 

<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div> 
</div>

La scatola ho creato all'interno di "wrapper" DOVREBBE (ovviamente non è perché sto facendo qualcosa di sbagliato - da qualche parte) sedersi 5px sotto il navBar, però, perché ho usato position: fixed si siede sotto di esso, invece. Qualcuno potrebbe guidarmi su come risolvere questo problema e farlo in modo che l'involucro si trovi direttamente sotto piuttosto che sotto la barra di navigazione, pur mantenendo il centro?

fonte

2013-05-24 Banny

Penso che sarà necessario impostare un margine superiore per il wrapper uguale all'altezza della barra di spostamento ... –

Ho provato questo però perché è seduto sotto la barra di navigazione anche spinge la barra di navigazione di 30px. Di solito sono bravo a trovare soluzioni alternative ma qualcosa di così fondamentale come questo mi ha lasciato perplesso. – Banny

impostare top:0 sul navbar e aggiungere 30px margin-top sul tuo wrapper div

#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top:0 
} 
#wrapper { 
    margin: 30px auto 0; 
    width: 980px; 
}

http://jsfiddle.net/duncan/NkRxQ/

fonte

2013-05-24 11:18:25

Brill! sembra aver fatto il trucco :) È questa la soluzione a QUALSIASI posizione: problemi risolti in termini di sovrapposizione? C'è anche un modo in cui puoi vedere che posso migliorare il mio layout o è più o meno come dovrebbe essere? – Banny

Ho fatto questo, ma se faccio Experience, la barra di navigazione copre il titolo. – Janneman96

Situazione simile con me in cui l'altezza della barra di navigazione è dinamica (ho messo "word-wrap: break-word" nel css). Cosa dovrei scrivere nel file wrapper? –

Soluzione completa per risolvere il problema.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 
#wrapper { 
    margin: 30px auto; 
    width: 980px; 
    background: #ccc; 
} 
.clear { 
    clear: both; 
} 
</style> 
</head> 
<body> 
<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;"> 
     <!-- You can create left side elements here (without any float specification in CSS) --> 
    </div> 
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;"> 
     <!-- You can create right side elements here (without any float specification in CSS) --> 
    </div> 
    <div class="clear"></div> 
</div> 
</body> 
</html>

L'avvio del nuovo sito dovrebbe contenere DOCTYPE e margine 0 per tutti i tag. (Cosa molto utile).

fonte

2013-05-24 11:31:39

Posso chiederti per cosa è usato il clear? Anche un problema che sto avendo è che ho usato la soluzione fornita di seguito, ma ogni volta che creo un nuovo elemento, getta solo il layout che ho creato. Esiste comunque la possibilità di creare una qualche forma di correzione permanente per renderlo immune da altri elementi? Devo usare l'elemento di stile 'float' su ogni elemento per risolvere il problema, tuttavia non voglio fluttuare ogni elemento – Banny

. Clear è usato per far apparire il div wrapper. altrimenti sarà in altezza 1px, perché hai specificato float: a sinistra per div interno di wrapper div. –

Intendo ogni volta che creo QUALSIASI elemento devo applicare float o semplicemente rompe il mio layout – Banny

Posizionare un div "wrapper" sotto una barra di navigazione fissa?

risposta

Problemi correlati