Mise en page Saint Graal CSS

Est-ce que quelqu'un peut décomposer pour moi les pièces qui composent le Disposition du Saint Graal avec le positionnement div divisée comme on le voit ici? http://matthewjamestaylor.com/blog/perfect-3-column.htm Mise en page Saint Graal CSS

La façon dont je comprends est que:

colmask est juste un wrapper pour positionner le contenu entre en-tête et pied de page
colmid est un autre emballage que je suppose que Adapte certains navigateurs tels que IE7
colleft est l'emballage de la vraie chose (ne sais pas pourquoi tant d'emballages)
col1, col2 et col3 sont la chose réelle et sont tous flottants à gauche et à définir leurs marges pour ajuster leur apparition à l'écran

Quelqu'un peut-il expliquer mieux ce qui est le Zen de cette conception? J'essaie de l'appliquer à un scénario réel et ça ne marche pas vraiment.

Source

2010-09-22 Lorenzo

Connaissez-vous l'article: http://www.alistapart.com/articles/holygrail/? –

Celui qui utilise une technique différente avec des marges négatives, mais je vais continuer à méditer à ce sujet pour voir si je peux obtenir une meilleure compréhension de l'autre Saint Graal je faisais référence à – Lorenzo

Le Saint-Graal est une structure liquide à trois colonnes où trois colonnes ont toutes la même longueur, quel que soit le contenu. Les colonnes devraient être dans l'ordre 2-3-1 dans le HTML (pour le référencement). L'idée est de séparer le contenu de la couleur de fond et de le placer dans différents divs. Un conteneur flottant div sera toujours la hauteur de son contenu flottant, donc ce qui se passe ici est pour chaque contenu div, il y a un div conteneur flottant relativement positionné. Ce sont les trois enveloppes.

étape par étape, il fonctionne comme ceci:

créé trois colonnes imbriquées à l'intérieur de trois enveloppes imbriquées.

<div id="container-right"> 
    <div id="container-middle"> 
    <div id="container-left"> 
     <div id="col1">Column 1</div> 
     <div id="col2">Column 2</div> 
     <div id="col3">Column 3</div> 
    </div> 
</div>

Float em all et définir leurs couleurs de fond (rappelez-vous que col1 est le centre!)
Définissez la largeur d'enveloppe à 100%. Définissez les largeurs de col à 100% (40%, 30%, 30%). Faites leur positionnement relatif pour les deux types.
Maintenant, tous les divs colorés sont les uns sur les autres. Faites glisser les divs de l'enveloppe de couleur de colonne en définissant la propriété correcte. Laisser le conteneur-droit seul. Déplacez le récipient au milieu de plus de 30% pour révéler la couleur en dessous. Déplacez le conteneur-gauche plus pour révéler les deux.
Maintenant, le contenu est assis sur le côté gauche de la fenêtre. Poussez chaque div en place avec la même technique, mais en utilisant la propriété left cette fois.
Enfin, coupez le surplus en réglant le débordement: caché sur l'enveloppe la plus externe. S'il vous plaît noter que vous devez définir le positionnement relatif sur le div externe ou cette étape ne fonctionnera pas dans IE.

Source

2011-10-23 21:14:47

Grande explication! – CapelliC

Je suis venu avec cette mise en page après avoir été frustré par toutes les suggestions là-bas. Son HTML5/CSS3 conforme et fonctionne dans IE8 + et au moins FF21 - Je n'ai pas testé dans d'autres versions et les navigateurs. Mais si vous cherchez une mise en page fluide - celui-ci fonctionne très bien.

<!DOCTYPE html> 
<html> 

<head> 
    <title>Canvas</title> 
    <style type="text/css"> 

    * {padding:0px; margin:0px;} 
    html, body {width:100%; height:100%;} 

    #page {width:100%; height:100%;position:relative;} 

    #page > #header { 
     position:absolute; 
     top:0px; 
     left:0px; 
     right:0px; 
     height:64px; 

     background:#ccc; 
     } 

    #page > #body { 
     position:absolute; 
     top:64px; 
     left:0px; 
     right:0px; 
     bottom:64px;  
     } 

     #page > #body > #left { 
      position:absolute; 
      top:0px; 
      left:0px; 
      bottom:0px; 
      width:192px; 

      background:#bbb; 
      } 

     #page > #body > #center { 
      position:absolute; 
      top:0px; 
      left:192px; 
      right:192px; 
      bottom:0px; 
      } 

     #page > #body > #right { 
      position:absolute; 
      top:0px; 
      right:0px; 
      bottom:0px; 
      width:192px; 
      background:#bbb; 
      } 

    #page > #footer { 
     position:absolute; 
     bottom:0px; 
     right:0px; 
     left:0px; 
     height:64px; 
     background:#ccc; 
     } 

    </style> 
</head> 

<body> 
    <div id="page"> 
    <div id="header"></div> 
     <div id="body"> 
     <div id="left"></div> 
     <div id="center"></div> 
     <div id="right"></div> 
     </div> 
    <div id="footer"></div> 
    </div> 
</body> 

</html>

Source

2013-06-03 17:30:03

Mise en page Saint Graal CSS

Répondre

Questions connexes