Ajouter un texte sur la bordure d'un blockquote

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,
j'aimerais mettre un texte sur la bordure d'un blockquote (un peu comme ce que l'on peut faire avec un fieldset, voir ici) mais j'arrive pas à voir comment le faire.

Si vous avez des idées/pistes, je suis preneur !
Merci d'avance !

La curiosité est le plus beau des défauts

+0 -0
Staff

peut-être avec un ::before? Par exemple un petit essai:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<style>
p{
 border-style:solid;
 border-width:1px;
 border-color:black;
 min-height:25px;
padding:5px;
}
p::before { 
    margin-top:-15px;
    margin-left:25px;
    position:absolute;
    content: "Read this -";
    background-color: yellow;
    color: red;
    font-weight: bold;
}
</style>
</head>
<body>

<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>

</body>
</html>

donne ceci :

resultat du test

Édité par artragis

+0 -0
Auteur du sujet

C'est presque ça, il y a deux trucs qui posent problèmes :

  • Si j'enlève le surlignage, l'on voit toujours la bordure derrière, comme faire pour retrouver la coupure comme dans le fieldset ? (c'est le problème le moins grave)
  • Le texte que je dois mettre est généré dynamiquement, or là, il est directement inscrit dans le fichier CSS.

Merci encore pour ton aide ! Visiblement, je ne connais pas bien toute les fonctionnalités de CSS :-°

Édité par Dark Patate

La curiosité est le plus beau des défauts

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Pour la partie generée, j'ai tendance à penser à du js : Tu generes un p avec un attribut data-cartouche dans lequel il y a ton texte puis tu utilises js pour transformer ca en ::before. D' ailleurs il me semble qu'avec css3 tu peux même utiliser la valeur del'attribut directement.

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

Exact :

1
2
3
blockquote::before{
    content: attr(data-cartouche);
}

Par contre utiliser du JS pour générer des trucs, pas sûr que ce soit super utile… Ça fait une couche de plus pour pas grand chose.

Autant restreindre le design si c'est pas faisable naturellement que d'ajouter une couche de JS qui va ralentir le tout pour pas grand chose.

Édité par viki53

Auteur du sujet

Merci pour vos réponses ! Je penses que je vais regarder les deux techniques pour voir laquelle est la meilleure. Si jamais j'ai des problèmes je reviendrais, mais je pense que ça devrait aller.

Merci encore !

La curiosité est le plus beau des défauts

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte