Vous êtes sur la page 1sur 23

Ayoba INSTALLER

  Faire le design du site Web avec le css


Vous savez maintenant, qu'une page web est une combinaison de 2 parties :
Un fichier XHTML : Oú; se trouve le contenu de la page (le texte) et un fichier CSS (.css) : Qui permet de
faire la présentation de la page web.

Le fichier HTML : Oú se trouve le contenu de la page (le texte). Il est constitué de balises.
Le fichier CSS (.css) : Qui permet de faire la présentation de la page web. Il indique qu'un texte est de telle
couleur, qu'il est centré, sa police "Arial" etc... Si vous avez suivi les chapitres précédents et vous les avez
compris,ce qui va suivre dans ce chapitre sera plus facile à comprendre. Si non retournez les revoir puis
revenez pour poursuivre le chapitre courant.

Partie 1: Créer le contenu de la page XHTML


HTML & CSS
La conception de la page Web peut être fixe de taille fixée (par exemple de 760 pixels)ou extensible de taille
qui varie suivant la résolution du visiteur du site.

La conception fixe.
Vous vous rappelez du code de "base" d'une page XHTML que je vous ai montré dans un cours précèdent. Le
revoici de nouveau :

Sélectionner le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
</head>
<body>
</body>
</html>

Tapez le code dans votre éditeur de texte.


Enregistrer le sous le nom cadre.html .
Vous avez une page vide.
Maintenant supposons que nous voulons que notre page aura un entête, un menu, un corps et un pied de page
comme ceci.

Comment on va s'y prendre ?


Je suppose que vous avez trouvez la réponse vous même.
Et bien on va utiliser la balise universelle <div> vous vous souveniez d'elle.
Films  & Séries
En illimité

Qualité HD      Découvrir
  Sans publicité
On va créer ces 4 blocks à l'aide de 4 <div> qu'on mettra dans le corps <body> </body>:
Code HTML:

Sélectionner le code

<div id="en_tete">
<!-- Ici on mettra la bannière de l'entête-->
</div>
<div id="menu">
<!-- Ici on mettra le menu -->
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le
texte....) -->
</div>
<div id="pied_de_page">
<!-- Et, on mettra en bas de la page le nom de l'auteur, un
copyright... -->
</div>

Allez y , tapez ce code entre <body> et </body> du code de la page de tout à l'heur.
Qu'attendez vous?
Il faire en même temps que moi. Enregistrez et vérifier ce que ça donne.
Et bien vous avez toujours une page vide. N'ayez pas de crainte on va la remplir.
On utilise ici des attributs id et non des class.
Vu que l'attribut id ne sera utilisé qu'une seule fois dans mon document.

L'en-tête
En général un en-tête c'est juste une bannière (une image), un titre <h1> (titre du site).
Pour moi, je vais mettre une bannière, celle-ci par exemple :

image de bannière

Pour mettre cette image dans le <div> de l'en-tête ? On a 2 possibilités :


1, Crée une balise <img /> à l'intérieur, afin d'insérer notre bannière. On sait le faire.
2, Soit on ne met rien à l'intérieur du <div id="en_tete"> et on mettra la bannière sous forme d'image de fond
dans le CSS.
C'est la seconde solution que je vais adopter,mai vous pouvez choisir la première méthode.

Menu et sous-menus
Dans le block du menu , on va créer plusieurs sous-blocks pour montrer les différents éléments du menu.
Mettez ce code dans le block menu c'est à dire entre <div id="menu"> et </div>
Code XHTML:

Sélectionner le code
<div id="menu">
<div class="element_menu">
<h3> Premier menu</h3>
<!-- Titre du sous-menu -->
<ul>
<ul>
<!--liens vers la page elle même -->
<li><a href="page1.html">Lien1<a></li>
<!--liens vers vers une page exterieur
au site-->
<li><a
href="http://booter.22web.net">Lien2<a></li>
<li>Lien3</li>
</ul>
</div>
<div class="element_menu">
<h3>Second menu</h3>
<ul>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien3</li>
</ul>
</div>
</div>

