[Résolu] Encadrement titre

Bonjour à tous,

je suis tout nouveau sur ce site et débutant : je voudrais encadrer des titres. J'aimerais pouvoir me servir de la balise h2.
Or quand je donne un style CSS, le cadre prend toute la page. Je voudrais qu'elle colle au titre (avec un padding ou un margin x).

Question subsidiaire : peut-on le faire avec des coins arrondis ?

Merci d'avance

Osiris
Modifié par osiris (01 May 2007 - 14:29)

Salut,

En ce qui concerne ton petit soucis, essai ceci :
html

<h2 class="solid">mon texte encadré par une bordure</h2>
<h2 class="dotted">mon texte encadré par une bordure</h2>
<h2 class="dashed">mon texte encadré par une bordure</h2>
<h2 class="double">mon texte encadré par une bordure</h2>
<h2 class="groove">mon texte encadré par une bordure</h2>
<h2 class="ridge">mon texte encadré par une bordure</h2>
<h2 class="inset">mon texte encadré par une bordure</h2>
<h2 class="outset">mon texte encadré par une bordure</h2>

css

.solid{
   border: 2px solid black;
}
.dotted{
   border: 2px dotted green;
}
.dashed{
   border: 2px dashed red;
}
.double{
   border: 4px double maroon;
}
.groove{
   border: 4px groove teal;
}
.ridge{
   border: 4px ridge fuchsia;
}
.inset{
   border: 3px inset black;
}
.outset{
   border: 3px outset black;
}

a écrit :
peut-on le faire avec des coins arrondis ?

En effet, c'est tout à fait possible mais le codage est différent .

Pour finir, je t'ai fait cela de tête mais je pense que c'est bon à vue de nez . Là, j'ai codé en classe afin que tu te rendes compte des différentes bordures. Au lieu d'utiliser la classe change le ciblage en h2

@+
Modifié par Nolem (01 May 2007 - 09:31)

En fait la solution de Nolem ne résoud pas le problème du titre qui prend toute la largeur. Pour ça, je pense qu'il faut essayer avec un display:inline ou alors un float:left.

Quant aux coins arrondis, donne-nous une image de ce que tu veux faire exactement. Mais ça donne vite un code assez lourd pour ce genre d'effet.

"<nicolas>" a écrit :
En fait la solution de Nolem ne résoud pas le problème du titre qui prend toute la largeur.

oups,

j'oubliais de signaler une autre propriété afin de contraindre une dimension au bloc h2.

Ceci est à rajouter au CSS précité :

h2{
  width:300px;padding 10px
}
/*width = largeur du bloc ; padding = marge intérieur*/

"<nicolas>" a écrit :
...ça donne vite un code assez lourd pour ce genre d'effet.

Tout à fait d'accord avec toi . En ce moment, je me tape le crane afin d'optimiser au mieux un bloc (suivant mes tags que j'ai sur ma page acheuteumeuleu). Mais bon, je vais être obliger d'utiliser des div supplémentaires bien que j'ai retouné la question dans tous les sens

@+
Modifié par Nolem (01 May 2007 - 09:54)

merci de vos réponses.

toutefois, cela ne résoud pas mon broblème de largeur fluide, car j'ai plusieurs titres dans ma page.

Pour le résoudre, je mets le titre dans un tableau à une cellule. Mais, peut-on pas faire autrement et n'est-ce pas trop lourd. ?

osiris

tu peux mettre ton titre en display inline, et tu définis des padding pour gérer l'espace entre le cadre et le texte.
Cependant, il assez embêtant d'avoir tout le titre en display inline, en effet, ca t'enlève la propriété, bien utile, du retour à la ligne automatique apres et tu ne peux plus mettre de marge, le mieux c'est peut être donc ca :

<h2><span>titre</span></h2>

h2 {
...
}
h2 .span {
border: solid 1px #000;
padding: 3px
}

Pour les cadres plus graphiques, tu peux utiliser une image de fond mais, comme tes titres ont des largeurs variables, c'est sans doute difficle à mettre en place...

yahrou a écrit :
Cependant, il assez embêtant d'avoir tout le titre en display inline, en effet, ca t'enlève la propriété, bien utile, du retour à la ligne automatique apres.

Bonjour,
Pour info, la propriété clear permet justement de gérer ce type de problème...

La propriété clear sert si on a utilisé un float, mais quel est le rapport avec un display inline ?

Personnellement, je préfère éviter la propriété float pour la mise en page interne du texte, ou alors seulement si elle est vraiment util, comme pour une photo, ou un bloc en marge d'un paragraphe.

yahrou a écrit :
La propriété clear sert si on a utilisé un float, mais quel est le rapport avec un display inline ?

Aucun. Cygnus, faut pas bosser un premier mai, ça te réussit pas.

yahrou a écrit :
Personnellement, je préfère éviter la propriété float pour la mise en page interne du texte, ou alors seulement si elle est vraiment util, comme pour une photo, ou un bloc en marge d'un paragraphe.

Très sage disposition. Les flottants c'est pratique, mais il faut pouvoir gérer les effets de bord... donc autant ne s'en servir que lorsque c'est indispensable.

Pour osiris : la solution donnée par yahrou un peu plus haut est à priori la plus intéressante.

La question des coins arrondis est une autre paire de manche. Je te suggère de faire une petite recherche pour trouver quelques informations à ce propos.

Salut,

yahrou a écrit :
Cependant, il assez embêtant d'avoir tout le titre en display inline, en effet, ca t'enlève la propriété, bien utile, du retour à la ligne automatique apres

Pas si l'élément suivant est de type bloc.
Modifié par Julien Royer (01 May 2007 - 12:05)

Oui, mais ça oblige à changer le style de l'élément suivant, autant avoir un titre qui marche quelque soit l'élément qui le suit !

a écrit :

Très sage disposition. Les flottants c'est pratique, mais il faut pouvoir gérer les effets de bord... donc autant ne s'en servir que lorsque c'est indispensable.

En plus, j'ai remarqué des bugs très bizares avec ie6 et les floats dans certains cas que je n'ai pas vraiment identifié, mais les effets étaient pluôt embêtant, genre le contenu qui disparaissait !

yahrou a écrit :
Oui, mais ça oblige à changer le style de l'élément suivant, autant avoir un titre qui marche quelque soit l'élément qui le suit !

Si l'élément suivant est de type en-ligne, j'aurais tendance à dire que ton document est mal organisé. Cependant, je suis d'accord sur le fait que la solution avec le span est la plus fiable.

Merci pour toutes ses réponses rapides et intéressantes. Comme quoi une question en entraîne une autre.

Je ne me suis jamais servi de <span>, je le ferai plus souvent !

A bientôt pour d'autres questions

Florent V. a écrit :

Aucun. Cygnus, faut pas bosser un premier mai, ça te réussit pas.

Oulà oui ...

/me retourne se coucher

Julien Royer a écrit :

Si l'élément suivant est de type en-ligne, j'aurais tendance à dire que ton document est mal organisé.

+1

Julien Royer a écrit :

Cependant, je suis d'accord sur le fait que la solution avec le span est la plus fiable.

Bof, ça par contre...



A Osiris > Pour les coins arrondis en plus ce n'est possible, au plus économique, avec des images, que de la manière suivante :

. hn en float
. doublage du hn par span en display: block;
. Deux éléments vides