Sie sind auf Seite 1von 148

CSS

CSS

Le HTML est n en 1991 et CSS en 1996


Le World Wide Web a introduit les feuilles de
styles en cascade pour complter la langage
HTML.
Les CSS permettent de grer l'apparence des
documents.
Les feuilles indiquent aux balises HTML leur
comportement ou style.
Diffrentes versions:

CSS
CSS
CSS
CSS

1;
2.0 ;
2.1 ;
3.

A quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la


couleur de votre texte.
Lui qui vous permet de slectionner la police
utilise sur votre site.
Lui encore qui permet de dfinir la taille du texte,
les bordures, le fond
Et aussi, c'est lui qui permet de faire la mise en
page de votre site. Vous pourrez dire : je veux
que mon menu soit gauche et occupe telle
largeur, que l'en-tte de mon site soit cal en
haut et qu'il soit toujours visible, etc.

Les styles

Un style rassemble tous les attributs que


l'on peut appliquer des types de textes
similaires.

Attribut : taille,format
Textes similaires : titres, en-ttes, pied de
page

Les styles donnent un nom commun des


groupes d'attributs

Avantage du CSS
Une CSS est constitue de code spar qui
amliore les possibilits du HTML en
permettant de redfinir la faon dont
fonctionnent les balises HTML existantes.
L'avantage par rapport la cration de
nouvelles balises HTML repose sur le fait
qu'en modifiant la dfinition d'une seule
rgle CSS centralise, l'apparence de
toutes les balises contrles par cette
rgles est modifie.

HTML et CSS
Pour

matriser laspect final lcran on


utilise un autre langage que le HTML: le
langage CSS
version actuelle : CSS3

CSS = Cascading Style Sheets


= feuilles de style en cascade

Introduction et
Avantages

CSS : Cascading Style Sheets


Langage de prsentation pour des documents
HTML et XML
Sparer le contenu de la prsentation
Homognisation des pages Web dun mme site
CSS3 adapt pour les pages multimdias (vido,
audio, )

La creation de style
La

dclaration de style se fait dans l'entte de


la page HTML, encadre par les balises
<STYLE> et </STYLE>

Il

y a 3 possibilits pour affecter un style :

modifier le style d'une balise existante


crer une nouvelle classe de style
affecter l'attribut style

HTML et CSS
Trois

mthodes d'application de style CSS:

ajout d'un attribut "style" dans une balise


donne

ajout d'une section <style> au dbut du


document html : s'applique aux balises du
document courant

ajout d'une feuille de style externe


(monstyle.css) lie une ou plusieurs pages
html

Dfinition de rgles
identiques pour
Liste
de slecteurs
plusieurs
basiles
spars par les virgules
Proprit

h1,h2,h3,p

Valeur

font-size: 12px;}
Dfinition

margin-top:

25px;}

Les balises existantes


Dans

l'exemple du transparent suivant, vous


avez la syntaxe pour affecter la police arial
en 12 points toutes les cellules des
tableaux d'une page

La police dfinit la forme, la taille et la couleur des


caractres

Exemple
<HTML>
<HEAD>
<TITLE>Exemple de table</TITLE>
</HEAD>
<BODY BGCOLOR=#fffeac TEXT=#0a0a8a LINK=#ff1614 VLINK=#9414cb>
<TABLE BORDER=6 CELLSPACING=12 CELLPADDING=10 WIDTH=80%
HEIGHT=100%>
<TR>
<TD COLSPAN=2 ALIGN=RIGHT>case 1-1 sur deux colones </TD>
<TD WIDTH=50% ALIGN=CENTER>case1-3 </TD>
</TR>
<TR>
<TD ROWSPAN=2>case 2-1 sur deux lignes </TD>
<TD>case 2-2 </TD></TR> <TR><TD>case 3-2 </TD>
<TD>case 3-3 </TD></TR>
</TABLE>
</BODY>
</HTML>

Les balises existantes


Dans

l'exemple prsent, toutes les


cellules TD auront comme style par
dfaut Arial 12pt
On peut modifier ainsi toutes les balises
existantes
<HTML>
<HEAD>
<STYLE>
TD {font-family:arial;font-size:12pt}
</STYLE>
</HEAD>
<BODY> ... </BODY></HTML>

Les balises existantes


Exercice
Compltez

la page prcdente
avec du code html et vrifiez que
le style est bien pris en compte

Le CAS particulier de la
balise de lien A
La

balise <A> est particulire, car elle peut


tre drive selon l'action du visiteur

On

peut donc vouloir des apparences


diffrentes de cette balise suivant que:

lon passe dessus,


que lon clique dessus
ou pour indiquer quelon a dj visit ce lien

Le cas particulier de la
balise de lien A
On

obtient ainsi 3 balises A


A:hover {text-decoration:underline}
A:active {color:red}
A:visited {color:green}

Avec

cette dclaration, le
texte de lien

est soulign au passage de la souris,


devient rouge sur un clic,
reste vert pour indiquer que ce lien a t
visit.

Le cas particulier de la
balise de lien A
Exercice
compltez

la prcdente page
html avec des liens (balise A) et
ajoutez y le style ci-dessus

HTML et CSS
attribut

"style" dans une balise donne

<BODY>
<H1 style="color:blue">La page personnelle de Bach</H1>
<P >Jean-Sbastien Bach tait un compositeur prolifique.
</BODY>

ne s'applique qu' cette


section H1

Exemple
<BODY>
<H2 STYLE="font-size:26pt;color:red;text-align: center;">
titre avec un style</H2>
<H2>Titre sans style</H2>
</BODY>

Rsultat

Exemple de CSS en
entte
<HTML> <HEAD> <TITLE>CSS en entte</TITLE>
<STYLE TYPE="text/css">
h2 {font-size : 26pt ;color : red ;text-align : center;}
</STYLE>
</HEAD>
<BODY>
<H2>titre avec un style</H2>
<H2>Titre tjrs avec un style</H2>
</BODY>
</HTML>

HTML et CSS
section

<style> s'appliquant aux balises du


document courant
<HEAD>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>

L'indication de style porte


