Encadrer les Hx

[Gribouille26]

Bonjour,

Je faisait des essais pour mettre un cadre autour du mes H1...

Avec border, mon cadre fait la taille du conteneur en longueur...

Je ne sais pas comment reduire le cadre à la taille de texte, sachant que mes H1 ne font pas toujours la même taille...

[Guest narcisse]

Bonjour,

Avez vous essayé de donner un width au h ?

[Sebastien]

Je dis peut etre une betise mais avec un display inline la bordure ne devrait plus prendre toute la largeur disponible, selulement celle occupée par le texte. Ou un span dans le h1 peut etre?

[Gribouille26]

narcisse: Le probleme est justement que ne peux pas lui donner de largeur car tous ne font pas la même....

Sebastien: Je ne peux pas mettre de display:inline car mes H1 sont parfois, souvent sur 2 lignes...

Le <span>, c'est pourquoi?

[édit] Eh non, le span dans le H1 ne change rien...[/édit]

Modifié 6 Octobre 2004 par Gribouille26

[Guest narcisse]

Avec un width:auto;

[Gribouille26]

Non....

[Sebastien]

le span est un élément inline. je pensais donc qu'en applicant ta bordure au span et en mettent le h1 dans le span, la bordure n'encadrerait que le texte et non 100% de la largeur

[Jan]

le span est un élément inline. je pensais donc qu'en applicant ta bordure au span et en mettent le h1 dans le span, la bordure n'encadrerait que le texte  et non 100% de la largeur

<{POST_SNAPBACK}>

Bien sûr que ça marche:

<h1><span style="border:1px solid #000;">texte encadré</span> suite du texte</h1>

[Gribouille26]

Super! Ca marche...

Désolée Sebastien, j'avais mal compris/réflechit et laissé le border au h1...

Merci!

Et merci Jan pour la confirmation!

[Gribouille26]

Du fait que ce soit un élément inline, ça ne marche pas si mon H1 est sur deux lignes: voir ici...

Ce là dit, je vais mettre sur une ligne, c'est pas le problème du siècle...

Je pourrai sinon, mettre mon H1 dans une div... mais je voulais faire simple...

[Sebastien]

Oh bah ça donne un style

[Gribouille26]

C'est vrai que ça fait 5 minutes que je regardait en pensant à autre chose, et finalment, je trouva ça beau!

Je dééééécoooooonne....,

je vais pas laisser, c'était juste pour que vous voyez... je vais aller mettre sur une ligne...

[LaurentDenis]

Pour la petite histoire, un display: table-cell permet de ramener la bordure d'un titre à son texte au lieu de l'étendre à la zone d'affichage.

[Gribouille26]

J'ai essayé le display:table-cell dans le h1 en enlevant le span, mais rien...

[LaurentDenis]

Si tu as testé dans IE, c'est normal : son implémentation de display: table-cell est buggué. Cette propriété fonctionne en revanche dans Opera, Mozilla/Firefox, Safari...

[Denis]

Considérant la nature du site, je ne crois pas que Gribouille26 puisse se permettre d'utiliser quelque chose de partiellement buggé dans un navigateur aussi minable euh, je veux dire populaire que Internet Explorer.

J'ai un cas semblable sur un projet que je fais actuellement et la seule manière 'efficace' de m'en tirer - c'est-à-dire tirant suffisamment les compromis - était effectivement de passer mon <h3> (parce que dans mon cas, il s'agissait uniquement de h3) en mode inline plutôt que de la laisser en mode block. Dans mon cas, le design voulait qu'ue ligne au dessus du <h3> se poursuive à l'infini, mais qu'un background sous le <h3> se limite au texte... il a donc fallu que je mette mon <h3> dans un div pour a bordure du haut, pour ensuite passer le display: inline sur le <h3> avec les propriétés de background appropriées.

En espérant que cette tranche de vie puisse aider un peu...