Outils pour utilisateurs

Outils du site


html:tp3

Exemples de mise en pages

Vous pouvez voir le résultat dans : arts mise en page

Mise en pages horizontale

C'est la mise en pages la plus simple à faire en HTML : tous les éléments sont positionnés en absolus. Mais attention, c'est grâce à un graphisme soigneusement construit que l'on peut l'employer.

Influence de la taille de police

Cette série d'images montre ce qui se passe quand la page s'affiche.

Le positionnement absolu peut donc être employé à condition que votre texte puisse « grandir »

Composition de la page

Fond de page

Une seule grande image est employée.
image-5.jpg
La couleur de fond continue l'image.

body {
  background: #4e4e4e url(images/hori_fond.jpeg) no-repeat top left;
}

Une division en absolu, recouvre l'ensemble de la page

<body>
  <div id="colonne_fond">
    ...
  </div>
</body>
#colonne_fond {
  position:absolute;
  left:0px;
  top:0px;
  width:5000px;
  height:614px;
}

Les images

Les images ont toutes un id utilisé pour les placer en absolus.
image-4.jpg

<div id="ludwig_">
    <img id="ludwig" src="images/ludwig.jpeg" alt="Ludwig Mies Van der Rohe" />
</div>
#ludwig_ {
  position: absolute;
  top: 100px;
  left: 702px;
}

Substitution de texte par des images

Le titre et la citation sont remplacés par des images (voir TP1).
image-3.jpg

<h1 id="titre">
    <span>Ludwig Mies Van der Rohe</span>
</h1>
#titre span {
  display: none;
}
#titre {
  position: absolute;
  top: 300px;
  left: 0px;
  width: 1400px;
  height: 103px;
  background-image: url(images/hori_ludwig_mies_van_der_rohe.gif);
}

Blocks de texte

Les paragraphes sont placés en absolus de la même façon que les images. Mais on ne spécifie pas leurs hauteurs. Le texte doit pouvoir « déborder » librement.
image-2.jpg

<p id="para1">En quelques années, ...</p>

On écrit une règle générale pour tous les paragraphes, car ils sont en majorités à la même hauteur.

p {
  margin: 10px;
  position: absolute;
  top: 300px; /* tous les paragraphes débutent à 300px du haut */
  width: 380px; 
}

Chaque paragraphe est placé individuellement par rapport à la gauche.

#para1 {
  left: 1400px;
}

Au besoin on peut spécifier la hauteur d'un paragraphe particulier.

<p id="para_ludwig">Less is more...</p>
 
#para_ludwig {
  top: 100px;
  left: 800px;
  margin: 0px 20px 0px 0px;
}

Positionnement du bas d'un élément

On finit par la mise en place des titres. C'est identique à la mise en place des paragraphes, sauf qu'on les place par rapport au « bas »


Cela est possible, car l'ensemble du document est dans une division en position absolue et de hauteur fixe. Dans le cas contraire, la position aurait été déterminée par le bas de l'affichage.
image-1.jpg
On remarquera au passage l'usage d'une ancre. Ainsi, l'on pourra faire des liens menant à un endroit précis du document.

<h2 id="le_culte_du_moins"><a name="le_culte_du_moins">Le culte du moins</a></h2>
h2 {
  margin: 0px;
  padding: 0px;
  position: absolute;
  bottom: 315px;
  margin-bottom: -0.3em;
}
#le_culte_du_moins {
  left: 1400px;
  width: 400px;
}

Le but est que le titre garde son alignement graphique, qui est défini par le bas des caractères (de ou la marge négative, en em, donc proportionnelle à la taille de caractère)

Mise en pages verticale

Elle se présente sous la forme d'une page centrée. Cela n'a rein d'obligatoire, mais cela permet de limiter naturellement la largeur des textes.

Philosophie

C'est la mise en page la plus naturelle pour le langage HTML. Les éléments se placent verticalement, les uns après les autres. On utilise les marge et remplissage (padding) pour les agencer et laisser la place à d'éventuels éléments placés en absolus

Composition de la page

Centrage de la page


On utilise deux divisions imbriquées pour obtenir cet effet

<body>
  <div id="colonne_fond">
    <div id="colonne">
        ...
    </div>
  </div>
</body>
body {
  background: #4e4e4e url(images/fond_colonne.gif) repeat-y top center;
}

Le fond de la page est une image de 1 pixel de haut. Elle est placée en haut et centrée. Elle se répète sur toute la hauteur

#colonne_fond {
  width: 799px;
  margin-left: -400px;
  position: absolute;
  top: 0px;
  left: 50%;
  background-image: url(images/fond_page.jpeg);
  background-repeat: no-repeat;
  background-position: bottom center;
}

On centre la colonne par une position à 50% et une marge négative de la moitié de sa largeur.

#colonne {
  width: 440px; /*799 -182 -177*/
  padding-left: 182px; 
  padding-top: 581px;
}

La seconde division comporte les remplissages. Ils servent à laisser la place nécessaire aux éléments placés en absolu.

Élément en absolu


L'image placée en absolu vient remplir l'espace laissé par le remplissage en haut de la division colonne.