sur tous les titres de
niveau 1 (Heading 1) de
la page html

</HEAD>
<BODY>
<H1>La page personnelle de Bach</H1>

HTML et CSS
feuille

de style externe (monstyle.css)


lie une ou plusieurs pages html.
<head>
<title>page lie monstyle.css </title>
<link href="monstyle.css" rel="stylesheet" type="text/css">
</head>

indique que cette page web utilise les


styles du fichier monstyle.css

HTML et CSS
feuille

de style externe (monstyle.css)


lie une ou plusieurs pages web.
body {

slecteur (ici une balise)

background-color: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
valeur
color: #336699;

proprit

}
a{
font-size: 11px;
color: #336600;
}

CSS en fichier li
Les styles sont dans un fichier spar
On prcise dans l'entte quel fichier li utiliser
pour le style avec :

<LINK REL="STYLESHEET"HREF="style.css">

Dans le fichier de style les rgles des styles


sont dfinies selon le modle donn
prcdemment
On utilise l'extension ".css" pour les fichiers
de style

Exemple de CSS en
fichier li
h2 {

<HTML><HEAD>

<LINK REL="STYLESHEET" HREF="style.css">

font-size:25pt;

</HEAD>

font-family:arial;

<BODY>

color:red;

<H2>titre avec un style</H2>


<H2>Titre tjrs avec un style</H2>
</BODY>
</HTML>

text-align:center;
}

Du HTML au CSS : Principe


.HTML

<HTML>
<HEAD>
<TITLE>Le CSS</TITLE>

<link
<linkrel="stylesheet"
rel="stylesheet"type=
type="text/css"
"text/css"href=
href="fichier.css">
"fichier.css">
</HEAD>
<BODY>
<H1>Introduction</H1>
...
</BODY>
</HTML>
@charset "iso-8859-1";

Le Rsultat
Introduction

H1 {
Slecteur simple
color : red ;
}
Fichier.CSS

Quelle mthode choisir ?

La meilleure mthode est celle qui dfini un fichier de style


externe.
Pour le moment, vous faites vos tests sur un seul fichier HTML.
Cependant, votre site sera plus tard constitu de plusieurs pages HTML,
on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML,
il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si
demain vous changez d'avis, par exemple si vous voulez que vos
paragraphes soient crits en rouge et non en bleu, il faudra modifier
chaque fichier HTML un un, comme le montre la figure suivante

Quelle mthode choisir ?

Si vous travaillez avec un fichier CSS externe,


vous n'aurez besoin d'crire cette instruction
qu'une seule fois pour tout votre site,comme le
montre la figure suivante.

Structure dune feuille


de style

Schmatiquement, une feuille de style


CSS ressemble donc cela :

Des commentaires dans


du CSS

Tapez /*, suivi de votre commentaire, puis */


pour terminer votre commentaire.
Vos commentaires peuvent tre crits sur une ou
plusieurs lignes. Par exemple :
/*
style.css
--------Par Etudiants de SIR
*/
p{
color: blue; /* Les
paragraphes seront
en bleu */
}

Les classes et les Id


Exemple:
p{color: blue;}

Cetexemple implique par exemple que TOUS les


paragraphes possdent la mme prsentation (ici, ils seront
donc tous crits en bleu).

Comment faire pour que certains paragraphes seulement


soient crits d'une manire diffrente ? On pourrait
placer le code CSS dans un attribut style sur la balise que
l'on vise (cette technique n'est pas recommand (il vaut
mieux utiliser un fichier CSS externe).

Pour rsoudre le problme, on peut utiliser ces attributs


spciaux qui fonctionnent sur toutes les balises :

l'attribut class ;
l'attribut id.

La classe

Une classe est un style indpendant que l'on peut appliquer


toute balises HTML.

Chaque classe se voit attribue un nom unique spcifi ensuite


dans la ou les balises HTML qui l'utilis par le biais de l'attribut
style.

Les rgles de classe peuvent tre dfinies entre les balises


<style> </style> dans l'en-tte ou dans un fichier CSS en ligne*.

Elle permettent aux fonctions Javascript d'identifier un objet


unique, elles sont trs utilises en DHTML.

Les id sont comme les classes dfinit dans l'entte ou exportes d'un
fichier CSS externe ou lis au document HTML.

Syntaxe gnrale d'une


classe CSS

Le slecteur de classe permet de dfinir un


style applicable toute balise HTML.

Une sous class possde un nom unique


prcd dun point.

Syntaxe gnrale d'une


classe CSS

Les styles d'une balise

Slecteur
de classe

.copy

Proprit

Valeur

{ font-size: 12px;}
Dfinition
utilisation <p class="copy"> </p>

Cration de classes
Modifier

les balises existantes n'est pas suffisant


quand il s'agit d'affecter un style une partie de
texte.
Par exemple dans cette page, les parties de code
sont en police courier vert, grce la classe de
style "code" qui est dclare ainsi :
<HTML><HEAD>
<STYLE>

.code {font-family:courrier;color:green}

</STYLE>
</HEAD>
Le

point devant code indique la cration d'une


nouvelle classe appele code.

Balises

span et div

<span> </span> : c'est une balise de type inline, c'est-dire une balise que l'on place au sein d'un paragraphe de
texte, pour slectionner certains mots uniquement.
Les balises <strong> et <em> sont de la mme famille.
Cette balise s'utilise donc au milieu d'un paragraphe.

<div> </div> : c'est une balise de type block, qui


entoure un bloc de texte. Les balises <p>, <h1>, etc.
sont de la mme famille. Ces balises ont quelque chose en
commun : elles crent un nouveau bloc dans la page et
provoquentdonc obligatoirement un retour la ligne.
<div> est une balise frquemment utilise dans la
construction d'un design,

Cration de classes
Pour

affecter ce style une portion de


texte, on crit :
<SPAN class="code">texte mis en forme</SPAN>

La

balise <SPAN> permet d'affecter un


groupe de mot une classe de style.

Il

est aussi possible d'affecter ce style


une balise existante. Pour donner le style
de la classe code une cellule de tableau,
on crit :
<TD class="code">cellule en police courrier vert</TD>

