<hier>WEBLOG</hier>

Dimanche 30 avril 2006 | link |

Balise <blockquote> et retraits

Tout débutant (enfin, beaucoup...) en création de page web constate que l'utilisation balise blockquote induit un retrait du texte. Déduction : la balise blockquote est faite pour mettre un texte en retrait...

Et bien non ! Elle n'est pas du tout faite pour cela. "Quote" en anglais veut dire "citer". La balise blockquote doit donc être utilisée pour mettre en relief un "bloc" de citation.
Exemple :

L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe.

L'utilisation de l'élément BLOCKQUOTE pour obtenir le retrait d'un texte est déconseillée en faveur de l'utilisation de feuilles de style.

Source (x)html

  
<blockquote 
cite="http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.2">
<p>
L'élément BLOCKQUOTE indique une citation longue 
(avec un contenu de type bloc) et l'élément Q 
est censé être utilisé pour des citations courtes 
(avec un contenu de type en-ligne) ne nécessitant 
pas un saut de paragraphe.
</p>
<p>
L'utilisation de l'élément BLOCKQUOTE 
pour obtenir le retrait d'un texte est déconseillée 
en faveur de l'utilisation de feuilles de style.
</p>
</blockquote>

Tout est dit dans cet extrait des spécifications du html 4.01. Pour obtenir un retrait, il faut donc utiliser les CSS.

Pour induire le retrait d'un paragraphe, on lui assignera une marge gauche (margin-left) d'autant de pixels que souhaités.
Si l'on désire répeter plusieurs fois cette mise en forme dans la page, il sera évidemment préférable d'utiliser le sélecteur class.

Source CSS

.retrait {
margin-left:50px;
}

Source (x)html

<p class="retrait">
Ce paragraphe est en retrait de 50 pixels 
du bord gauche.
</p>

Résultat

Ce paragraphe est en retrait de 50 pixels du bord gauche.

Pourquoi faire compliqué quand on peut faire simple ? shadock

je decouvre le site et bien que convaincu par la mise en page css je vois que dans ton exemple (cadre petite annonce de la maison) tu as une différence de marge entre IE et mozilla. existe il un moyen de gerer de phénomène?
Merci d'avance pour la réponse je poursuis la visite.

hervé - 13-05-2006 - 23:14

Malheureusement, le jour où IE comprendra le langage html n'est pas encore arrivé ;o((

Gwen - 30-05-2006 - 14:37

Tout à fait Gwen ! ;)

Cela dit, j'avais répondu à Hervé par mail. Je pensais tout d'abord qu'il parlait du centrage dans la page (effectif avec firefox, mais pas IE), mais en faitc'était des marges intérieures dont il était question.
Pour ce problème, toutes les explications sont là :
http://openweb.eu.org/articles/dimensions_boites_css/

Pascale - 31-05-2006 - 15:04

Bonjour,
Bien que je ne sois pas de vos élèves (et je le regrette) ni une connaissance proche (idem), j'ai beaucoup apprécié votre site où j'ai enfin trouvé la solution à un problème de css qui me mettait des bâtons dans les roues. Simple, clair et agréable, c'est le genre de site que j'aimerais croiser plus souvent. Bonne continuation...

Amélie - 09-06-2006 - 11:55

Je ne pense pas que tous mes élèves partagent cet enthousiasme ;), mais ce n'est pas grave : merci Amélie de tous ces compliments :)

Pascale - 10-06-2006 - 21:41

Private Joke (et compliment pour Amélie pour ses compliments sur la qualité de la pédagogie de Pascale): on n'a pas toujours (souvent?) les élèves qu'on mérite. ;-)

aqb - 12-06-2006 - 01:02

A qui le dis-tu !! ;)

Pascale - 12-06-2006 - 11:24

Je découvre les CSS et je fais des essais avec votre site qui est très bien fait (sobre mais élégant !).

J'ai l'impression avec en regardant le code source que des "class" sont appelées mais n'existent pas dans la CSS (ex : paramenu, cours, jardin). Pourriez-vous m'éclairer ?
Merci d'avance

marion - 15-06-2006 - 15:15

Bonjour Marion,

Ces sélecteurs sont utilisés dans l'ancienne feuille de style ( http://mammouthland.free.fr/index2.css ) que l'on peut encore visualiser avec l'habillage "parme" (voir menu déroulant de haut de page).

Pascale - 15-06-2006 - 17:39

| Laisser un commentaire |

| Index | Avant | Archives |