Vous pouvez utiliser le positionnement absolu pour créer anHTML5 et CSS3 mise en page. Ce processus implique des compromis. Vous avez tendance à avoir un meilleur contrôle de votre page avec le positionnement absolu (par rapport aux techniques flottants), mais la disposition absolue exige davantage de planification et une plus grande attention aux détails.

La technique de création d'un agencement en position absolue est similaire à la technique flottante (au sens général).

Vue d'ensemble de la mise en page absolue

Avant de commencer à mettre votre page avec le positionnement absolu, il est bon de planifier l'ensemble du processus. Voici un exemple de la façon dont le processus devrait aller:

1. Planifiez le site.

   Avoir un dessin qui indique comment disposition de votre site va regarder est vraiment important. En positionnement absolu, votre planification est encore plus important que les modèles flottants parce que vous aurez besoin de spécifier la taille et la position de chaque élément.

2. Spécifiez une taille globale.

   Ce type particulier de mise en page est de taille fixe. Créer un tous div abritant tous les autres éléments et spécifier la taille de cette div (dans une unité fixe pour l'instant, le plus souvent px ou em).

3. Créer le code HTML.

   La page HTML doit avoir un div nommé pour chaque partie de la page (si vous avez têtes, des colonnes et des pieds de page, vous devez un div pour chaque).

4. Construire une feuille de style CSS.

   
   
   
   
   

   Les styles CSS peuvent être internes ou liés, mais parce que le positionnement absolu tend à exiger un peu plus de balisage flottant, styles externes sont préférés.

5. Identifier 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. Faire de chaque élément en position absolue.

   Régler position: absolute dans le CSS pour chaque élément dans la mise en page.

7. Indiquez la taille de chaque élément.

   Met le hauteur et largeur de chaque élément selon votre diagramme. (Tu fait faire un schéma, non?)

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

   Utilisez le gauche et haut attributs pour déterminer où chaque élément va dans la mise en page.

9. Tune-up de votre mise en page.

   Vous voudrez probablement pour ajuster les marges et les frontières. Vous pouvez avoir besoin de faire quelques ajustements à faire fonctionner le tout.

Comment écrire le HTML

Le code HTML est assez simple:

Mise en position absolue

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

Ajouter la CSS

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

/ * AbsLayout.css * / # tous {border: black-largeur 1px solid: 800px; hauteur: 600px; position: absolute-left: 0px; top: 0px;} # {border tête: vert position 1px solid: absolute- largeur: 800px; hauteur: 100px; top: 0px; gauche: 0px; text-align: center -} # menu {border: 1px solid rouge-position: absolute-width: 140px; hauteur: 500px; top: 100px; gauche: 0px; padding-left: 5px; padding-right: 5px;} # contenu {border: bleu position 1px solid: absolue-width: 645px; hauteur: 500px; top: 100px; gauche: 150px; padding-left: 5px; }

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

• Vous êtes engagé à placer tout. Après vous commencez à utiliser le positionnement absolu, vous devez utiliser tout au long de votre site. Tous les principaux éléments de la page nécessitent un positionnement absolu parce que le mécanisme de flux normal est plus en place.

  Vous pouvez toujours utiliser la mise en page flottante à l'intérieur un élément avec la position absolue, mais tous vos éléments principaux (titre, colonnes, et semelle) ont besoin d'avoir une position absolue si l'un d'entre eux fait.

• Vous devez spécifier la taille et la position. Avec une mise en page flottante, vous êtes toujours encourageant d'une certaine quantité de fluidité. Des moyens de positionnement absolu vous prenez la responsabilité à la fois la forme et la taille des chaque élément dans la mise en page.

• Le positionnement absolu est moins adaptable. Avec cette technique, vous êtes assez bien lié à une largeur de l'écran spécifique et la hauteur. Vous aurez du mal à adapter aux tablettes et les téléphones portables.

• Toutes les largeurs et les hauteurs doivent ajouter. Lorsque vous déterminez la taille de votre écran, toutes les hauteurs, largeurs, marges, rembourrage, et les frontières ont à ajouter, ou 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, déterminer toutes les largeurs et les hauteurs.