Exercice
Crez

une page html qui dfinit et utilise la


classe de style code telle quelle est dfinie
prcdemment.
Vrifiez galement que la dclaration de
style directement dans les balises SPAN
fonctionne.

Exemple : sous class


indpendante

.nav {color:red;}
<ul>
<ul>

Factorisation
importante

</ul>
</ul>

<li
<liclass="nav">nom</li>
class="nav">nom</li>
<li
<liclass="nav">prenom</li>
class="nav">prenom</li>
<li
<liclass="nav">age</li>
class="nav">age</li>

<ul
<ulclass="nav">
class="nav">
<li>nom</li>
<li>nom</li>
<li>prenom</li>
<li>prenom</li>
<li>age</li>
<li>age</li>
</ul>
</ul>

Classes de style - attribut


CLASS

On peut dfinir diffrentes "classes"

une classe particulire pour un lment particulier


(<h1>, <p>, <cite>, )

une classe gnrale associe un lment


particulier

P {font-size: 16pt; color: red;}


s'applique tous les paragraphes

une classe particulire pour n'importe quelle balise

P.bleu {color: blue;}


P.i {font-style: italic;}
s'applique aux paragraphes qui se revendiquent de la
classe "bleu" ou "i"

.vert {color: green;}


s'applique toute balise revendiquant la classe "vert"

attention ! on ne peut pas cumuler des classes

Un exemple
<!-- 1.html -->
<html><head>
<style type="text/css">
.vert {color: green;}
P {font-size: 16pt; color: red;}
P.bleu {color: blue;}
P.italic {font-style: italic;}
H1.titre1 {border: solid; border-width: 1;
text-align: center; color: cyan;}
</style>
</head><body>
...
</body></html>

hritage sous class


indpendante

.nav li{color:red;}

<ul
<ulclass="nav">
class="nav">
<li>nom</li>
<li>nom</li>
<li>prenom</li>
<li>prenom</li>
<li>age</li>
<li>age</li>
</ul>
</ul>

li sera enfant
de la classe .nav

Cela va affecter tous les


lments li dans la classe
.nav

Ecriture

.nav li{color:red;}
<ul>
<ul>
<div
<divclass="nav">
class="nav">
<li>nom</li>
<li>nom</li>
<li>prenom</li>
<li>prenom</li>
<li>age</li>
<li>age</li>
</div>
</div>
</ul>
</ul>

suite

.nav ul ul{color:red;}
<div
<divclass="nav">
class="nav">
<ul>
<ul>
<li>nom
<li>nom

</div>
</div>

</ul>
</ul>

<ul>
<ul>
<li>dupont</li>
<li>dupont</li>
<li>martin</li>
<li>martin</li>
</ul>
</ul>

</li>
</li>
<li>prenom
<li>prenom
<ul>
<ul>
<li>denis</li>
<li>denis</li>
<li>gerard</li>
<li>gerard</li>
</ul>
</ul>
</li>
</li>

<HTML>
<HEAD>
<TITLE>Exemple de table</TITLE>
<style>
.nav ul ul {color:red;}
</style>
</HEAD>
<BODY >
<div class="nav">
<ul>
<li>nom
<ul>

</div>
</BODY>
</HTML>

<li>dupont</li>
<li>martin</li>
</ul>

</li>
<li>prenom
<ul>
<li>denis</li>
<li>gerard</li>
</ul>
</li>
</ul>

Sous class dpendante

<div class="nav">

</div>

Une sous class possde un nom unique prcd dun point.


Dans cet exemple, on crer la sous class appele niveau1 que lon associe la balise html ul
(permet de crer des listes).
Pour lutiliser, dans le body on utilise lattribut class dans la balise ul.
On obtient ainsi une liste avec des puces carres et le texte est bleu.

Bilan

.HTML

<BODY>

<ul class="niveau1">
<li>Exemple 1</li>
<li>Liste simple</li>
</ul>
<div class="italic_rouge">
Exemple 2
</div>

Le Rsultat
Exemple 1
Liste simple

</BODY>
Sous Class dpendante

Sous Class indpendante


.CSS

ul.niveau1 {
list-style-type:square;
color:blue;
}

.CSS

.italic_rouge {
color:red;
font-style:italic;
}

Pour le 2nd exemple, italic_rouge est une sous classe indpendante cette fois car on peut
lemployer avec nimporte quel balise html, ici on utilise la balise div qui permet de regrouper
plusieurs lments html. On obtient finalement un texte italique rouge.
Il existe un dernier type de slecteur, le slecteur ID.

Du HTML au CSS : Slecteurs


.HTML

<BODY>

<ul class="niveau1">
<li>Exemple 1</li>
<li>Liste simple</li>
</ul>
<div class="italic_rouge">
Exemple 2
</div>

Le Rsultat
Exemple 1
Liste simple

Exemple 2

</BODY>

Sous Class dpendante

Sous Class indpendante


.CSS

ul.niveau1 {
list-style-type:square;
color:blue;
}

.CSS

.italic_rouge {
color:red;
font-style:italic;
}

ID
Trs utile pour spcifier des rgles qui ne
s'appliquent qu' un lment avec un ID
unique donn dfini par l'attribut id en
HTML.
Pas plus d'un lment ne doit avoir un ID
donn (rgle valable surtout en javascript)
utilis avec Javascript pour reprer et
traiter un lment particulier.

Syntaxe gnrale
d'une ID

des styles UNIQUE indpendants de toute


balise HTML

Slecteur
d'ID

Proprit

#area { font-size:

Valeur

12px;}
Dfinition

utilisation <p id="area"> </p>

Du HTML au CSS :
Slecteurs
.HTML

<BODY>

<div id="bloc_unique">
Bloc A
</div>
</BODY>

Le Rsultat

Bloc A
Le slecteur id

#bloc_unique {
background-color:black; .CSS
color:white ;
}

Llment devient unique, il est


utilis une seule fois dans la page.

On lui spcifie un nom ici bloc_unique prcd du signe dise #. Ensuite il peut tre
attribu nimporte quel balise html comme le div mais il ne peut tre utilis quune
seule fois dans la page. Maintenant que lon a vu comment intgrer du css au page
html.

