960 Grid-System - verschachtelte Grids haben Layout-Problem

Question

Ich habe gerade begonnen, ein Hobby-Website für mich selbst zu entwickeln, und versuchen, die 960 css grid system verwenden, um meine HTML-Elemente auf dem Bildschirm zu gestalten.

bekam ich die Grundidee und implementiert nur ein Skelett Website here on my server

Es gibt mehrere Fragen, die ich bisher habe:

<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> 

ich 12 bin mit einem Raster basierte Vorlage Daher sollte die Gesamtzahl der "Gitter" in jeder "Reihe" 12 sein. Ich kann jedoch nur die zwei Elemente in der gleichen "Reihe" mit der Gesamtzahl der hinzugefügten Gitter zu 11 machen, aber nicht 12. Wenn ich mich ändere die #user_panel "'s Klasse zu" grid_3 prefix4 ", dann th at würde dieses Element tatsächlich zur nächsten Zeile bringen, die alles unterbricht.

Eine andere Sache ist, obwohl die First-Level-Elemente wie die top_bar und title_bar auf der richtigen Position sind (Sie können bestätigen, dass eine praktische Firefox-Plugin gridfox verwenden), mit genauer Breite von 940px, sind die verschachtelten Gitter nicht in Positionen, die sie sein sollen (ein bisschen weg von den entworfenen Positionen).

Ich bin neu in diesem CSS-Grid-System, gibt es eine bessere Möglichkeit, die Nestelemente zu verwalten? Ich muss sagen, einige der Beispiel-Websites auf der 960.gs sind ziemlich erstaunlich zu sehen :)

Vielen Dank für jeden Vorschlag im Voraus!

Aktualisiert Info

Okay, auf der Grundlage der Antwort unten, ich denke, es noch möglich ist, farbige Grenzen zu verwenden, wenn die verschachtelten Gitter debuggen, gibt es einen Ad-hoc-Weg zu „betrügen“:

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

Answer 1

Nicht sicher, ob Sie nicht erkannt haben, aber das Framework bietet eine Methode für verschachtelte Elemente.

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

.alpha { 
    margin-left: 0; 
} 

.omega { 
    margin-right: 0; 
} 

Dies überschreibt die Ränder, die sie allen Rasterelementen geben, sodass die Elemente auf der Seite an den Seiten ihrer Container anliegen können.

Was Sie tun müssten, ist die linke Menüleiste die alpha Klasse, die richtige die omega Klasse. Dann müssen Sie alle der Grenzen entfernen, die Sie diesen beiden Elementen und ihrem Container hinzugefügt haben. Dies liegt daran, dass CSS float s sehr präzise sind und brechen, wenn Sie die Elemente größer als das definierte Framework machen.

Wenn Sie Rahmen hinzufügen müssen Sie einige zusätzliche Stile hinzufügen, die diese überschreiben und ihnen Breite zwei Pixel (eines für jede Seite des Rahmens) kleiner als es im Rahmen definiert ist.

Answer 2

und eine sehr späte Antwort ....

Verwendung entweder Entwurf für Ihre Grenzen

`outline: 1px solid red;` 

oder Verwendung Box-Sizing

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