Positionnement sur le web

De an
Révision de 6 mai 2019 à 21:57 par Aleray (discussion | contributions) (1 révision importée)

(diff) ← Version précédente | Voir la version courante (diff) | Version suivante → (diff)
Aller à : navigation, rechercher

Le modèle de positionnement proposé par HTML et CSS est très différent de celui que l'on peut trouver dans des logiciels de PAO type InDesign ou Scribus. La raison est simple: un site web peut être consulté sur de multiples dispositifs d'affichages. La taille est donc une inconnue, contrairement à l'imprimé où l'on met en page pour un format donné.

Le HTML est un flux de balises, et le comportement par défaut est de placer les balises les unes à la suite des autres.

Modèles de boite

Deux grands types:

  • en bloc (block)
  • en ligne (inline)

Le type block chasse les balises suivantes à la ligne, contrairement au type inline

Les navigateurs attribuent par défaut un type block aux éléments p, div, h1-6, ul, ol, dt, blockquote, figure, form etc. et un type inline aux éléments a, span, img, strong, em etc.

Erreur dans le widget Iframe

Un cas particulier: les tableaux

Fichier:De Campos 1962.gif

Haroldo de Campos, Untitled Poem, 1962

Erreur dans le widget Iframe

Modèles de positionement

static (defaut)

Voir [1]

relative

Erreur dans le widget Iframe

absolute

positionnement absolu dont l'origine est donnée par le document, ou bien l'élément parent si celui-ci n'a pas un positionnement static.

Fichier:Gameoflogicbig.jpg
Carrol Lewis' Game of Logic
Erreur dans le widget Iframe

fixed

Comme absolute, mais insensible au défilement car se réfère au viewport (la fenêtre)

Erreur dans le widget Iframe

Unités de mesure

Les principales valeurs sont :

  • px (absolu)
  • em (relatif)
  • % (relatif)


Erreur dans le widget Iframe

Ressources