Rsum: Exemple d'utilisation des CSS :


un document avec CSS
P.intro {
font-size:1.5em;
fontfamily:arial,helvetica;
color:maroon;

<HTML><HEAD>
<TITLE>CSS en entte</TITLE>
<LINK REL="STYLESHEET"
HREF="style.css">

</STYLE>

#id1 {

</HEAD>

margin-left: 25pt;

<BODY>

color : green;

<H1>titre avec un style</H1>

background-color:silver;
} h1 {
font-size : 26pt ;

<p class="intro">paragraphe
d'introduction</p>

color : teal ;

<p id="id1">paragraphe avec le


style de l'id1</p>

text-align : center;

</BODY>
</HTML>

Visualisation du document
obtenu
Titre avec le style par dfaut au slecteur H1

Paragraphe avec le style associ


l'identifiant id1

Paragraphe avec le style


associ la classe d'lments
intro

Les sous-classes de style attribut ID

Permet de faire varier certains paramtres d'une


classe
Exemple : une classe dfinit un style gnral de
paragraphe mais on souhaite pouvoir changer
uniquement la dfinition de la couleur

premire possibilit : faire une deuxime classe (la


duplication de code est toujours une mauvaise chose)
mieux : dfinir un modificateur qui n'agit que sur les
paramtres souhaits

# est le caractre permettant la dfinition de


sous-classes

Les sous-classes de style attribut ID

Exemples :

<style type="text/css">
.standard {color: green; font-size: 10pt;}
#cyan {color: cyan;}
P {font-size: 16pt; color: yellow;}
P.special {font-style: italic; color: red;}
P#bleu {color: blue;}
</style>

L'attribut ID

permet de raliser une exception dans une classe ou


tre utilis seul (alors quivalent CLASS)

Un deuxime exemple
<!-- 2.html -->
<html><head>
<style type="text/css">
.standard {color: green; font-size: 10pt;}
#cyan {color: cyan;}
P {font-size: 16pt; color: yellow;}
P.special {font-style: italic; color: red;}
P#bleu {color: blue;}
</style>
</head><body>
<p>redfinition du standard P</p>
<p class="standard">P classe standard</p>
<p class="special">P classe special</p>
<p class="standard" id="cyan">P classe standard mais cyan</p>
<p class="standard" id="bleu">P classe standard mais bleu</p>
<p class="special" id="bleu">P classe special mais bleu</p>
<h1 class="standard" id="cyan">h1 classe standard mais cyan</h1>
ID devient une classe...
<h1 id="cyan">h1 mais cyan</h1>
Impossible...
<h1 class="standard" id="bleu">h1 classe standard mais bleu</h1>
</body></html>

Les slecteurs avancs


* : slecteur universel
Slectionne toutes les balises sans exception. On
l'appelle le slecteur universel
*
{
}

A B : une balise contenue dans une autre


h3 em
{
..
}

Slectionne toutes les balises <em> situes


l'intrieur d'une balise <h3>. Notez qu'il n'y a pas de
virgule entre les deux noms de balises.

Les slecteurs avancs


A + B : une balise qui en suit une autre
Exemple :
h3 + p

{
}

Slectionne la premire balise <p> situe aprs un titre <h3>.


<h3>Titre</h3>
<p>Paragraphe</p>

Les slecteurs
avancs
A[attribut] : une balise qui possde un attribut
a[title]

{
}

Slectionne tous les liens <a> qui possdent un attribut title.


<a href="http://site.com" title="Infobulle">
a[title="Cliquez ici"]
{
.
}

Idem, mais l'attribut doit en plus avoir


exactement pour valeur Cliquez ici .
Exemple :
<a href="http://site.com" title="Cliquez ici">

Formatage du texte

Cest modifier l'apparence du texte (on dit


qu'on le met en forme ).
Modifier la taille du texte, changer la police,
aligner le texte

La taille
Pour modifier la taille du texte, on utilise la proprit CSS :
font-size. Pour indiquer la taille du texte ? plusieurs techniques
vous sont proposes :
Indiquer une taille absolue : en pixels, en centimtres ou
millimtres. Cette mthode est trs prcise mais il est conseill
de ne l'utiliser que si c'est absolument ncessaire, car on risque
d'indiquer une taille trop petite pour certains lecteurs.
Indiquer une taille relative : en pourcentage, em ou ex
, cette technique a l'avantage d'tre plus souple. Elle
s'adapte plus facilement aux prfrences de taille des visiteurs.

Formatage du texte

Une taille absolue


Pour indiquer une taille absolue, on utilise gnralement
les pixels. Pour avoir un texte de 16 pixels de hauteur,
vous devez donc
crire :
font-size: 16px;

Une valeur relative


C'est la mthode recommande car le texte s'adapte alors
plus facilement aux prfrences de tous les visiteurs.
Il y a plusieurs moyens d'indiquer une valeur relative. Vous
pouvez par exemple crire la taille avec des mots en anglais
comme
ceux-ci :
xx-small : minuscule ;
x-small : trs petit ;
small : petit ;
medium : moyen ;
large : grand ;
x-large : trs grand ;
xx-large : gigantesque.

Exemple
p{
font-size: small;
}
h
{
font-size: large;
}

Remarque

cette technique a un dfaut : il n'y a que sept


tailles disponibles (car il n'y a que sept noms).
Heureusement, il existe d'autres moyens.
Une technique prfre consiste indiquer la
taille en em . Si vous crivez 1em, le texte a
une taille normale.

Si vous voulez grossir le texte, vous pouvez inscrire une


valeur suprieure 1, comme 1.3em.
Si vous voulez rduire le texte, inscrivez une valeur
infrieure 1, comme 0.8em.
1 em = 16 point

La police
Modifier la police utilise
{
}

font-family: police;

Seulement, pour viter les problmes si l'internaute n'a pas


la mme police que vous, on prcise en gnral plusieurs
noms de police, spars par des virgules :
balise
{
}

font-family: police1, police2, police3, police4;

Polices les plus


courantes

Arial ;
Arial Black ;
Comic Sans MS ;
Courier New ;
Georgia ;
Impact ;
Times New Roman ;
Trebuchet MS ;
Verdana.

Exemple:
p{
font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

Mettre en italique
italic : le texte sera mis en italique.
oblique : le texte sera pass en oblique (les lettres sont penches, le
rsultat est lgrement diffrent de l'italique proprement dit).
normal : le texte sera normal (par dfaut). Cela vous permet d'annuler
une mise en italique. Par exemple, si vous voulez
que les textes entre <em> ne soient plus en italique, vous devrez crire :
em
{
font-style: normal;
}
Ainsi, dans l'exemple suivant, je me sers de font-style pour mettre en
italique tous mes titres <h2> :
h2
{
font-style: italic;
}

Mettre en gras
h1
{
}

font-weight: bold;

Soulignement et autres
La proprit CSS associe porte bien son nom : text-decoration.
dcorations
Elle permet, entre autres, de souligner le texte, mais pas
seulement. Voici les diffrentes valeurs qu'elle peut prendre :
underline : soulign.
line-through : barr.
overline : ligne au-dessus.
blink : clignotant. Ne fonctionne pas sur tous les navigateurs
(Internet Explorer et Google Chrome, notamment).
none : normal (par dfaut).

Exemple
{
text-decoration: blink;
}
souligne
{
text-decoration: underline;
}
barre
{
text-decoration: line-through;
}
ligne_dessus
{
text-decoration: overline;
}

L'alignement

Le langage CSS nous permet de faire tous les


alignements connus : gauche, centr, droite et
justifi.
C'est tout simple. On utilise la proprit text-align
et on indique l'alignement dsir :

left : le texte sera align gauche (c'est le rglage par


dfaut).
center : le texte sera centr.
right : le texte sera align droite.
justify : le texte sera justifi . Justifier le texte permet
de faire en sorte qu'il prenne toute la largeur possible
sans

laisser d'espace blanc la fin des lignes. Les textes


des journaux, par exemple, sont toujours justifis.

Les flottants

Le CSS nous permet de faire flotter un


lment autour du texte. On dit aussi
qu'on fait un habillage .

Les flottants
left : l'lment flottera gauche.
right : l'lment flottera droite !

L'utilisation des flottants est trs simple :


1. Vous appliquez un float une balise.
2. Puis vous continuez crire du texte la suite
normalement.

Couleur
balise{
background-color: ;/* couleur du fond */
color: .; /* couleur du texte */
}
On indique :
1. Le nom de la couleur ex color:red
2. Le code hexadcimal de la couleur : ex
color:#FF00CC
3. La mthode RGB ex: color: rgb(240,96,204);
RGB: Red-Green-Blue (rouge-vert-bleu)

Images de fond
Appliquer une image de fond
La proprit permettant d'indiquer une image de
fond est background-image. Comme valeur, on
doit renseigner url("nom_de_l_image.png").
Par exemple :
Ex Code : CSS
body
{
background-image: url("neige.png");
}

Options disponibles
pour l'image de fond

background-attachment : fixer le fond

Deux valeurs sont disponibles :

fixed : l'image de fond reste fixe ;


scroll : l'image de fond dfile avec le texte
(par dfaut).

Options disponibles
pour l'image de fond
body
{
background-image: url("neige.png");
background-attachment: fixed;
/* Le fond restera fixe */

Options disponibles
pour l'image de fond
background-repeat : rptition du fond

Par dfaut, l'image de fond est rpte en


mosaque. Vous pouvez changer cela avec la
proprit background-repeat :

no-repeat : le fond ne sera pas rpt. L'image sera


donc unique sur la page.
repeat-x : le fond sera rpt uniquement sur la
premire ligne, horizontalement.
repeat-y : le fond sera rpt uniquement sur la
premire colonne, verticalement.
repeat : le fond sera rpt en mosaque (par dfaut).

Exemple
Exemple
{
background-image: url("soleil.png");
background-repeat: no-repeat;
}

background-position : position du
fond

On peut indiquer o doit se trouver l'image de fond avec


background-position. Cette proprit n'est intressante que si
elle est combine avec background-repeat: no-repeat;

Vous devez donner background-position deux valeurs en


pixels pour indiquer la position du fond par rapport au coin
suprieur gauche de la page (ou du paragraphe, si vous appliquez
le fond un paragraphe). Ainsi, si vous tapez :

Ex Code : CSS
background-position: 30px 50px;

votre fond sera plac 30 pixels de la gauche et 50 pixels du


haut. Il est aussi possible d'utiliser ces valeurs en anglais :

top : en haut ;
bottom : en bas ;
left : gauche ;
center : centr ;
right : droite.
Il est possible de combiner ces mots. Par
exemple, pour aligner une image en haut
droite, vous taperez :
Code : CSS
background-position: top right;

body
{
background-image: url("soleil.png");
background-attachment: fixed;
/* Le fond restera fixe */
background-repeat: no-repeat;
/* Le fond ne sera pas rpt */
background-position: top right;
/* Le fond sera plac en haut droite */
}

Plusieurs images de fond

Depuis CSS3, il est possible de donner plusieurs images de


fond un lment. Pour cela, il suffit de sparer les
dclarations par une virgule, comme ceci :
body
{
background: url("soleil.png") fixed no-repeat top right,
url("neige.png") fixed;
}

Les bordures et les ombres


Bordures standard
Pour border on peut utiliser jusqu' trois valeurs pour modifier
l'apparence de la bordure :
La largeur : indiquez la largeur de votre bordure. Mettez une
valeur en pixels (comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on
l'a appris, soit un nom de couleur (black, red,), soit une valeur
hexadcimale (#FF0000), soit une valeur RGB (rgb(198, 212,
37)).
Le type de bordure : l, vous avez le choix. Votre bordure peut
tre un simple trait, ou des pointills, ou encore des tirets, etc.
Voici les diffrentes valeurs disponibles :

none : pas de bordure (par dfaut) ;


solid : un trait simple ;
dotted : pointills ;
dashed : tirets ;
double : bordure double ;
groove : en relief ;
ridge : autre effet relief ;
inset : effet 3D global enfonc ;
outset : effet 3D global surlev.

En haut, droite, gauche, en


bas

Si vous voulez mettre des bordures diffrentes en


fonction du ct (haut, bas, gauche ou droite), vous
pouvez le faire sans problme. Dans ce cas, vous devrez
utiliser ces quatre proprits :

border-top : bordure du haut ;


border-bottom : bordure du bas ;
border-left : bordure de gauche ;
border-right : bordure de droite.

Exemple
p{
border-left: 2px solid black;
border-right: 2px solid black;
}

Bordures arrondies

La proprit border-radius va nous permettre


d'arrondir facilement les angles de n'importe quel
lment. Il suffit d'indiquer la taille (
l'importance ) de l'arrondi en pixels :

p{
border-radius: 10px;
}

On peut aussi prciser la forme de l'arrondi pour chaque coin.


Dans ce cas, indiquez quatre valeurs :

Code : CSS
p{
border-radius: 10px 5px 10px 5px;
}

Les valeurs correspondent aux angles suivants dans


cet ordre :

1.
2.
3.
4.

en
en
en
en

haut gauche ;
haut droite ;
bas droite ;
bas gauche.

Les ombres

Les ombres font partie des nouveauts


rcentes proposes par CSS3. Aujourd'hui,
il suffit d'une seule ligne de CSS pour
ajouter des ombres dans une page !

Nous allons ici dcouvrir deux types


d'ombres :

les ombres des botes ;


les ombres du texte.

box-shadow : les ombres des botes

La proprit box-shadow s'applique tout le bloc et prend


quatre valeurs dans l'ordre suivant :

1.
2.
3.
4.

le dcalage horizontal de l'ombre ;


le dcalage vertical de l'ombre ;
l'adoucissement du dgrad ;
la couleur de l'ombre.

Par exemple, pour une ombre noire de 6 pixels, sans


adoucissement, on crira :
p{
}

box-shadow: 6px 6px 0px black;

On peut aussi rajouter une quatrime valeur


facultative : inset. Dans ce cas, l'ombre sera place
l'intrieur du bloc, pour donner un effet enfonc :

P
{
box-shadow: 6px 6px 6px black inset;
}
text-shadow : l'ombre du texte
Avec text-shadow, vous pouvez ajouter une ombre directement
sur les lettres de votre texte ! Les valeurs fonctionnent
exactement de la mme faon que box-shadow : dcalage,
adoucissement et couleur.

p
{
text-shadow: 2px 2px 4px black;
}

Mise en page du site

Structurer sa page

En gnral, une page Web est constitue d'un


en-tte (tout en haut), de menus de navigation
(en haut ou sur les cts), de diffrentes
sections au centre et d'un pied de page (tout
en bas).

Les balises structurantes de


HTML5
<header> : l'en-tte
La plupart des sites web possdent en gnral un en-tte,
appel header en anglais.
On y trouve le plus souvent un logo, une bannire, le slogan
de votre site
Vous devrez placer ces informations l'intrieur de la balise
<header> :
<header>
<!-- Placez ici le contenu de l'en-tte de votre page -->
</header>

Header exemple

L'en-tte peut contenir tout ce que vous voulez : images, liens,


textes

<footer> : le pied de
page

l'inverse de l'en-tte, le pied de page se trouve


en gnral tout en bas du document. On y trouve
des informations comme
Des liens de contact, le nom de l'auteur, les
mentions lgales, etc.
Code : HTML
<footer>
<!-- Placez ici le contenu du pied de page -->
</footer>

<nav> : principaux liens de


navigation
La balise <nav> doit regrouper tous les principaux liens de
navigation du site. Vous y placerez par exemple le menu
principal de votre site.
Gnralement, le menu est ralis sous forme de liste
puces l'intrieur de la balise <nav> :
Code : HTML
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="forum.html">Forum</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>

<section> : une section


de page

La balise <section> sert regrouper des


contenus en fonction de leur thmatique.
Elle englobe gnralement une portion du
contenu au centre de la page.
Code : HTML
<section>
<h1>Ma section de page</h1>
<p>Bla bla bla bla</p>
</section>

<aside> : informations
complmentaires
La balise <aside> est conue pour contenir des
informations complmentaires au document que
l'on visualise. Ces
informations sont gnralement places sur le
ct (bien que ce ne soit pas une obligation).
Code : HTML
<aside>
<!-- Placez ici des informations complmentaires
-->
</aside>

<article> : un article
indpendant

La balise <article> sert englober une portion


gnralement autonome de la page. C'est une
partie de la page qui pourrait
ainsi tre reprise sur un autre site. C'est le cas
par exemple des actualits (articles de journaux
ou de blogs).
Code : HTML
<article>
<h1>Mon article</h1>
<p>Bla bla bla bla</p>
</article>

Rsum

<html>
Une page HTML sans CSS
<head>
<meta charset="utf-8" />
<title>Zozor - Le Site Web</title>
</head>
<body>
<header>
<h1>Zozor</h1>
<h2>Carnets de voyage</h2>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
</ul>
</nav>
<section>
<aside>
<h1> propos de l'auteur</h1>
<p>C'est moi, Zozor ! Je suis n un 23 novembre
2005.</p>
</aside>
<article>
<h1>Je suis un grand voyageur</h1>
<p>Bla bla bla bla (texte de l'article)</p>
</article>
</section>
<footer>
<p>Copyright Zozor - Tous droits rservs<br />
<a href="#">Me contacter !</a></p>
</footer>
</body>
</html>

Rsum

Plusieurs balises ont t introduites avec HTML5 pour


dlimiter les diffrentes zones qui constituent la page web :

<header> : en-tte ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complmentaires ;
<article> : article indpendant.

Ces balises peuvent tre imbriques les unes dans les


autres. Ainsi, une section peut avoir son propre en-tte.
Ces balises ne s'occupent pas de la mise en page. Elles
servent seulement indiquer l'ordinateur le sens du texte
qu'elles contiennent. On pourrait trs bien placer l'en-tte
en bas de la page si on le souhaite

Le modle des botes

Une page web peut tre vue comme une


succession et un empilement de botes, qu'on
appelle blocs .
La plupart des lments sont des blocs :
<header>, <article>, <nav> <p>, les titres
<h1>
Les balises de type block et inline
En HTML, la plupart des balises peuvent se ranger
dans l'une ou l'autre de deux catgories :

Les balises inline : c'est le cas par exemple des liens


<a></a>.
Les balises block : c'est le cas par exemple des
paragraphes <p></p>.

Comment savoir si une balise et de type Block


ou de type Inline

block : une balise de type block sur votre


page web cre automatiquement un retour
la ligne avant et aprs. Il suffit

inline : une balise de type inline se trouve


obligatoirement l'intrieur d'une balise
block. Une balise inline ne cre pas de
retour la ligne,

Exemple

Balises de type Block


Intressons-nous la taille des blocs.
Contrairement un inline, un bloc a des
dimensions prcises. Il possde
une largeur et une hauteur. On dispose de
deux proprits CSS :

width : c'est la largeur du bloc. exprimer en


pixels (px) ou en pourcentage (%).
height : c'est la hauteur du bloc. L encore,
on l'exprime soit en pixels (px), soit en
pourcentage (%).

Les pourcentages seront utiles pour


crer un design qui s'adapte
automatiquement la rsolution
d'cran du visiteur. Toutefois, il se
peut que vous ayez besoin de crer
des blocs ayant une dimension
prcise en pixels :

Minimum et maximum

On peut demander ce qu'un bloc ait des


dimensions minimales et maximales. C'est
trs pratique car cela nous permet de
dfinir des dimensions limites pour que
notre site s'adapte aux diffrentes
rsolutions d'cran de nos visiteurs :

min-width : largeur minimale ;


min-height : hauteur minimale ;
max-width : largeur maximale ;
max-height : hauteur maximale.

Par exemple, on peut demander ce que


les paragraphes occupent 50% de la
largeur et exiger qu'il fassent au moins
400 pixels de large dans tous les cas :

P{
width: 50%;
min-width: 400px;
}

Les
marges
Il faut
savoir que tous les blocs possdent des
marges. Il existe deux types de marges :

les marges intrieures ;


les marges extrieures.

Marges

En CSS, on peut modifier la taille des marges


avec les deux proprits suivantes :

padding : indique la taille de la marge intrieure.


exprimer en gnral en pixels (px).

margin : indique la taille de la marge extrieure. L


encore, on utilise le plus souvent des pixels.

Exemple
p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px; /* Marge
intrieure de 12px */
}

Maintenant, je veux que mes paragraphes soient plus espacs


entre eux. Je rajoute la proprit margin pour demander
ce qu'ily ait 50 px de marge entre deux paragraphes (figure
suivante) :
Code : CSS
p{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: 50px; /* Marge extrieure de 50px */
}

En haut, droite, gauche,


en bas
Voici la liste pour margin :
margin-top : marge extrieure en haut ;
margin-bottom : marge extrieure en bas ;
margin-left : marge extrieure gauche ;
margin-right : marge extrieure droite.

Et la liste pour padding :


padding-top : marge intrieure en haut ;
padding-bottom : marge intrieure en bas ;
padding-left : marge intrieure gauche ;
padding-right : marge intrieure droite.

En haut, droite, gauche,


en bas
Il y a d'autres faons de spcifier les
marges avec les proprits margin et
padding. Par exemple :
margin: 2px 0 3px 1px; signifie

2 px de marge en haut, 0 px droite (le px


est facultatif dans ce cas), 3 px en bas, 1 px
gauche .

Autre notation raccourcie : margin: 2px


1px; signifie 2 px de marge en haut et
en bas, 1 px de marge gauche et
droite .

TD : Voir Exemple

<div id="sidebar">
<h4>Toutes mes photos <br> </h4>
<ul>
<li><a href="#">Berlin<br></a></li>
<li><a href="#">Evry</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">NU york </a></li>
<li> <a href="#"><img alt="..." src="photo.jpg"
width=50px /> </a></li>
</ul>
</div>

div#sidebar
div#sidebar {{
float:
float: left;
left;
width:
width: 23%;
23%;
margin:
margin: 2em
2em 00 00 2%;
2%;
padding:
padding: 00 00 15px;
15px;
background:
background: url(arrow.gif)
url(arrow.gif) 100%
100% 100%
100% nonorepeat;
repeat;
}}

#sidebar
#sidebar ul
ul {{
list-style:
list-style: none;
none;
margin:
margin: 0;
0;
padding:
padding: 00 00 10px;
10px;
border-right:
border-right: 3px
3px double
double
rgb(50%,50%,35%);
rgb(50%,50%,35%);
text-align:
text-align: right;
right;
}}

#sidebar
#sidebar a:hover
a:hover {{
color:
color: rgb(10%,20%,0%);
rgb(10%,20%,0%);
border-color:
border-color: rgb(98%,48%,40%);
rgb(98%,48%,40%);
background:
background: url(arrow2.gif)
url(arrow2.gif) 00 100%
100% nonorepeat;
repeat;
padding-left:
padding-left: 15px;
15px;
}}

div#sidebar {
0

float: left; width: 23%; margin: 2em 0


2%; padding: 0 0 15px;
background:
url(arrow.gif) 100% 100% no-repeat;}