Le corps
C'est la partie principale de la page. Elle contiendra tout le contenu de votre page.
On va donner un titre <h1> qui sera le titre de la page. on le mettra dans la balise
<title> du <head>.
Puis, on écrira nos paragraphes <p> et pour structurer son texte,on met des sous-titres <h2>
Ce qui nous donne un code pour le corps :
Code XHTML

Sélectionner le code
<div id="corps">
<h1>La Chèvre de Monsieur Seguin</h1>
<h2>Paragraphe 1</h2>
<p>
Ah! qu'elle était jolie la petite chèvre de M. Seguin!
Qu'elle était jolie avec ses yeux doux, sa barbiche de sous-
officier,
ses sabots noirs et luisants, ses cornes zébrées et ses longs poils
blancs qui
lui faisaient une houppelande!<br />
Et puis, docile, caressante, se laissant traire sans bouger, sans
mettre son pied
dans l'écuelle. Un amour de petite chèvre!<br />
M. Seguin avait derrière sa maison un clos entouré d'aubépines. Il
avait attaché
la petite chèvre à un pieu, au plus bel endroit du pré, en ayant
bien soin de lui
laisser beaucoup de corde.<br />
</p>
<h2>Paragraphe 2</h2>
<p>
Mais un jour, elle se dit en regardant la montagne: «Comme on doit
être bien là-haut .
Quel plaisir de gambader dans la bruyère sans cette maudite longe
qui vous écorche le cou!»<br />
A partir de ce moment, l'herbe du clos lui parut fade. Elle
maigrit, son lait se fit rare.
C'était pitié de la voir tirer tout le jour sur sa longe, la tête
tournée du côté de la montagne en
faisant Mê! tristement.<br />
M. Seguin s'apercevait bien que sa chèvre avait quelque chose, mais
il ne savait
pas ce que c'était<br />
</p>
<h2>Paragraphe 3</h2>
<p>
Un matin, comme il achevait de la traire, elle se retourna et lui
dit dans son patois:
-écoutez, monsieur Seguin, je me languis chez vous,
laissez-moi aller dans la montagne.<br />
- Ah! mon Dieu! Blanquette, tu veux me quitter!<br />
- Oui, monsieur Seguin.<br />
- Tu es peut-être attachée de trop court, veux-tu que
j'allonge la corde?<br />
- Ce n'est pas la peine, monsieur Seguin.<br />
- Alors, qu'est-ce qu'il te faut? Qu'est-ce que tu veux?<br
/>
- Je veux aller dans la montagne, monsieur Seguin.<br />
- Mais, malheureuse, tu ne sais pas qu'il y a le loup dans
la montagne...<br />
Que feras-tu quand il viendra? <br />
</p>
</div>

Le texte que j'ai écrit, est juste pour "remplir" la page.


On insèrera peut être autres choses (des images!...que sais je? Vous seul saviez ce que vous voulez mettre
dans votre site).

le pied de page
Le pied de page sert à écrire le nom de l'auteur en général, et vous pouvez mettre un copyright.
Code : HTML

Sélectionner le code

<div id="pied_de_page">
<p>Copyright 2008, tous droits réservés</p>
</div>

voilà notre page est créée. Elle reste la decoration; Que nous allons voir dans la partie suivante.

Partie 2: Créer le fichier CSS pour la présentation de la page.


La encore je vous suggère que vous suiviez en même temps que moi.
Nous allons travailler sur la balise <body>.
Rappelle: <body>, est la balise qui englobe tout le contenu de votre page web.
Pour la taille de la page, mettons 760 pixels. Qui est moins que 800px, pour que les visiteurs qui ont une
résolution 800*600 ne se déplaceront pas vers la droite pour voir le reste de la page.

Pour les marges, un margin:auto centrera le design.


Une marge en haut (top) et en bas (bottom) de 10 pixels pour que notre page ne collera pas avec le haut et le
bas du navigateur.
Enfin, une couleur de fond ou une image de fond (background-color ou background-image).
Ayoba
L'appli tout-en-un

INSTALLER

Ouvrez une nouveau document dans votre notepad++, allez sur le menu Langage choisissez CSS comme
langage enregistrer (sous le même nom que votre page si vous voulez).
Code : CSS

Sélectionner le code

body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la
fenêtre du navigateur. */
margin-bottom: 10px; /* aussi pour le bas du navigateur */
background-color: #33ffff; /* Un fond pour éviter d'avoir un fond
blanc */ }

Essayez d'enlever quelques lignes pour observer le résultat sur la page .


N'oubliez pas de déclarer le fichier CSS dans la balise <head> de votre page.
Je vous rappelle le code XHTML à mettre dans la balise <head>.
<link rel="stylesheet" media="screen" type="text/css" title="cadre" href="cadre.css" />

L'en-tête
Nous allons afficher la bannière du site à l'aide du CSS (avec background-image).Qu'on mettra dans le <div> de
l'en-tête,que nous avons laissé tout à l'heur vide.
C'est une technique que vous pourrez utiliser pour faire que tout votre conception soit compris dans le fichier
CSS.
C'est très pratique pour réaliser un site qui à plusieurs conception différentes.
1. On va agrandir la taille du block "en_tete" afin qu'il puisse contenir la bannière entière.
Comme notre bannière fait 760x100 pixels, on va définir une largeur et une hauteur de ces dimensions :
width:760px;
height:100px;
2. Puis, on indiquera l'image de fond qu'on veut mettre dans notre block vide pour l'instant :
background-image:url("images1/banniere.gif");
3.On mettra no-repeat pour s'assurer que cette image ne sera pas répétée en mosaïque avec background-
repeat :
background-repeat:no-repeat;
4. Pour que l'en-tête ne soit trop collé avec ce qui se trouvera dessous (le menu et le corps), on définira une
petite marge en-dessous (margin-bottom) de quelques pixels : margin-bottom:10px;
5. En fin, ajoutons si vous voulez une bordure:
border: 1px solid black;
nous y somme, ajoutez ce code à votre fichier CSS et enregister
Code : CSS

Sélectionner le code

