Sistema a griglia 960 - le griglie annidate presentano problemi di layout

Question

Ho appena iniziato a sviluppare un sito di hobby per me stesso e sto provando a utilizzare lo 960 css grid system per il layout dei miei elementi html sullo schermo.

ho avuto l'idea di base e appena implementato un sito web scheletro here on my server

Ci sono diverse domande che ho ottenuto finora:

<div class="container_12"> 
<div class="grid_12"> 
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar --> 

     <ul id='top_menu' class='grid_5'><!-- start of #top_menu --> 
      <li>Home</li> 
      <li>Fake1</li> 
      <li>Fake2</li> 
      <li>Fake3</li> 
     </ul><!-- end of #top_menu --> 
     <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel --> 

      <li>log in</li> 
      <li>faq</li> 
     </ul><!-- end of #user_panel --> 

    </div><!-- end of #top_bar --> 
</div> 
<div class="clear"></div> 
<div id='title_bar' class="grid_12"> 
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1> 

</div><!-- end .grid_1 --> 
<div class="clear"></div> 

Sto usando un modello di griglia di 12 base quindi il numero totale di "griglie" su ogni "riga" deve essere 12. Tuttavia, posso solo rendere i due elementi sulla stessa "riga" con il numero totale di griglie aggiunte fino a 11, ma non 12. Se cambio la #user_panel "classe a" grid_3 prefix4 ", quindi th a prenderebbe effettivamente questo elemento alla riga successiva, che rompe tutto.

Un'altra cosa è, anche se gli elementi di primo livello come il top_bar e title_bar sono in posizione corretta (si può confermare che l'utilizzo di un comodo plugin per Firefox gridfox), con larghezza esatta di 940px, le griglie annidate non sono in posizioni che dovrebbero essere (un po 'lontano dalle posizioni progettate).

Sono nuovo in questo sistema di griglia css, c'è un modo migliore per gestire gli elementi del nido? Devo dire che alcuni dei siti web di esempio sul 960.gs sono davvero incredibili da vedere :)

Grazie per qualsiasi suggerimento in anticipo!

modificate Info

D'accordo, in base alla risposta qui sotto, mi sa che è ancora possibile utilizzare i bordi colorati durante il debug le griglie annidate, c'è un modo ad hoc per "barare":

.grid_insider 
{ 
    border : 1px solid red; 
    margin : -1px; /* this will stop the element from 'expanding' its space */ 
} 

Answer 1

Non so se non l'hai realizzato, ma il framework fornisce un metodo per gli elementi nidificati.

/* `Grid >> Children (Alpha ~ First, Omega ~ Last) 
------------------------------------------------*/ 

.alpha { 
    margin-left: 0; 
} 

.omega { 
    margin-right: 0; 
} 

Ciò ignora i margini danno a tutti gli elementi di rete, consentendo in tal modo gli elementi sul lato ad appoggiare contro i lati dei loro contenitori.

Quello che dovresti fare è dare alla barra dei menu di sinistra la classe alpha, quella giusta la classe omega. Quindi, dovrai rimuovere tutti i dei bordi aggiunti a questi due elementi e al loro contenitore. Questo perché i CSS float sono molto precisi e si interromperanno se si rendono gli elementi più grandi del framework definito.

Se è necessario aggiungere i bordi, è necessario aggiungere alcuni stili aggiuntivi che li sovrascrivono e assegnare loro larghezze di due px (una per ciascun lato del bordo) più piccole di quelle definite nel framework.

Answer 2

e una risposta molto tarda ....

uso sia di contorno per i tuoi confini

`outline: 1px solid red;` 

o l'uso box-sizing

 .gridInsider { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    }