#sidebar ul {
0

list-style: none; margin: 0; padding:


0 10px;
border-right: 3px double
rgb(50%,50%,35%);
text-align:
#sidebar h4, #sidebar ul
0 0;}

right;}
{margin: 0 6px
#sidebar li {
padding: 0.5em 0 0.25em;
/* border-bottom:
1px solid rgb(84%,84%,69%); */}
#sidebar a {text-decoration: none;
padding: 0 0.5em 0 0;
border-bottom: 1px solid rgb(84%,84%,69%);}
les speudos selecteurs
#sidebar a:link {color: rgb(20%,40%,0%);}
#sidebar a:visited {color: rgb(58%,68%,40%);}
#sidebar a:hover {color: rgb(10%,20%,0%);
border-color:
rgb(98%,48%,40%);
background:
url(arrow2.gif) 0 100% no-repeat;
padding-left: 15px;}

Le flux

On oubliera les tableaux !

Positionnement et Flux en CSS

Vue densemble des mthodes


de positionnement

Les modes de positionnement


Flux : ordre daffichage des lments
4 mthodes de positionnement
normal
float
relatif
absolu
Quels sont les diffrences ?

Le Flux normal
<BODY>
<div class="conteneur">
<div class="normalA">
Bloc A
</div>
<div class="normalB">
Bloc B
</div>
</div>
</BODY>
.normalA {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}
.normalB {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}

