18041 sujets

Questions générales et questions de débutants

Mise en forme de l'élément <blockquote>

Bonjour,

J'ai voulu faire du "tout beau, tout propre" en utilisant l'élément <blockquote> et le personnalisant via la feuille css.
Après quelques prises de tête et recherches j'ai trouvé comment supprimer les guillemets par défaut qui sont affichées automatiquement. Par contre, je coince toujours sur la façon de les remplacer par une image. Bien entendu je pourrais le faire directement dans le code html et si j'ai testé avec succès, je sais que ce n'est pas l'idéal.
Quelqu'un pourrait m'aider ou m'orienter dans mes recherches ? Je penche pour un problème de positionnement mais je ne vois pas où cela coince si c'est le cas… C'est peut-être évident mais entre le fait d'être novice et d'avoir la tête dans le code depuis un moment, je ne vois plus rien… help ! Smiley sweatdrop

la page en ligne : http://artno.pagesperso-orange.fr/#haut

Extrait de la feuille html :

<blockquote>	
<q>Le respect de la personne dans sa dimension psychique est un droit inaliénable. Sa reconnaissance fonde l'action des psychologues.</q>
<p>Extrait du code de déontologie des psychologues.</p>		
</blockquote>


Extrait de la feuille css :

/* Citations */
blockquote {
	margin: 6.4em 0 0 150px;
	font-style: italic;
	font-family: Georgia, Norasi, serif;
	padding-left: 45px;
	background-image:url("../images/blockquote1.png") no-repeat;
}
blockquote, q {
	font-size: 1.3em;
	color: #999;
}
		/* Suppression des guillemets par défaut */
blockquote q:before, q:after {
	content:"";
}
blockquote p {
	font-size: 0.8em;
	color: #404040;
	text-align: right;
}


Par avance, merci de votre aide. Smiley smile
Salut,

D'abord, l'élément q est inutile dans blockquote (q sert à citer une citation insérée au fil du texte).

Ensuite, pour insérer un guillemet au niveau de blockquote, génère-le en CSS avec le pseudo-élément ::before (tu peux t'inspirer d'un exemple que tu trouveras sur une page de test de Raphaël).
J'avais cru bon utiliser l'élément <q> pour distinguer la citation de sa référence présentée sous <p> pour me permettre de personnaliser l'un et l'autre. Il est donc préférable de les passer sous les deux sous <p> et de personnaliser chacun via .class ?

Je vais voir la page test de Raphaël concernant le pseudo-élément ::before et je reviens faire le point. Merci pour le lien. Smiley cligne
Effectivement, l'emploi du pseudo-élément :before comme présenté dans la page test de Raphaël est une solution bien sympa. Encore merci Victor BRITO. Smiley smile

J'ai une question complémentaire concernant mon second paragraphe.
Je l'ai sorti de l'élément blockquote car effectivement, avec le recul je me rends compte qu'il n'y était pas à sa place. Par contre, pour le mettre en forme tu me suggères d'utiliser l'élément <cite>, est-ce vraiment adapté dans le sens où je ne souhaite pas faire un lien vers la référence mais simplement y faire référence. L'emploi de .class ne serait pas plus adapté ?
Bonsoir,

pour l'élément <blockquote>, tu peux, si cela s'avère nécessaire, rajouter l'attribut cite. Plus d'informations ici. D'ailleurs, si tu souhaites indiquer la références de la citation, c'est ce qu'il faut employer.

À propos de l'élément <cite>, on ne l'emploie que pour représenter le titre d'un travail. Plus d'informations ici.
Pour revenir aux guillemets, vous pouvez utiliser les pseudo éléments :
blockquote:before,
blockquote:after {
    content: "";
   /* votre code à personnaliser pour des guillemets en images, ou mieux injectant de 'vrais' guillemets avec la propriété 'content' */
   /* il faut ensuite déterminer la position pour chacun d'entre eux */
}

Modifié par Olivier C (31 Dec 2013 - 10:55)
Sujet clos
Aller à