#en_tete
{
width: 760px;
height: 100px;
background-image: url("images1/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 1px solid black; }

Avec cette technique, pour changer la bannière de votre site il faudra modifier le fichier CSS et non le fichier
XHTML.

Le menu....
La c'est un peu plus difficile.
Nous allons placer le menu "à gauche" ou "à droite" du corps, alors que le menu se trouve au-dessus pour
l'instant.
Pour faire cela, il suffit d'utiliser la propriété CSS float (nous l'avons vu), elle va être pratique ici pour placer
correctement le menu et le corps.
On va prendre une taille de 130 pixels pour menu.
Ensuite, nous allons travailler sur la class "element_menu" (qui concerne une partie de menu). On va lui donner
une couleur de fond en gris foncé, une image de fond en repeat-x (qui se répètera horizontalement).
puis, on ajoutera une bordure à chaque élement de menu pour voir ses limites. "2px".
Enfin, on mettra un margin-bottom à chaque élément de menu pour éviter qu'ils ne soient collés les uns aux
autres.
Code : CSS

Sélectionner le code
#menu
{
float: left; /* Le menu flottera à gauche vous pouvez mettre
float:right */
width: 130px; /* Il est important de donner une taille au menu */
}
.element_menu
{
background-color: #c2c2aa;
background-image: url("images1/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne
soient trop collés */ }

Rappelle :( # ) dièse pour un id et (. ) point pour une class.


si vous testez ce code, on distingue déjà bien nos menus, mai le corps se retrouve sous le menu une fois qu'il
l'a dépassé par le bas. Normal, c'est comme ça que fonctionne un float.
Il faut ajouter une marge à gauche sur le corps (margin-left).
Il faut encore travailler sur les menus. On rajoute quelques effets.
Ce CSS va concerner les balises <ul> se trouvant à l'intérieur d'un element_menu".
Code : CSS

Sélectionner le code
.element_menu ul /* Toutes les listes à puces se trouvant dans un
menu */
{
list-style-image: url("images1/puce.png"); /* On change l'apparence
des puces */
padding: 0px; /* Tous les côtés ont une marge intérieure de 0
pixels */
padding-left: 20px; /* ... on modifie ensuite la marge de gauche,
donc celle-là fera finalement 20 pixels */
margin: 0px; /* même chose pour margin, ça évite d'avoir à en
écrire 4 fois (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie
ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens d'un menu */
{
color: #0000ff;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #ff00ff;/*change la couleur du fond du lien*/
color: black;/*change la couleur du texte du lien*/
}

Vous avez vu que j'ai enchaîné un "padding" (qui modifie toutes les marges intérieures) et un "padding-left" (qui
modifie uniquement la marge intérieure gauche).
Il faut faire les lignes dans l'ordre :
1. On modifie toutes les marges et on leur met toutes la valeur "0px" avec padding
2. Puis, on modifie la marge de gauche. On lui donne 20px avec padding-left (On "écrase" valeur existante
avant)

Le corps...
Pour le corps, il est important de définir de bonnes marges.
On commence par régler le problème du texte du corps qui passe "sous" le menu quand il est trop long.
Il suffit de modifier la marge "à gauche" du corps. Par un margin-left.
On lui donne une valeur suffisante pour "pousser" le corps sur la droite, pour qu'il ne passe plus sous le menu
(une valeur supérieure à la largeur du menu). Ici par exemple, on va prendre une valeur de 130px.
On va ajouter un margin-bottom pour que le pied de page en-dessous ne soit pas "collé" au corps :
margin-bottom:20px;
On va mettre un padding (marge intérieure) sur les côtés afin que le texte ne colle pas avec les bords du corps :
padding:10px;
On va aussi mettre une couleur de fond, ou une petite image de fond qui se répète horizontalement, une
bordure... (ou tout ce que vous voulu pour la décoration )
Code : CSS

Sélectionner le code

#corps
{
margin-left: 130px;
margin-bottom: 20px;
padding: 10px;
color: #B3B3B3;
background-color: #524222;
background-image: url("images1/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #dd0011;
text-align: center;
font-family: Arial, "Times New Roman", Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-color: #22ff00;
/* Une petite image (15x15) de fond sur les titres h2 */
background-image: url("images1/petite_image.png");
background-repeat: no-repeat; /* L'image se placera à gauche du
titre */
padding-left: 20px;
color: #0000ff;
text-align: left;
}

Le pied de page
Pour le pied de page, rien de d'extraordinaire, c'est des modifications identiques au reste. On met une couleur
de fond, on met une bordure, on vérifie les marges.
Code : CSS

Sélectionner le code
#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images1/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}

Avant de terminer cette partie du cours créez un dossier sur votre bureau,
nommez le monsite et dans ce dossier créez un autre dossier que vous nommez
images et dans le quel vous allez placer toutes les images dont vous aurez besoin
pour le design de vos pages web.
Vous pouvez télécharger le dossier images que je vous ai préparé ici
(http://www.www.oujood.com/images.rar)
C'est un fichier .rar que vous devez décompresser dans le dossier monsite.
Maintenant recopiez le code suivant dans votre éditeur de texte (notepad++ )
et enregistrez dans le dossier monsite sous le nom "page1.html" ou un autre nom ,
que vous préférez.
Code html:

Sélectionner le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css"
title="stylegeneral" href="stylegeneral.css" />

</head>
<body>
<div id="en_tete">
<!-- Ici on mettra la bannière de l'entête-->
</div>
<div id="menu">
<div class="element_menu">
<h3> Premier menu</h3> <!-- Titre du sous-menu -->
<ul><ul>
<!--liens vers la page elle même -->
<li><a href="page1.html">Lien1<a></li>
<!--liens vers vers une page exterieur au
site-->
<li><a
href="http://booter.22web.net">Lien2<a></li>
<li>Lien3</li>
</ul>
</div>
<div class="element_menu">
<h3>Second menu</h3>
<ul>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien3</li>
</ul>
</div>
</div>
<div id="corps">
<h1>La Chèvre de Monsieur Seguin</h1>
<h2>Paragraphe 1</h2>
<p>
Ah! qu'elle était jolie la petite chèvre de M. Seguin!
Qu'elle était jolie avec ses
yeux doux, sa barbiche de sous-officier, ses sabots noirs et
luisants, ses cornes
zébrées et ses longs poils blancs qui lui faisaient une
houppelande!<br />

Et puis, docile, caressante, se laissant traire sans bouger, sans


mettre son pied
dans l'écuelle. Un amour de petite chèvre!<br />
M. Seguin avait derrière sa maison un clos entouré
d'aubépines. Il avait attaché
la petite chèvre à un pieu, au plus bel endroit du pré, en ayant
bien soin de lui laisser
beaucoup de corde.<br />
</p>
<h2>Paragraphe 2</h2>
<p>
Mais un jour, elle se dit en regardant la montagne: «Comme
on doit être bien
là-haut .Quel plaisir de gambader dans la bruyère sans cette
maudite longe qui vous
écorche le cou!»<br />
A partir de ce moment, l'herbe du clos lui parut fade. Elle
maigrit, son lait se fit
rare. C'était pitié de la voir tirer tout le jour sur sa longe, la
tête tournée du côté de
la montagne en faisant Mê! tristement.<br />
M. Seguin s'apercevait bien que sa chèvre avait quelque
chose, mais il ne savait
pas ce que c'était...<br />
</p>
<h2>Paragraphe 3</h2>
<p>
Un matin, comme il achevait de la traire, elle se retourna et lui
dit dans son patois:
«écoutez, monsieur Seguin, je me languis chez vous, laissez-moi
aller dans la montagne.<br />
- Ah! mon Dieu! Blanquette, tu veux me quitter!<br
/>
- Oui, monsieur Seguin.<br />
- Tu es peut-être attachée de trop court, veux-tu
que j'allonge la corde?<br />
- Ce n'est pas la peine, monsieur Seguin.<br />
- Alors, qu'est-ce qu'il te faut? Qu'est-ce que tu
veux?<br />
- Je veux aller dans la montagne, monsieur Seguin.
<br />
- Mais, malheureuse, tu ne sais pas qu'il y a le
loup dans la montagne...<br />
Que feras-tu quand il viendra? <br />
</p>
</div>
<div id="pied_de_page">
<p>Copyright 2008, tous droits réservés auteur carabde</p>
</div>

</body>
</html>

En suite recopiez le code CSS suivant dans votre éditeur de texte et enregistrez dans le dossier monsite sous
le nom "stylegeneral.css". Là ne pas changer le nom ou si vous le faites changez le nom aussi dans le code
HTML de la page, la même chose pour le dossier images et toutes les images qu'il contient. Code CSS:

Sélectionner le code
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la
fenêtre du navigateur. */
margin-bottom: 10px; /* aussi pour le bas du navigateur */
background-color: #33ffff; /* Un fond pour éviter d'avoir un fond
blanc */
}
#en_tete
{
width: 760px;
height: 100px;
background-image: url("images1/banniere.png");
background-repeat: repeat;
margin-bottom: 10px;
border: 1px solid black;
}
#menu
{
float: left; /* Le menu flottera à gauche vous pouvez mettre
float:right */
width: 130px; /* Il est important de donner une taille au menu */
}
.element_menu
{
background-color: #c2c2aa;
background-image: url("images1/motif.png");
background-repeat: repeat;
border: 2px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne
soient trop collés */
padding: 10px;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un
menu */
{
list-style-image: url("images1/puce.gif"); /* On change l'apparence
des puces */
padding: 10px; /* Tous les côtés ont une marge intérieure de 0
pixels */
padding-left: 20px; /* ... on modifie ensuite la marge de gauche,
donc celle-là fera finalement 20 pixels */
margin: 0px; /* même chose pour margin, ça évite d'avoir à en
écrire 4 fois (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie
ensuite juste margin-bottom, mais
tous les autres sont à 0px */
}
.element_menu a /* Tous les liens d'un menu */
{
color: #0000ff;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #ff00ff;/*change la couleur du fond du lien*/
color: black;/*change la couleur du texte du lien*/
}
#corps
{
margin-left: 130px;
margin-bottom: 20px;
padding: 10px;
color: #000000;
background-color: #524222;
background-image: url("images1/mtif_corps.png");
background-repeat: repeat;
border: 2px solid black;
}
#corps h1 /* Tous les titres h1 du corps */
{
color: #dd0011;
text-align: center;
font-family: Arial, "Times New Roman", Times, serif;
}
#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;
background-color: #22ff00;
/* Une petite image (15x15) de fond sur les titres h2 */
background-image: url("images1/petite_image.png");
background-repeat: no-repeat; /* L'image se placera à gauche du
titre */
padding-left: 20px;
color: #0000ff;
text-align: left;
}
#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: #626262;
background-image: url("images1/motif.png");
background-repeat: repeat;
border: 2px solid black;
}

Ouvrez la page "page1.html" dans votre explorateur internet et voyez le résultat.Alors? Je reconnais que ce
n'est pas la perfection mais ce n'était pas mon objectif.
Mon objectif est de vous montrer comment on fait une page web.
Dans les prochains chapitres vous verrez une autre façon de faire une page Web.

Page web avec taille extensible


Pour une page web avec une taille extensible nous reprendrons le même code que précédemment , et nous
allons changer le CSS.

Cette fois au lieu d’utiliser des dimensions en pixel on va utiliser des pour cent (%)  et la valeur auto.

Le body

 Pour le width du body on utilise la valeur auto.

Code : CSS

Sélectionner le code

body
{
width: auto;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la
fenêtre du navigateur. */
margin-bottom: 10px; /* aussi pour le bas du navigateur */
background-color: #33ffff; /* Un fond pour éviter d'avoir un fond
blanc */ }

L'en-tête

Pour l’entête on utilise  le 100 %.


Code : CSS

Sélectionner le code
#en_tete
{
width: 100%;
height: 100px;
background-image: url("images1/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
border: 1px solid black; }

Avec cette technique, pour changer la bannière de votre site il faudra modifier le fichier CSS et non le fichier
XHTML.

Le menu....

On mettra un width de (130/800)*100 = 16% par exemple

Sélectionner le code

#menu
{
float: left; /* Le menu flottera à gauche vous pouvez mettre
float:right */
width: 16%; /* Il est important de donner une taille au menu */
}

Pour le reste rien à changer

Le corps...

Pour le corps on va mettre un margin-left de  16.1 %


Code : CSS

Sélectionner le code
#corps
{
margin-left: 16.1 %;
margin-bottom: 20px;
padding: 10px;
color: #B3B3B3;
background-color: #524222;
background-image: url("images1/motif.png");
background-repeat: repeat-x;
border: 2px solid black;
}

Voilà vous avez une idée, vous pouvez alors remplacer toutes les valeurs en pixel par des pour cents, ainsi
vous aurez une page extensible.

Exemple de calcule

Soit le pading pour un élément de menu qui est de 20px le width du parent qui est #menu est 130px :

Donc le pading est : (20/130)*100 = 15 %.

Par carabde 10 mars 2014


HTML5, CSS3, JavaScript pour débutants Tome 1
(http://go.63617261626465z2ec6d65646961666f726d61.1.1tpe.net)
Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

(http://go.63617261626465z2ec7861766965723836.5.1tpe.net)

Visiteurs Massifs Google


Comment Obliger Google à vous envoyer Gratuitement 500 visiteurs Minimum par Jour ?
Des Visiteurs Prêts à acheter vos produits....[Livre PDF, audio, et Vidéo]
Formation en ligne (http://go.63617261626465z2ec7861766965723836.5.1tpe.net)
(http://go.carabde.sergeboisse.4.1tpe.net)

(http://go.carabde.page.10.1tpe.net)
(http://go.carabde.luondola.6.1tpe.net)

chapitre précédent (html-css-les-


flottants.php) chapitre suivant (les-tableaux.php)

Votre publicité ici

Rejoignez nous sur Google+ (https://plus.google.com/+FatimaSanhaji/?rel=author)

(http://www.annuaire-web-france.com/annuaire-webmaster.php)

(http://www.xiti.com/xiti.asp?s=544623) (http://www.hebdotop.com) © 2014


(http://www.classement.pro/)

Vous aimerez peut-être aussi