Bloc conteneur

Bloc
A B
Bloc

Le Flux normal : en bloc


<BODY>
<div class="conteneur">
<div class="normalA">
Bloc A
</div>
<div class="normalB">
Bloc B
</div>
</div>
</BODY>

Bloc A

Bloc B

.normalA {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}

Bloc conteneur

.normalB {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}

Flux
Flux normal
normal en
en bloc
bloc ::
Succession
Succession verticale
verticale

Le Flux normal : en ligne


<BODY>
<div class="conteneur">
<span class="normalC">
Bloc C
</span>
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}
.normalD {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}

Bloc conteneur

Bloc C
Bloc D

Le Flux normal : en ligne


<BODY>
<div class="conteneur">
<span class="normalC">
Bloc C
</span>
<span class="normalD">
Bloc D
</span>
</div>
</BODY>
.normalC {
width:150px;
height:150px;
background-color:red;
border:1px solid black;
}
.normalD {
width:250px ;
height:100px ;
background-color:green;
border:1px solid black;
}

Bloc C

Bloc D

Bloc conteneur
Flux
Flux normal
normal en-ligne
en-ligne ::
Succession
Succession horizontale
horizontale

Le Flux flottant
<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<p>
Texte...blabla ...
</p>
</div>
</BODY>

.flotteA {
float:left;
width:500px;
background-color:yellow;
border:1px solid black;
}

