Accéder au span dans div

Bonjour,
j'ai dans un fichier html (que je ne voudrais pas modifier) la ligne du genre

<h1>Titre</h1>

.
h1 est défini en bloc, mais je voudrais surligner (avec

background-color

) uniquement le texte et pas tout le cadre. Comment le définir dans le fichier css ?

Bonjour,

<h1><span>Titre</span></h1>

CSS:

h1 {
padding:0;
border: 1px solid gray
}
h1 span {
background: yellow;
margin:0
}

Merci pour la réponse rapide, mais est-ce possible sans modifier le fichier html ?

Salut,

A part passer le bloc en inline, je ne crois pas.

lamoi a écrit :
j'ai dans un fichier html (que je ne voudrais pas modifier)

Pourquoi? Quel est le problème?

Comme dit plus haut, passer le titre en display:inline permettrait de le faire, mais un titre en inline, n'est pas forcément ce qu'on veut...

Ne pas pouvoir modifier l'HTML est sacrément handicapant ! Je sais bien que le CSSZengarden a inspiré beaucoup de gens autant en mal qu'en bien, mais quand même...

lamoi a écrit :
Merci pour la réponse rapide, mais est-ce possible sans modifier le fichier html ?

Hello,

Ton titre de sujet est "Accéder au span dans div" : il semble logique qu'il y ait dans ton code HTML un élément <span> contenu dans un élément <div>, non ?

D'où vient ce <h1> par rapport au titre de ton sujet ?
Modifié par Raphael (31 May 2011 - 18:35)

Merci pour votre implication à tous !
En fait, j'ai des quantités de fichiers textes avec balises html, et je ne voudrais pas tout chambouler. J'aimerais mettre une image de fond et avoir un texte écrit en blanc. Mais pour que le texte soit lisible, je veux mettre un fond noir derrière les lettres du titre h1 (entre autres) mais pas dans tout le cadre. Peut-on donc accéder à la partie texte d'un div ?

Il me semble que tu n'arrêtes pas de changer le titre de ton post.
Dis-nous CLAIREMENT ce que tu désires réaliser et nous tâcherons de t'aider.
Si tes connaissances en HTML, CSS etc. ne sont pas au top, ça n'a aucune importance... mais ne tourne pas autour du pot (anagramme de "top" ) !

Montre-nous un peu de code pour voir de quoi il retourne et pour t'aider à atteindre ton objectif!
Modifié par lddsoft (31 May 2011 - 20:04)

Il faut vous l'écrire en quelle langue ?
J'ai <h1>Titre</h1> dans le code HTML. Et je veux qu'avec le css, juste le mot "Titre" soit en couleur et pas tout le bloc. Toi y en as comprendre ?

lddsoft a écrit :
Il me semble que tu n'arrêtes pas de changer le titre de ton post.
Dis-nous CLAIREMENT ce que tu désires réaliser et nous tâcherons de t'aider.

Heu, c'était clair depuis le début, en dehors du titre qui n'est certes pas bon vu qu'il n'y a pas de SPAN fantôme qui traine dans tout élément de type bloc. (Et aussi, un titre qui parle de DIV alors que l'exemple donné est un H1, c'est un peu donner le bâton pour se faire battre.)
Si nécessaire, le message de lamoi posté à 18:45 clarifie bien les choses.

Donc, si on a un code HTML comme ceci:

<h1>Un titre</h1>

Il n'y aura pas dans le DOM d'élément à l'intérieur de ce H1. Le premier et unique enfant du H1 sera un Text Node, et on ne peut pas styler les Text Node en CSS... uniquement les éléments et pseudo-éléments.

Que pourrais-ton faire avec des pseudo-éléments? Avec ::before et ::after, pas grand chose, car ils n'engloberont pas le texte. Avec ::first-line, on se raproche de ce que tu souhaites, mais ça ne marche plus dès que le texte passe sur deux lignes.
J'avais croisé une proposition en CSS3 pour pouvoir créer un pseudo-élément à l'intérieur d'un élément, un peu comme si on avait <h1><span>Un titre</span></h1> effectivement, mais je ne retrouve pas la référence et à ma connaissance ce n'est implémenté nulle part.

Tu as donc deux solutions à peu près viables:
1. Passer ton H1 en display:inline (gaffe aux effets indésirables...).
2. Utiliser JavaScript pour rajouter un élément à l'intérieur de ton H1, pour obtenir <h1><span>Un titre</span></h1> dans le DOM.
Modifié par fvsch (31 May 2011 - 22:12)

bonsoir,

heu ?

h1 {display:table;border-bottom:solid;}

Cordialement

Le display:table ne donnera pas le rendu souhaité lorsque le texte passe sur deux lignes. Même problème qu'avec :first-line. Du coup j'aurais tendance à conseiller :first-line, qui ne touche pas à l'élément lui-même et évite de mettre le bazar dans la fusion des marges (bug de Firefox avec display:table). Donc:

h1:first-line {
  color: white;
  background: black;
}

Ou pas.
Modifié par fvsch (31 May 2011 - 22:35)

@lamoi

lamoi a écrit :
Il faut vous l'écrire en quelle langue ? ... Toi y en as comprendre ?

Je n'apprécie pas du tout cette manière de s'adresser à quelqu'un qui essaie de vous aider.
D'ailleurs, ce n'est pas du tout dans les habitudes de ce forum.

Merci à ceux qui ont essayé correctement de m'aider.
Je voulais éviter de rajouter des span partout. Mais si je tiens à la fonction, je crois que j'y suis obligé.
Comprenez mon énervement quand je dois réexpliquer 36 fois la même chose par écrit et qu'en plus, on me prenne pour un abruti (Iddsoft). Pour le titre, c'est vrai que expliquer ce problème en un titre, c'est pas évident, mais l'idée y était.
Bravo encore pour votre suivi sur le forum. Mais essayez quand même de mieux comprendre les problèmes, de tester ce qui est demandé ou ce que vous proposez, ...
Sincères salutations,
Lamoi

Développement en cours du v-Jemaf 4
Modifié par Laurie-Anne (03 Jun 2011 - 17:27)

lamoi a écrit :
essayez quand même de mieux comprendre les problèmes

Ça arrive de ne pas comprendre, surtout quand certaines indications données (le titre) vont à l'inverse de la demande formulée. Chacun peut faire des efforts, de clarté ou de compréhension bien sûr, mais aussi de calme et de respect de ses interlocuteurs. Sur ce dernier point, le débat est clos, merci de ne pas le relancer ici (les échanges par message privé sont toujours possibles).