Chapitre 2 : emballage de la page Web
Jusqu'ici vous n’avons vu que des petits exemples, mais pas encore créer un site Web de
toutes pièces.
La suite que nous allons voire va nous permettre de créer un vrais site Web.
Mai avant il faut que le cours précédent soit bien maîtrisé et que surtout les balises vu
jusqu’à présent soient bien apprises.
Allez, un petit rappelle sur un point important ne fera de mal à personne
Block et Inline c'est diffèrent !
Et c'est cette différence qui va nous être utile.
Dans les chapitres précédents, nous avons parlé de "inline" et "blocks".
On parle des balises. On peut classer les balises XHTML dans une des 2 catégories : inline et block ( "En ligne" et "Bloc" en français).
Par exemple, <p></p> ? c'est une balise block.
Et <a></a> c'est une balise inline.
• Une balise de type "block" sur votre page web crée automatiquement un retour à la ligne . Il suffit d'imaginer tout simplement un bloc. Il est possible de mettre un block à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !
• inline : une balise de type "inline" se trouve obligatoirement à l'intérieur d'une balise "block". Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit à la suite du texte précédent, sur la même ligne (on parle de balise "en ligne").
Exemples :
Quelques balises courantes.
Balises blocks Balises inline
<p> <em>
<blockquote> <strong>
<h1> <q>
<h2> <a>
<ul> <img />
<ol>
Les balises universelles
Ces balises permettent appliquer une class (ou un id) pour le css quand aucune autre balise ne convient.
Il existe 2 balises génériques, l'une d'elle est inline, l'autre est block :
• <span></span> (inline) : on l'avons déjà utilisée.
Code : HTML
<p class="rouge24"><span class="nom">François René</span>, vicomte de Chateaubriand a dit : <q>L'amitié ? Elle disparaît <br/>quand celui qui est aimé tombe dans le malheur, ou quand celui qui aime devient puissant. </q>
</p>
•<div></div> (block) : c'est aussi une balise qui n'a aucun sens, comme span, mai celle-là est de type block. Elle nous sera très utile dans ce qui suivra pour créer le design de votre site. Un design, est une série de blocks qu'on dispose comme on veut.
Respectez la sémantique !
Les balises universelles sont "pratiques" dans certains cas, mais que si d'autres balises plus adaptées n' existent pas.
En XHTML, on vous demande d'utiliser tant que possible des balises qui ont un sens : on appelle ça respecter la sémantique.
L'avantage c'est que le code aura une certaine "logique". Lorsque le robot viendra référencer votre site, il "comprendra" le sens des balises et cela pourra améliorer votre position dans le moteur de recherche.
La taille de blocks
Intéressons nous à la taille des blocks. Un block a des dimensions précises. Il a une largeur et une hauteur.
Donc on dispose de 2 propriétés CSS :
• width : c'est la largeur du block. A exprimer en pixels (px) ou en pourcentage (%).
• height : c'est la hauteur du block aussi exprimée en pixels (px), ou en pourcentage (%).
Par défaut, un block prend 100% de la largeur disponible.
Le CSS peut modifier la largeur des paragraphes.
Le CSS suivant dit : " que tous les paragraphes aient une largeur de 50%".
Code : CSS
p
{
width: 50%;
text-align: justify; /* Texte justifié pour mieux voir la largeur du block */
}
Les pourcentages seront utiles pour créer un design qui s'adapte automatiquement à la résolution du visiteur.
Toutefois, on peut avoir besoin de blocks à une dimension précise en pixels :
Code : CSS
P
{
width: 200px;
text-align: justify;
}
taille minimale ou maximale
Par fois c'est pratique d'avoir un block avec une . C'est le rôle des 4 propriétés CSS suivantes :
• min-width : largeur minimale
• min-height : hauteur minimale
• max-width : largeur maximale
• max-height : hauteur maximale
Attention cependant, ces propriétés ne fonctionnent pas sous IE 6 et fonctionnent partiellement sous IE 7. Évitez de les utiliser tant qu'IE 6 est encore assez répandu.
Couper un block avec un overflow
Si vous avez un long paragraphe que vous vouliez qu'il ait 250px de large et 100px de haut.
Code : CSS
P
{
width: 250px;
height: 100px;
text-align: justify;
}
Si le texte n'a pas assez de place, le block va s'agrandir de manière à ce que tout soit visible. Si vous voulez "couper" votre paragraphe pour qu'il soit d'une dimension exacte de 250x100, vous allez devoir utiliser la propriété CSS overflow.
Les valeurs que peut prendre overflow sont les suivantes :
• visible (par défaut) : si le texte dépasse les limites de taille, le block est agrandi de manière à ce que tout soit visible. C'est ce que nous venons de constater.
• hidden : si le texte dépasse les limites, il sera tout simplement coupé. On ne pourra pas voir tout le texte.
• scroll : là encore, le texte sera coupé s'il dépasse les limites. Sauf que cette fois, le navigateur mettra en place des barres de défilement pour qu'on puisse voir tout le texte. C'est un peu comme un cadre à l'intérieur de la page.
• auto : mode "pilote automatique" :p. En gros, c'est le navigateur qui décide ou pas de mettre des barres de défilement (il en mettra si c'est nécessaire).
Avec ce CSS, nous allons pouvoir tester overflow :
Code : CSS
p /* Tous les paragraphes auront ces propriétés CSS */
{
width: 250px;
height: 100px;
text-align: justify;
}
/* Et chacun des paragraphes aura en plus une valeur d'overflow différente */
.coupe
{
overflow: hidden;
}
.barres_defilement{
overflow: scroll;
}
.auto
{
overflow: auto;
}
En hidden, on ne peut pas voir tout le texte.
En scroll, le navigateur a mis des barres de défilement verticales et horizontales (alors qu'on n'a pas besoin de la barre horizontale).
En auto, le navigateur s'est dit "Bah tiens, j'ai pas besoin de la barre horizontale, je vais l'enlever".
En pratique, vous vous en doutez, on se sert plutôt de overflow: auto;
L'overflow vous sera très utile si vous avez besoin de créer des "cadres" à l'intérieur de votre page web.
Il existe une ancienne balise HTML, <iframe>, qui donne à peu près le même résultat. Toutefois, cette balise n'existe plus en XHTML (elle est dépassée). Il vous faudra donc utiliser un overflow à la place.
Les bordures des blocks
Le CSS vous offre un large choix de bordures pour décorer votre page. Tellement large que si je vous en faisais la liste complète vous sauriez étourdie.
Alors, pour aller à l'essentiel, j'ai décidé de vous montrer uniquement la grand-propriété qui regroupe tout. Vous vous souvenez d'une grand-propriété ? on en a vu une : pour le fond de votre page Web. Là, on va directement étudier la grand-propriété, car c'est le plus pratique.
La grand-propriété en question, c'est border. Elle permet d'indiquer quelle bordure on applique au block.
Comme toute grand-propriété , vous pouvez lui mettre plusieurs valeurs (ici, il y a 3 valeurs ). Vous n'êtes pas obligés de mettre toutes les valeurs et l'ordre dans lequel vous mettez ces valeurs n'a pas importance.
Comme je viens de vous le dire, pour border on peut utiliser jusqu'à 3 valeurs pour modifier l'apparence de la bordure :
• La largeur : indiquez la largeur de votre bordure.
Mettez une valeur en pixels (comme 2px), ou utilisez un des mots-clé suivants :
• thin : bordure fine
• medium : bordure moyenne
• thick : bordure épaisse
C'est le navigateur qui choisit le nombre de pixels qui correspond à thin, medium et thick.
• 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 hexadécimale (#FF0000), soit une valeur rgb (rgb(198, 212, 37))
• Le type de bordure : là, vous avez pas mal de choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets etc... Voici les différentes valeurs disponibles :
• none : pas de bordure (par défaut)
• solid : un trait simple.
• dotted : pointillés.
• dashed : tirets.
• double : bordure double.
• groove : en relief.
• ridge : effet 3D.
• inset : autre effet 3D (on a l'impression que le block forme un creux).
• outset : encore un autre effet 3D (on a l'impression que le block est surélevé).
Testons maintenant un peu tout ça
Code CSS:
p
{
width: 300px; /* Tous les paragraphes font 300px */
text-align: justify; /* Tous les paragraphes sont justifiés */
}
.rien
{
border: none;
}
.solid
{
border: 2px solid black;
}
.dotted
{
border: 2px dotted green;
}
.dashed
{
border: 2px dashed red;
}
.double
{
border: 4px double maroon;
}
.groove
{
border: 4px groove teal;
}
.ridge
{
border: 4px ridge fuchsia;
}
.inset
{
border: 3px inset black;
}
.outset
{
border: 3px outset black;
}<
En haut, à droite, à gauche, en bas...
Si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème. Dans ce cas, vous devrez utiliser ces 4 propriétés :
• border-top : bordure en haut.
• border-bottom : bordure en bas.
• border-left : bordure à gauche.
• border-right : bordure à droite.
Ce sont aussi des grand-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.
Voici quelques tests de bordures.
Code : CSS
p
{
width: 350px;
}
h2
{
border-bottom: 2px solid black;
}
.haut_bas
{
border-top: 1px dashed red;
border-bottom: 1px dashed red;
}
.points
{
border-top: 3px dotted blue;
border-left: 2px solid green;
border-right: 2px solid green;
border-bottom: 3px dotted blue;
}
.trais_solide
{
border-left: 6px solid black;
border-right: 6px solid gray;
}
En particulier, vous remarquerez que j'ai appliqué une bordure en bas du titre. Ca n'a rien à voir avec un soulignement.
Je vous l'ai dit plus haut : par défaut, un block (comme le titre) prend 100% de la largeur disponible. En l'occurrence, le block prend la largeur de toute la fenêtre. Le fait de mettre une bordure en bas du titre révèle qu'il prend effectivement toute la largeur.
C'est une technique décorative assez "classe" que d'utiliser un border-bottom sur un titre. Le titre crée ainsi une ligne de séparation, ce qui rend votre page plus structurée. Au fait, si vous voulez appliquer la même bordure aux 4 côtés de votre block, ne vous fatiguez pas à utiliser ces propriétés. Utilisez plutôt border qui s'applique à tous les 4 côtés simultanément.
Ca marche aussi sur des balises inline !
Je vous ai dit que toutes les propriétés CSS que nous voyons dans ces chapitres s'appliquent le plus souvent aux blocks... Mais pas toujours. Par exemple, on peut utiliser border sur des balises inline.
Il y a une balise inline sur laquelle on utilise fréquemment border : c'est <img /> (pour les images). En effet, vous vous souvenez que si vous transformez une image en lien, elle se voit dotée d'une immonde bordure bleue :
Code : HTML
<p>
Vous voulez faire un teste alors mettez à la place de mon-image le nom d’une image que vous voulez et testez le code<br />
<a href="http://www.site.com"><img src="images/mon-image.jpg" alt="image" title="Clique pour voir !" /></a>
</p>
Maintenant, avec la propriété border du CSS vous allez pouvoir éviter ce petit désagrément :
Code : CSS
a img /* Toutes les images contenues dans un lien */
{
border: none; /* Pas de bordure */
}
A la place de "border:none", j'aurais pu utiliser "border:0px" ou encore "border:0" (ça marche aussi). D'ailleurs, la plupart des webmasters ont tendance à mettre "border:0" tout simplement parce que c'est le plus court.
Les marges : margin et padding
Si vous ne savez pas précisément comment fonctionnent les marges des blocks, vous serez bien embêtés lors de la création de votre design !
Tous les blocks possèdent des marges. Ce qui est important, c'est de savoir qu'il existe 2 types de marges :
• Les marges intérieures
• Les marges extérieures
Regardez bien ce schéma :
Sur ce block, j'ai mis des couleur pour qu'on repère mieux ses bords.
L'espace entre le texte(représenté par la couleur bleu) et le bord du carré jaune est la marge intérieure (le petit trait rouge).
L'espace entre le bord du carré jaune et le prochain block le bord du carré blanc est la marge extérieure (le petit trait vert).
En CSS, on peut modifier la taille des marges avec les 2 propriétés suivantes :
• padding : indique la taille de la marge intérieure. A exprimer en général en pixels (px).
• margin : indique la taille de la marge extérieure. Là encore, on utilise le plus souvent des pixels.
Pour bien voir les marges, prenons 2 paragraphes auxquels je mets une bordure :
Ecrivez deux paragraphes dans votre page xhtml et appliquez le code CSS suivant :
Code : CSS
p
{
width: 400px;
border: 1px solid black;
text-align: justify;
}
Comme vous pouvez le constater, il n'y a par défaut pas de marge intérieure (padding). En revanche, il y a une marge extérieure (margin). C'est cette marge qui fait que 2 paragraphes ne sont pas collés et qu'on a l'impression de "sauter une ligne".
Les marges par défaut ne sont pas les mêmes pour toutes les balises block. Essayez d'appliquer ce CSS à des balises <div> qui contiennent du texte par exemple, vous verrez que là il n'y a par défaut ni marge intérieure, ni marge extérieure !
Supposons que je veuille rajouter une marge intérieure de 12px aux paragraphes :
Code : CSS
p
{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px; /* Marge intérieure de 12px */
}
Maintenant, je veux que mes paragraphes soient plus espacés entre eux. Je rajoute la propriété margin pour demander à ce qu'il y ait 50px de marge entre 2 paragraphes :
Code : CSS
p
{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: 50px; /* Marge extérieure de 50px */
}
Margin (comme padding d'ailleurs) s'applique aux 4 côtés du block.
Si vous voulez indiquer une marge en haut, en bas, à gauche et à droite, il va falloir utiliser des propriétés plus précises... Et vous allez voir que les créateurs du CSS se sont pas foulés, ça fonctionne comme pour border
En haut, à droite, à gauche, en bas... Et on recommence !
Ce qui serait bien, ce serait que vous reteniez les traductions suivantes en anglais :
• top : haut
• bottom : bas
• left : gauche
• right : droite
Comme ça, vous pouvez retrouver toutes les propriétés de tête.
Je vais quand même vous faire la liste des propriétés pour margin et padding, histoire que vous soyez sûrs que vous avez compris le principe.
Voici la liste pour margin :
• margin-top : marge extérieure en haut.
• margin-bottom : marge extérieure en bas.
• margin-left : marge extérieure à gauche.
• margin-right : marge extérieure à droite
Et la liste pour padding :
• padding-top : marge intérieure en haut.
• padding-bottom : marge intérieure en bas.
• padding-left : marge intérieure à gauche.
• padding-right : marge intérieure à droite.
Pour tester on va utiliser margin-bottom pour indiquer un espace en bas de chaque paragraphe, ce qui nous évitera d'avoir une marge à gauche comme tout à l'heure.
Et aussi, je vais rajouter une marge à gauche pour le titre (h1) afin qu'il soit un peu décalé.
Code : CSS
p
{
width: 350px;
border: 1px solid black;
text-align: justify;
padding: 12px;
margin-bottom: 50px;
}
h1
{
margin-left: 30px;
}
Centrer des blocks
Il est tout à fait possible de centrer des blocks, c'est même très pratique pour réaliser un design centré quand on ne connaît pas la résolution du visiteur.
Toutefois, et c'est très important, cela ne fonctionne que si vous avez indiqué une largeur précise (width) au block. Si vous n'avez pas indiqué de largeur, le block ne sera pas centré !
Prenons le cas de nos petits paragraphes. On leur a déjà donné une largeur précise ; maintenant si on veut les centrer sur notre écran nous allons mettre la valeur "auto" à la propriété margin, comme ceci :
Code : CSS
p
{
width: 350px; /* On a indiqué une largeur (obligatoire) */
border: 1px solid black;
text-align: justify;
padding: 12px;
margin: auto; /* On peut donc demander à ce que le block soit centré avec "auto" */
margin-bottom: 20px;
}
Ainsi, le navigateur centre automatiquement nos paragraphes. N'oubliez pas, je le répète, que le margin:auto ne peut fonctionner que si vous avez indiqué une largeur précise pour votre block !
Transformer un inline en block (et vice-versa)
Nous allons apprendre ici à modifier les lois du CSS.
Les images ( <img /> ) sont des balises de type inline, et vous préféreriez que ce soient des blocks ?
Les titres ( <h1> ) sont de type block, et ça vous souhaitez que ça soient des balises inline ?
La propriété très puissante CSS, display permet de faire çà.
Elle peut prendre les valeurs suivantes :
• block : la balise deviendra de type block.
• inline : la balise deviendra de type inline.
Elle peut prendre beaucoup d'autres valeurs mais je vous montre juste les 2 plus utilisées.
Pour transformer une balise inline en balise de type block taper :
display:block;
Exemple: je veux que TOUTES mes images soient de type block, j'écrirai donc ceci :
Code : CSS
img
{
display: block;
}
Après quoi toutes vos images vont aller automatiquement à la ligne, comme le font les autres balises de type block.
On peut très bien utiliser l'attribut "class" sur une balise pour qu'elle ait une présentation différente.
Par exemple :
Code : HTML
<img src="image.png" alt="Cette image est normale (type inline)" />
<img src="image.png" class="imageblock" alt="Cette image est modifiée (type block)" />
Il faudra écrire le code CSS suivant pour que la deuxième image soit de type block :
Code CSS
.imageblock
{
display: block;
}
Et l'inverse alors ? Pour transformer une balise de type block en balise de type inline c'est pareil, sauf qu'on utilise display:inline.
Les flottants
La première technique que nous allons voir, ce sont les flottants.
Pour que vous voyiez bien de quoi on parle, voici ce que nous allons apprendre à faire :
Cela permet en gros d'"entourer" un élément (ici une lettre) par du texte. Ca permet d'avoir une jolie présentation.
La propriété qui fait flotter est... float ("flottant"). Cette propriété peut prendre 2 valeurs :
• left : l'élément flottera à gauche.
• right : l'élément flottera... à droite .
L'utilisation des flottants est simple :
1. Vous appliquez un float à une balise.
2. Puis vous continuez à écrire du texte normalement.
On peut aussi bien utiliser la propriété float sur des balises block que sur des balises inline.
Faire flotter une image
Nous allons faire flotter une image. Voici le code XHTML que nous devons taper dans un premier temps :
Code : HTML
<p><img src="images/mon-image.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ceci est un texte de paragraphe, qui doit être écrit à la suite de l'image
mais qui l'"entourera" car l'image est flottante.<br />
Votre texte votre texte votre texte votre texte votre texte votre texte <br/>
votre texte Votre texte votre texte votre texte votre texte votre texte <br/>
votre texte Votre texte votre texte votre texte votre texte votre texte <br/>
votre texte Votre texte votre texte votre texte votre texte votre texte <br/>
votre texte Votre texte votre texte votre texte votre texte votre texte <br/>
votre texte Votre texte votre texte votre texte votre texte votre texte <br/>
</p>
Une erreur courante que l'on a tendance à faire, c'est de mettre l'image flottante après le texte. Non, il ne faut pas : le flottant doit être avant le texte, qu'il flotte à droite ou qu'il flotte à gauche c'est pareil.
Vous essaierez de mettre la balise <img /> après le paragraphe, et vous verrez que ça ne marche plus
Ce qu'il faut bien comprendre maintenant, c'est qu'on a juste besoin de modifier le CSS de l'image, et non pas du paragraphe. Le paragraphe n'a pas besoin d'être modifié, il sera automatiquement placé comme il faut.
Voici le seul bout de code CSS qu'on a besoin de taper, qui permet de faire flotter l'image à gauche :
Code : CSS
.imageflottante
{
float: left;
}
Faire flotter la première lettre d’un paragraphe :
Tapez le code XHTML suivant dans votre page html :
Code : HTML
<p> Nous sommes fin décembre et le juge du tribunal correctionnel est de bonne humeur. Il demande au prisonnier :<br/>
- Quelles sont les faits qui vous sont reprochés ? <br/>
- On me reproche d’avoir fait mes achats de Noël trop tôt! <br/>
- Mais ce n’est pas un crime ça. Et comment ça, trop top ! <br/>
- Ben, avant que le magasin n’ouvre….
</p>
Et tapez le code suivant dans le fichier css :
Code : CSS
p:first-letter /* Je veux que la première lettre de mes paragraphes... */
{
float: left; /* Flotte à gauche */
font-size: 3em; /* Fasse une hauteur de 3 lignes */
font-weight: bold;
}
Vous pouvez changer la couleur de la police, ajouter une marge à droite etc…dans ce code css.
Stopper un flottant
Quand vous mettez en place un flottant, le texte l'"entoure", ça on l'a compris.
Mais comment faire si vous voulez qu'au bout d'un moment le texte continue en dessous du flottant ? On pourrait faire plusieurs <br /> à la suite, mais ça serait pas pratique ni très propre...
Il existe en fait une propriété CSS (sans blague) qui permet de dire : "Stop, ce texte doit être en dessous du flottant et non plus à côté". C'est la propriété clear qui peut grosso modo prendre 3 valeurs :
• left : le texte se poursuit en dessous après un float:left;
• right : le texte se poursuit en dessous après un float:right;
• both : le texte se poursuit en dessous, que ce soit après un float:left; ou après un float:right;
On utilisera toujours le clear:both, qui marche après un flottant à gauche et après un flottant à droite.
Code : HTML
<p><img src="../images/mon-image.gif" class="imageflottante" alt="Image flottante" /></p>
<p>Ce texte est écrit à côté de l'image flottante.</p>
<p class="dessous">Ce texte est écrit sous l'image flottante.</p>
Code : CSS
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
On applique un clear:both; au paragraphe que l'on veut voir continuer sous l'image flottante.
Position absolu, fixe et relatif
Il existe 3 façons de positionner un block en CSS :
• La Position absolu : il nous permet de placer un block n'importe où sur la page.
• La Position fixe : c'est pareil que le Position absolu, mais cette fois le block reste toujours visible, même si on descend plus bas dans la page. C'est un peu comme le background-attachment:fixed.
• La Position relatif : c'est le plus compliqué des trois. En gros, ça nous permet de déplacer un block par rapport à sa position normale.
La Position absolu, fixé et relatif fonctionne aussi sur des balises de type inline comme <img />
Vous verrez qu'on l'utilise plus souvent sur des balises block que sur des balises inline.
On utilise la propriété CSS position à laquelle on donne une de ces valeurs :
• absolute : Position absolu.
• fixed : Position fixe.
• relative : Position relatif.
Le Position absolu
Pour effectuer une Position absolu, il faut taper :
position:absolute;
Il faut ausi dire où on veut que le block soit positionné sur la page.
On va réutiliser 4 propriétés CSS:
• left : position par rapport à la gauche de la page.
• right : position par rapport à la droite de la page.
• top : position par rapport au haut de la page.
• bottom : position par rapport au bas de la page.
On peut leur donner une valeur en pixels, comme "20px", ou bien une valeur en pourcentage, comme "30%".
Si on écrit par exemple :
position:absolute;
right:0px;
bottom:0px;
Ce qui veut dire que le block doit être positionné tout en bas à droite (0 pixels par rapport à la droite de la page, 0 par rapport au bas de la page).
Pour le coup, on va utiliser la balise universelle <div> comme suit.
Code : HTML
<p>
Ceci est un paragraphe normal.<br />
Oui, mais comme on ne peut prendre le temps à la légère, il faut bien se choisir et choisir bien les saisons des moissons.On n'acouche pas d'un chef d'oeuvre en même temps que de son ébauche.La certitude du génie lui fait savourer sa patience et que dire de ces vieux distraits qui meurent jeunes. Temoin Michel-Ange qui laisse un oeuvre inachevée.</p>
<div>Block positionné</div>
Vous avez un paragraphe suivi d'un block div qui contient un peu de texte.
Maintenant, ajoutons du CSS pour positionner où on veut notre block div :
Code : CSS
div
{
background-color: #229966;
border: 1px solid #002200;
position: absolute;
left: 15px;
top: 20px;
}
J'ai mis un fond vert et une bordure pour qu'on repère le block.
Comme vous le constatez, le block se met au-dessus du paragraphe. Il le masque. Vous pouvez mettre votre block où vous voulez sur la page, mais il faut faire attention à ce qu'il ne masque pas de texte.
Autre exemple:
Code : CSS
div
{
background-color: yellow;
border: 1px solid green;
position: absolute;
right: 50%;
bottom: 20px;
}
Remarque :
Si vous positionnez un block A en absolu, et à l'intérieur de ce block vous positionnez un autre block B en absolu, la Position ne se fera plus par rapport à la fenêtre mais par rapport au block A.
La Position fixe
Le Position fixe fonctionne sur tous les navigateurs, sauf sur Internet Explorer 6 et les versions antérieures.
Au lieu de faire position:absolute;, on va taper position:fixed; dans notre CSS. Comme tout à l'heure.
Le position:fixed; est particulièrement utile pour faire un menu qui reste toujours visible :
Code : CSS
div
{
background-color: yellow;
border: 1px solid green;
width: 150px;
height: 250px;
position: fixed;
right: 40px;
top: 60px;
}
p
{
width: 300px;
}
La Position relatif
Plus délicat, le Position relatif peut vite devenir une grosse prise de tête si on n'y fait pas très attention. Personnellement, je ne l'utilise pas beaucoup.
Le Position relatif sert généralement à faire des "ajustements".
Prenons par exemple un texte important, situé entre 2 balises <strong>.
Pour commencer, je le mets sur fond rouge pour qu'on puisse mieux le repérer :
Code : CSS
strong
{
background-color: red; /* Fond rouge */
color: yellow; /* Texte de couleur jaune */
}
Donc, si vous faites un position:relative et que vous appliquez une des propriétés top, bottom, left, right, le texte sur fond rouge va se déplacer par rapport à la position où il se trouve.
Faites, des tests pour bien comprendre.
Prenons donc un exemple : je veux que mon texte se décale de 20 pixels vers la droite et de 10 pixels vers le bas.
Code : CSS
strong
{
background-color: #220000;
color: #0000FF;
position: relative;
left: 20px;
top: 10px;
}
Le texte s'est décalé par rapport à sa position initiale.
Retourner au haut de la page..
|
Apprendre
...Précèdent...