Bloc conteneur

Bote A float:left

Le Flux flottant
<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<p>
Texte...texte ...
</p>
</div>
</BODY>

.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}

Bote A float:left

Textetexte
texttexte
textetextetextetextetextetextetextetextetextetexte
texte
textetextetextetextetextetextetextetexttextetexte
textetextetextetextetextetextetextetexttextetexte
textetextetextetextetextetextetextetexttextetexte
textetextetextetextetextetextetextetexttextetexte
textetextetextetextetextetextetextetexttextetexte

Bloc conteneur

Le Flux flottant
<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<div class="flotteB">
Bote B
</div>
</div>
</BODY>
.conteneur {
width:800px;
border:1px solid black;
}
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
.flotteB {
float:left;
width:100px;
background-color:blue;
border:1px solid black;
}

Bloc conteneur - 800px de large

Bote A 650px

Le Flux flottant

<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<div class="flotteB">
Bote B
</div>
</div>
</BODY>

Bote A 650px

.conteneur {
width:800px;
border:1px solid black;
}
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
.flotteB {
float:left;
width:100px;
background-color:blue;
border:1px solid black;
}

Bloc conteneur - 800px de large

Bote B 100px
100px

Le Flux flottant

<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<div class="flotteB">
Bote B
</div>
</div>
</BODY>

