Mise en page, HTML Chien
Mise en page avec CSS est facile. Vous prenez juste un morceau de votre page et fourrer partout où vous choisissez. Vous pouvez placer ces morceaux absolument ou par rapport à un autre morceau.
placement
La propriété de position est utilisé pour définir si une boîte est absolue, relative, statique ou fixe:
- statique est la valeur par défaut et rend une boîte dans l'ordre normal des choses, telles qu'elles apparaissent dans le code HTML.
- relative est un peu comme statique mais la boîte peut être décalée par rapport à sa position d'origine avec les propriétés supérieures. droite. en bas et à gauche.
- absolu tire une boîte hors du flux normal du HTML et le livre à un monde qui lui est propre. Dans ce monde peu fou, la boîte absolue peut être placé n'importe où sur la page en utilisant le dessus. droite. en bas et à gauche.
- fixe se comporte comme absolu. mais il positionnera absolument une boîte en référence à la fenêtre du navigateur, par opposition à la page Web, de sorte que les boîtes fixes doivent rester exactement où ils sont à l'écran même lorsque la page défile.
Quand on parle de boîtes en position absolue étant placés partout sur la page, ils sont en fait encore relativement positionnés sur les bords de la page. Et d'ajouter un autre retour en arrière, la page ne fait pas être le conteneur - une boîte sera « absolument » positionné par rapport à une boîte contenant positionné non statique. Il suffit de ne pas tenir compte que pour l'instant, mais ...
Disposition en utilisant le positionnement absolu
Vous pouvez créer une mise en page traditionnelle à deux colonnes avec le positionnement absolu si vous avez quelque chose comme le code HTML suivant:
On nous vieux skool et en utilisant des éléments div afin de ne pas introduire trop de nouvelles choses, mais est plus sexy Sectionnement.
Et si vous appliquez le CSS suivant:
Comment bêtement facile! Et vous n'êtes pas limité à cette approche à deux colonnes. Avec un positionnement intelligent, vous pouvez organiser autant de blocs que vous le souhaitez. Si vous voulez ajouter une troisième colonne, par exemple, vous pouvez ajouter un morceau « Navigation2 » au code HTML et changer le CSS:
Le seul inconvénient de boîtes en position absolue est que parce qu'ils vivent dans un monde de leur propre, il n'y a aucun moyen de déterminer avec précision où ils se terminent. Si vous deviez utiliser les exemples ci-dessus et toutes vos pages avaient de petites barres de navigation et de grandes zones de contenu, vous seriez d'accord, mais, en particulier lors de l'utilisation des valeurs relatives pour les largeurs et tailles, vous avez souvent à abandonner tout espoir de placer quoi que ce soit, comme un pied de page, en dessous de ces cases. Si vous voulez faire une telle chose, d'une façon serait de flotter vos morceaux, plutôt que de les positionner absolument.
Une boîte flottante se déplacera à droite ou à gauche d'une ligne, avec un contenu qui entoure coule autour d'elle.
Flottante est normalement utilisé pour déplacer des morceaux plus petits autour de l'intérieur d'une page, telles que pousser un lien de navigation vers la droite d'un conteneur, mais il peut également être utilisé avec de plus gros morceaux, tels que des colonnes de navigation.
En utilisant float. vous pouvez flotter: gauche ou float: right.
Travailler avec le même code HTML, vous pouvez appliquer le CSS suivant:
Ensuite, si vous ne voulez pas la case suivante pour envelopper autour des objets flottants, vous pouvez appliquer la propriété claire:
- clair: gauche écraseront gauche boîtes flottaient
- clair: droit écraseront droit des boîtes flottaient
- clear: both effacera à la fois à gauche et à droite des boîtes flottaient.
Donc, si, par exemple, que vous vouliez un pied de page dans votre page, vous pouvez ajouter un morceau de HTML ...
... puis ajoutez le CSS suivant:
Et vous l'avez. Un pied de page qui apparaîtra sous toutes les colonnes, quelle que soit la longueur de l'un d'eux.