Comment construire une mise en page HTML5 et CSS3 avec positionnement absolu - mannequins

Vous pouvez utiliser le positionnement absolu pour créer une mise en page HTML5 et CSS3. Ce processus implique des compromis. Vous avez tendance à obtenir un meilleur contrôle de votre page avec un positionnement absolu (par rapport aux techniques flottantes), mais la mise en page absolue nécessite plus de planification et plus d'attention aux détails.

La technique de création d'une mise en page absolument positionnée est similaire à la technique flottante (au sens général).

Présentation de la mise en page absolue

Avant de commencer la mise en page avec positionnement absolu, il est bon de planifier l'ensemble du processus. Voici un exemple de la procédure à suivre:

1. Planifier le site.

   Avoir un dessin qui spécifie à quoi ressemblera la mise en page de votre site est très important. En positionnement absolu, votre planification est encore plus importante que les conceptions flottantes, car vous devez spécifier la taille et la position de chaque élément.

2. Spécifiez une taille globale.

   Ce type particulier de mise en page a une taille fixe. Créez un div contenant tous les autres éléments et spécifiez la taille de ce div (dans une unité fixe pour l'instant, généralement px ou em).

3. Créez le code HTML.

   La page HTML devrait avoir un div nommé pour chaque partie de la page (donc si vous avez des en-têtes, des colonnes et des pieds de page, vous avez besoin d'un div pour chacun).

4. Construire une feuille de style CSS.

   Les styles CSS peuvent être internes ou liés, mais comme le positionnement absolu a tendance à nécessiter un peu plus de balisage que le flottement, les styles externes sont préférés.

5. Identifiez chaque élément.

   Il est plus facile de voir ce qui se passe si vous affectez une bordure de couleur différente à chaque élément.

6. Rendez chaque élément absolument positionné.

   Définir la position: absolue dans le CSS pour chaque élément de la mise en page.

7. Spécifiez la taille de chaque élément.

   Définissez la hauteur et la largeur de chaque élément en fonction de votre diagramme. (Vous avez fait un diagramme, n'est-ce pas?)

8. Déterminez la position de chaque élément.

   Utilisez les attributs gauche et supérieur pour déterminer l'emplacement de chaque élément dans la mise en page.

9. Optimisez votre mise en page.

   Vous voudrez probablement ajuster les marges et les bordures. Vous devrez peut-être faire quelques ajustements pour que tout fonctionne.

Comment écrire le HTML

Le code HTML est assez simple:

absLayout. html

Mise en page avec positionnement absolu

Le fichier HTML appelle une feuille de style externe appelée absLayout. css.

Ajouter le CSS

Le code CSS est un peu long mais pas trop difficile:

/ * absLayout.css * / #all {border: 1px noir uni; largeur: 800px; hauteur: 600px; position: absolue; gauche: 0px; en haut: 0px;} #head {border: 1px vert uni; position: absolue; largeur: 800px; hauteur: 100px; en haut: 0px; gauche: 0px; text-align: center;} #menu {border: 1px rouge fixe; position: absolue; largeur: 140px; hauteur: 500px; haut: 100px; gauche: 0px; rembourrage-gauche: 5px; padding-right: 5px;} #content {bordure: 1px bleu uni; position: absolue; largeur: 645px; hauteur: 500px; haut: 100px; gauche: 150px; padding-left: 5px;}

Une mise en page statique créée avec un positionnement absolu a quelques caractéristiques importantes à garder à l'esprit:

• Vous êtes déterminé à tout positionner. Après avoir commencé à utiliser le positionnement absolu, vous devez l'utiliser sur votre site. Tous les éléments de la page principale nécessitent un positionnement absolu car le mécanisme d'écoulement normal n'est plus en place.

  Vous pouvez toujours utiliser la disposition flottante dans un élément avec une position absolue, mais tous vos éléments principaux (en-tête, colonnes et pied de page) doivent avoir une position absolue si l'un d'entre eux.

• Vous devez spécifier la taille et la position. Avec une disposition flottante, vous encouragez toujours une certaine fluidité. Le positionnement absolu signifie que vous prenez la responsabilité de la forme et de la taille de chaque élément dans la mise en page.

• Le positionnement absolu est moins adaptable. Avec cette technique, vous êtes à peu près lié à une largeur d'écran et une hauteur spécifiques. Vous aurez du mal à vous adapter aux tablettes et aux téléphones cellulaires.

• Toutes les largeurs et les hauteurs doivent s'ajouter. Lorsque vous déterminez la taille de votre écran, vous devez additionner toutes les hauteurs, largeurs, marges, marges et bordures, sinon vous obtiendrez des résultats étranges. Lorsque vous utilisez le positionnement absolu, vous êtes également susceptible de passer du temps de qualité avec votre calculatrice, en calculant toutes les largeurs et hauteurs.