Bote A 650px

.conteneur {
width:800px;
border:1px solid black;
}
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
.flotteB {
float:left;
width:600px;
background-color:blue;
border:1px solid black;
}

Bloc conteneur - 800px de large

Bote B 600px

Le Flux flottant
<BODY>
<div class="conteneur">
<div class="flotteA">
Bote A
</div>
<div class="flotteB">
Bote B
</div>
</div>
</BODY>

Bote A 650px
Bote B 600px

.conteneur {
width:800px;
border:1px solid black;
}
.flotteA {
float:left;
width:650px;
background-color:yellow;
border:1px solid black;
}
.flotteB {
float:left;
width:600px;
background-color:blue;
border:1px solid black;
}

Bloc conteneur - 800px de large

Le Flux relatif
<BODY>
<div class="conteneur">
<div class="bloc_relatif">
Bloc A
</div>
css css css css...
</div>
</BODY>
.conteneur {
width:800px;
border:1px solid black;
}

.bloc_relatif {
position:relative;
width:300px;
margin-top:20px;
margin-left:30px;
border:1px solid black;
}

Css css css css css css css css Css css css css css
Topcss
20px
css css css Css css css css css
css css Css css
css css css css css css Css css css css css css css css
Css css css css css css css css Css css css css css
css css css Css css css css css css css css Css css
css css css css css css Css css css css css css css css
Css css css css css css css css Css css css css css
css css css css css

Bloc A

Left 30px

Bloc conteneur

Le Flux absolu
<BODY>
<div class="conteneur">
<div class="bloc_absolu">
Bloc A
</div>
css css css css css...
</div>
</BODY>

Css css css css css css css css Css css css css css
css css css Css css css css css
css css
Top 20px
css css css css css Css css css css css css css css
Css css css css css css css css Css css css css css
css css css Css css css css css css css css Css css
css css css css css css Css css css css css css css css

Bloc A

Left 30px

.conteneur {
width:800px;
border:1px solid black;
}

.bloc_absolu {
position:absolute;
width:300px;
margin-top:20px;
margin-left:30px;
border:1px solid black;
}

Bloc conteneur

Le Flux absolu

<BODY>
<div class="conteneur">
css css css css...

css

<div class="bloc_absolu">
Bloc A
</div>
ddddddd..dddd

</div>
</BODY>
.conteneur {
width:800px;
border:1px solid black;
}

.bloc_absolu {
position:absolute;
width:300px;
margin-top:20px;
margin-left:30px;
border:1px solid black;
}

Cration d'un site

Exemple complet
Bloc Header flux normal

Bloc conteneur

Exemple complet
Header_gauche - float left

Header_droit float left

Exemple complet
Header_gauche - float left

Header_droit float left

Bloc Menu Header flux normal

Bloc
Menu
Float left

Exemple complet
Header_gauche - float left

Header_droit float left

Bloc Menu Header flux normal

Bloc
Menu
Float left

Bloc contenu float right