en utilisant z-index et la position dans css pour séparer la conception et le noyau!

Question

J'utilise les css yui-grids (sans importance si vous ne savez pas de quoi il s'agit) avec trois colonnes. et je suis en train de mettre tous les trucs de fantaisie sur la colonne de gauche et en utilisant z-index et le psition relatif les ramenant au centre. puis en mettant toutes les choses importantes comme les formulaires, les boutons d'entrée, les liens et le contexte au centre. Est-ce faux? Je n'ai jamais vu ça, donc je me demandais peut-être qu'il y avait quelque chose que je ne connaissais pas! ou ne considère pas. Devrais-je utiliser une seule colonne?

Answer 1

Je ne suis pas tout à fait sûr de ce que vous demandez, donc je vais donner un coup de feu:

---

Colonnes

Si vous allez avec une mise en page de colonne, vous devrait donner juste des éléments flottants un aller. En raison du fonctionnement du flottant, un hack de clearfix sera nécessaire (lien fourni ci-dessous). Clearfix permet de faire flotter les éléments enfants tout en conservant la hauteur de l'élément parent et la nature du bloc. Clearfix peut seulement être ajouté pour bloquer les éléments. Pour mon exemple, nous allons utiliser une disposition à 2 colonnes - une colonne #content et une colonne #barre - vous pouvez en faire deux, trois ou plus. Pour la div parente (qui contient les éléments #content et #sidebar), vous devrez ajouter un class = "clearfix".

Pour le contenu div, vous devez le faire flotter vers la gauche. Pour le div sidebar, vous aurez envie de flotter vers la droite.

Maintenant, le CSS:

#parentDiv { width: 750px; margin: 0 auto; } 
#parentDiv #content { float: left; width: 500px; } 
#parentDiv #sidebar { float: right; width: 200px; } 

Cela devrait produire une boîte 750px avec un élément de contenu sur la gauche et une barre latérale à droite avec 50px entre les deux éléments (750- (500 + 200) = 50).

---

flottant Module

Si c'est pas ce que vous vouliez, et cherche à produire un élément de module (visionneuse, fenêtre pop-up, etc.) à la place, cela est facile aussi.

Commencez par créer un div appelé #module. Mettez votre contenu dedans. Disons que vous voulez lui donner une largeur de 500px et vous voulez que la hauteur soit statique à 300px. Donc, nous ferions ce CSS:

#module { width: 500px; height: 300px; border: 1px solid #000; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -250px; z-index: 100; } 

Qu'est-ce qui se passe ici?

L'élément #module est en position: absolute. Cela signifie qu'il va flotter autour de la fenêtre et n'est pas contraint à son élément parent. Nous le positionnons à 50% de la gauche de la fenêtre et 50% de la partie supérieure, de sorte qu'il se trouve au milieu de la fenêtre. Les valeurs de pourcentage sont nécessaires car elles sont ajustées lorsque la fenêtre est redimensionnée. Sans la marge, le coin en haut à gauche de l'élément sera à 50% du haut et à 50% de la gauche, nous devons donc utiliser la marge pour le reculer de la moitié de sa largeur et la moitié de sa hauteur. Cela nous permettra d'avoir une boîte parfaitement centrée au milieu. L'index z est ajouté pour s'assurer que l'élément est au-dessus de tout autre élément, y compris, et d'autres éléments positionnés.

J'espère que cela aide.

---

Liens

• Clearfix: http://gist.github.com/550114

Answer 2

Ce genre de mise en page ne serait pas correct, à mon avis. La conception d'un élément doit être décrite dans cet élément particulier.