Ajouter un texte sur la bordure d'un blockquote

Le problème exposé dans ce sujet a été résolu.

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

+0 -0

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 :-°

+0 -0

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

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.

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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