Mise en page et positionnement

Dr N. BAME

1
 Structure d’une page
• Généralement, une page web est constituée :
• d'un en-tête (en haut),
• de menus de navigation (en haut ou sur les côtés),
• de différentes sections au centre,
• …
• d'un pied de page (tout en bas).

• HTML5 : de nouvelles balises HTML dédiées à la

structuration du site.

Dr N. BAME 2
Exemple

Dr N. BAME 3
Structure d’une page

Dr N. BAME 4
 Structuration avec HTML 5 (1)
<header>: l'en-tête
 L’élément <header> représente le bloc d’en-tête d’une
section ou d’une page.

 Il remplace avantageusement son homologue classique

<div id="header">, mais ne doit pas forcément être
considéré comme un élément unique dans le
document :
• toute section est susceptible de disposer de son <header>

<header>
Contenu de l’entête
</header>
• Généralement l’entête contient un logo, une bannière, le slogan
de votre site… Dr N. BAME 5
 Exemple
<header>
<img src="logo.png" alt="Le logo"/>
Ceci est mon entête
</header>

Dr N. BAME 6
 Structuration avec HTML 5 (2)
<footer>: le pied de page
<footer>
Contenu du pied de la page
</footer>

• L’élément <footer> regroupe les contenus du pied d’une

section ou d’un document (pied de page)
• Il est destiné à recueillir les informations concernant l’auteur,
les mentions légales, etc.

• Contrairement à l'en-tête, le pied de page se trouve le plus

souvent tout en bas de la page.

• Tel <header>, l’élément <footer> peut apparaître à divers

endroits du document
Dr N. BAME 7
 Exemple
<footer>
Auteur : RONE Sarl Contenu du pied de la page

</footer>

Dr N. BAME 8
 Structuration avec HTML 5 (3)
<nav>: menus de navigation
<nav>
menu de navigation
</nav>
• La balise <nav> doit regrouper tous les liens du menu de
navigation du site.
• Généralement, le menu est réalisé sous forme de liste à
puces à l'intérieur de la balise <nav>:

Dr N. BAME 9
<nav>
Exemple
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="formations.html">Formations</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

10
Dr N. BAME
 Structuration avec HTML 5 (4)
<section>: une section de page
<section>
Contenu de la section
</section>
• La balise <section> permet de regrouper des
contenus en fonction de leur thématique.
• Elle contient généralement une portion du contenu
au centre de la page.
• On peut avoir plusieurs sections dans une page.

Dr N. BAME 11
 Exemple
<section>
<p>….</p>
<p>….</p>
</section>

Dr N. BAME 12
 Structuration avec HTML 5 (5)
<aside>: informations complémentaires
<aside>
informations complémentaires
</aside>

• La balise <aside> est utilisée pour contenir des

informations complémentaires au document.
• Ces informations sont généralement placées sur le côté
• Comme avec les sections, il peut y avoir plusieurs blocs
<aside> dans la page.

Dr N. BAME 13
 Exemple
<aside>
<img src="logo.png" …/>
Informations Supplémentaires sur la page
</aside>

Dr N. BAME 14
 Structuration avec HTML 5 (6)
<article>: un article indépendant
• La balise <article> sert à englober une portion
généralement autonome de la page.
• C'est une partie de la page qui pourrait ainsi être
reprise sur un autre site, comme un article de
journal, de blog ou de forum
<article>
Contenu
</article>

Dr N. BAME 15
<article …> Exemple
…
</article>
<article …>
…
</article>

Dr N. BAME 16
Exemple complet

Dr N. BAME 17
 Arrangement des éléments : block, inline
• En HTML, la plupart des balises peuvent se ranger dans l'une
ou l'autre des deux catégories ci-dessous :

 Les balises de type inline : sont des balises qui peuvent être
placées les une après les autres sur une même ligne. c'est le cas
par exemple des liens <a></a>.

 Les balises de type block : sont des balises qui ne peuvent pas être
rangées sur une même ligne.
c'est le cas par exemple des paragraphes <p></p>.

• Une balise block crée automatiquement un retour à la ligne avant

et après.
• Certaines balises de type block pourraient contenir d’autres
balises de type block ou inline.
• une balise de type inline se trouve obligatoirement à l'intérieur
d'une balise block. Dr N. BAME 18
 Quelques exemples

Balise block Balise inline

<p> <em>
<footer> <strong>
<h1> <a>
<h2> <mark>
<section> <img/>
<div> <span>

Dr N. BAME 19
 Exemple : inline
<a href= "page1.html"> Vers page1</a>
<a href= "page2.html"> Vers page2</a>
<a href= "page3.html"> Vers page3</a>
<img src= "logo.png" alt="Le logo"/>
<a href= "http://www.ucad.sn"> UCAD</a>

Dr N. BAME 20
 Exemple : block
<h1> Mon titre </h1>
<p> Mon premier paragraphe </p>
<p> Mon deuxième paragraphe </p>

Dr N. BAME 21
 Faire flotter un élément (1)
• Pour aligner des éléments les uns par rapport aux
autres, on peut les faire « flotter ».

• La propriété float permet de faire flotter un élément

avec le valeurs : left, right, none ou inherit.

• Un élément flottant va sortir du schéma naturel de

la page web pour venir se placer contre le bord
gauche ou droit de l’élément qui le contient ou contre
le bord de la page.

• Lorsque l’on fait flotter un élément, les éléments

après l’élément flottant vont venir se positionner à
côté de celui-ci. Dr N. BAME 22
 Exemple
<a href= "page1.html"> Vers page1</a>
<a href= "page2.html"> Vers page2</a>
<a href= "page3.html"> Vers page3</a>
<img src= "logo.png" alt="Le logo"/>
<a href= "http://www.ucad.sn"> UCAD</a>

Dr N. BAME 23
 Exemple
img[src="logo.png"]
{
float : left;
width : 8%;
border : 2px blue dotted
}

Dr N. BAME 24
 Faire flotter un élément (2)
• Généralement, on utilisera plutôt la propriété float sur des
éléments de type inline comme des images par exemple.

• Si l’on veut qu’un élément suivant un élément flottant vienne

se placer sous cet élément flottant, il faudra utiliser la
propriété clear.

• Trois valeurs possibles :

• left : l’élément va se placer en dessous après un float left ;
• right : l’élément va se placer en dessous après un float right ;
• both : l’élément va se placer en dessous après un float left ou un
float right.

• Cette propriété peut être la cause de problème

d’affichages lorsqu’elle est mal utilisée sur des éléments de
type block. Dr N. BAME 25
 Exemple
p
{
…
clear : left
}

Dr N. BAME 26
 Transformation d’éléments: display
 La propriété display permet de transformer un élément d’un
type (inline, block) vers un autre type

• Par exemple display permet d’imposer aux liens (originellement

de type inline) d'apparaître sous forme de blocs.
a
{display: block;}

 Quatre valeurs possibles

• inline : les éléments se placent les uns à côté des autres.
• block : les éléments se placent les uns en-dessous des autres et
peuvent être redimensionnés.
• inline-block : les éléments sont positionnés les uns à côté des
autres (comme les inlines) mais ils peuvent être redimensionnés
(comme les blocs).
• none : les éléments ne sont pas affichés.
Dr N. BAME 27
 display : inline (1)
p
{
font-size : 70%;
text-align : justify;
width : 60%;
}

Dr N. BAME 28
 display : inline (2)
p
{
font-size : 70%;
text-align : justify;
width : 60%;
display :inline;
}

Dr N. BAME 29
 display : block (1)
<a href= "page1.html"> Vers page1</a>
<a href= "page2.html"> Vers page2</a>
<a href= "page3.html"> Vers page3</a>
<img src= "logo.png" alt="Le logo"/>
<a href= "http://www.ucad.sn"> UCAD</a>

Dr N. BAME 30
 display : block (2)
a
{
display : block;
}

Dr N. BAME 31
 display : inline-block
• La valeur inline-block ne peut être donné à un
élément que grâce à la propriété display.

• Il va être un mix des types inline et block :

• l’élément en soi (contenu et boîtes) se comporte
comme un type block
• tandis que le contenu seulement se comporte comme
un type inline.

Dr N. BAME 32
<section>
Exemple (1)
<p>
…
</p>
<p>
…
</p>
</section>

Dr N. BAME 33
 Exemple (2)
section p
{
…
display : inline-block;
}

Dr N. BAME 34
 Alignement vertical : vertical-align
• La propriété vertical-align permet de modifier
l'alignement vertical des éléments.
• Valeurs possibles
– baseline: aligne la base de l'élément avec celle de
l'élément parent (par défaut) ;
– top: aligne en haut ;
– middle: centre verticalement ;
– bottom: aligne en bas ;
– (valeur en px ou %) : aligne à une certaine distance de la
ligne de base (baseline).

Dr N. BAME 35
 Exemple
#p1
{
vertical-align : top;
}

Dr N. BAME 36
 Positionnement : position
• La propriété position permet de définir l’emplacement
d’éléments HTML dans une page.

• Valeurs possibles:
• static : valeur par défaut, ne change pas la position de base,
• absolute : permet de positionner l’élément n’importe où dans la
page;
• fixed : permet de positionner l’élément n’importe où dans la
page.
• De plus, l’élément reste visible si on descend ou on remonte le long de
la page ;
• relative : permet de replacer un élément relativement par
rapport à son positionnement par défaut ;
• inherit : l’élément hérite des propriétés de son parent.

• Notez qu’un positionnement absolute sur un élément

annule la propriété float si Dron lui en a appliqué une.
N. BAME 37
Positionnement : top, right, bottom,left
• Généralement la propriété position est utilisée avec
au moins une des quatre propriétés ci-dessous qui
sont exprimées en px ou %:
• left: position par rapport à la gauche,
• right: position par rapport à la droite,
• top: position par rapport au haut,
• bottom : position par rapport au bas.

Dr N. BAME 38
#p1
Exemple
{
position : relative;
bottom : 50px;
left : 15px;
}

Dr N. BAME 39
 z-index
• Lors de la création du design de pages web, il peut arriver que
deux éléments se chevauchent selon certaines circonstances.

• Il peut alors être utile de pouvoir indiquer quel élément doit

apparaître au dessus de quel autre en cas de chevauchement.

• La propriété z-index permet d’indiquer quel élément doit être au

dessus de quel autre en cas de conflit. Elle fonctionne avec tous les
éléments positionnés.
 Un élément positionné est un élément auquel on a appliqué la
propriété position avec une valeur soit absolute, soit relative, soit
fixed.

• La propriété z-index prend des valeurs numériques

• En cas de conflit l'élément ayant la valeur de z-index la plus élevée

sera placé par dessus les autres.
Dr N. BAME 40
 Exemple
section #p1 section #p2
{ {
position:relative; background-color:silver;
left:15px; position:relative;
} left:15px;
}

Dr N. BAME 41
 Exemple
section #p1 section #p2
{ position:relative; { background-color:silver;
left:15px; position:relative;
z-index:5; left:15px;
} z-index:4;
}

Dr N. BAME 42