<div id="photo1_">
    <img id="photo1" src="images/photo_titre.jpeg" alt="" />
</div>
#photo1_ {
  position: absolute;
  top: 0px;
  left: 0px;
}

Les coordonnées sont (0,0) car l'on se place par rapport au parent positionné en absolu (la colonne.)

Substitution de texte par des images


Idem précédemment

<h1 id="titre">
    <span>Ludwig Mies Van der Rohe</span>
</h1>
#titre {
  position: absolute;
  width: 602px;
  height: 142px;
  top: 312px;
  left: 172px;
  background-image: url(images/vert_ludwig_mies_van_der_rohe.gif);
  margin: 0px;
  padding: 0px;
}

Division pour créer des surfaces


Ces éléments sont positionnés en absolu comme vus précédemment, mais sur l'espace gauche.
On utilise la division qui contient l'image pour obtenir un fond noir.

<div id="ludwig_">
    <img id="ludwig" src="images/ludwig.jpeg" alt="Ludwig Mies Van der Rohe" />
</div>
#ludwig_ {
  width: 153px;
  height: 223px;
  background-color: black;
  position :  absolute;
  left: 0px;
  top: 452px;
}
#ludwig_ img {
  position: absolute;
  right: 0px;
  bottom: 8px;
}

On remarque l'usage d'un positionnement absolu dans un parent également en position absolue. Ainsi, on dit que l'image est en bas à droite de la division (bottom, right)


Le menu est placé en absolu. On utilise le pseudo sélecteur :hover , pour obtenir un effet au survole de la souris

<ul id="menu">
    <li><a href="#le_culte_du_moins">
        <span>Le culte du moins</span></a></li>
    <li><a href="#conservatisme_ou_modernite">
        <span>Conservatisme ou modernité</span></a></li>
    <li><a href="#les_style_decadents">
        <span>Les styles décadents</span></a></li>
</ul>

Les liens pointent vers des ancres de la même page.

#menu {
  list-style-type: none;
  position: absolute;
  left: 8px;
  top: 700px;
  margin: 0px;
  padding: 0px;
}
#menu a {
  color: #000;
  display: block;
  padding: 0px 8px;
  width: 130px;
  text-decoration: none;
  line-height: 0.8em;
}
#menu a:hover {
  background-color: #000;   
  line-height: 0.8em;
} 
#menu a span {
  font-size: small;
  background-color: #FFF;
}

Corps de la page


Le restant de la page se place naturellement. On met en forme les éléments P et H2.

<p id="para_ludwig"><span>Less is more. ...</span></p>
<h2 id="le_culte_du_moins"><a name="le_culte_du_moins">Le culte du moins</a></h2>
<p id="para1"><span>En quelques années, ...</span></p>
<div id="photo3_">
    <img id="photo3" src="images/photo3.jpeg" alt="" />
</div>

Remarque : on a ici une ancre sur la quelle pointe le menu.

p {
  padding: 0px 10px;
}
h2 {
  margin-top: 0px;
  padding-top: 60px;
  margin-bottom: 12px;
  width: 480px; /* pour titre sur une ligne*/
}

La citation

Elle est placée en exergue à gauche, sa particularité est d'être alignée avec le bas des paragraphes qui la contournent.

Les paragraphes sont décalés par l'usage d'une classe créée à cet effet.

<h2 id="conservatisme_ou_modernite" class="retrait">
    <a name="conservatisme_ou_modernite">Conservatisme ou modernité</a></h2>
<p id="para2" class="retrait"><span>Tout se passe ...</span></p>
<p id="para3" class="retrait"><span>Frédéric II écrivait ...</span></p>
<div id="photo4_" class="retrait">
    <img id="photo4" src="images/photo4.jpeg" alt="" />
</div>
<h2 id="les_style_decadents" class="retrait">
    <a name="les_style_decadents">Les Styles décadents</a></h2>
<p id="para4" class="retrait"><span>Les styles ...</span></p>
<blockquote id="less_is_more">
    <p><strong><q>Less is more</q></strong></p>
</blockquote>
.retrait {
  margin-left: 150px; /*class utilisé pour tous les éléments qui doivent laisser la place à la citation*/
}

La citation est placée en absolu, mais seule sa position gauche est spécifiée. Une marge négative la fait remonter.

<blockquote id="less_is_more">
    <p><strong><q>Less is more</q></strong></p>
</blockquote>
#less_is_more strong {
  display: none;
}
#less_is_more {
  width: 155px;
  height: 995px;
  background-image: url(images/vert_less_is_more.gif);
  position: absolute; 
  left: 107px; /*on ne fixe que la gauche pour qu'il reste à le même hauteur*/
  margin-top: -1005px; /*la même valeur(+10px) que la hauteur ainsi il part en haut*/
}

Marge en bas de page

La dernière image comporte une marge qui assure que le fond ne soit pas recouvert.

<p id="para5"><span>Avec le recul, ...</span></p>
<div id="photo2_">
    <img id="photo2" src="images/photo2.jpeg" alt="" />
</div>
#photo2_ {
  margin-bottom: 175px;
}

FIN.

html/tp3.txt · Dernière modification: 2008/04/24 22:00 (modification externe)