28216 sujets

CSS et mise en forme, CSS3

[Résolu] Largeur automatique en fonction du contenu

Malgré mes recherches, je n'ai pas trouvé de réponse à ma question pourtant toute bête...
Je souhaite afficher le nom des sections de mon site dans un cadre qui s'adapte en fonction de la longueur du titre de la section.
Après plusieurs essais infructueux à 'laide de div, margin auto etc..., je viens donc naturellement vers vous Smiley smile

Voilà un exemple de mon problème actuel : http://toto.free.fr/oplf/test.php
J'aimerai que le cadre rouge colle au texte (j'ajusterai les paddings plus tard), quelque soit la longueur du texte.

Voici le CSS :
	.titre-section {
 	width: auto;
 	font-family: Verdana, Arial, Helvetica, sans-serif; 
 	font-size: 16px; 
 	font-weight: bold;
 	border: 1px red solid;
	}


Voici le code html que j'ai utilisé :
     <p class="titre-section">Accueil</p>
	 <p class="titre-section">Une autre sous-section</p>
	 <p class="titre-section">Encore une autre sous-section</p>


Merci d'avance Smiley smile
Modifié par EcliptuX (19 Dec 2006 - 16:17)
Bonjour EcliptuX,

Pour obtenir l'effet souhaité, il suffit d'attribuer ta règle CSS à une balise de type en ligne tel span plutôt qu'à la balise p, qui est de type bloc.

Concrètement, il y a seulement le HTML à retoucher et ça donne ceci:
<p><span class="titre-section">Accueil</span></p>
<p><span class="titre-section">Une autre sous-section</span></p>
<p><span class="titre-section">Encore une autre sous-section</span></p>
Cela dit, je me permets deux remarques.

1) En figeant la taille de ta police avec une valeur en pixels, tu empêches qu'elle soit redimensionnée par qui pourrait avoir besoin de le faire; pour éviter ce désagrément à tes utilisateurs, mieux vaudrait utiliser des unités de mesure élastiques; concrètement: font-size: 1em; pourrait faire l'affaire.

2) Plus profondément, les styles que tu appliques à tes paragraphes laissent deviner que tu veux faire une liste de liens. Si tel est le cas, mieux vaudrait alors baliser en conséquence avec ul et li, spécialement conçus pour cela. Si les puces te gênes, il y a moyen de les faire disparaître avec une règle CSS. Concrètement, cela pourrait donner ceci:

HTML
[b]<ul id="titre-section">[/b]
   <li><span>Accueil</span></li>
   <li><span>Une autre sous-section</span></li>
   <li><span>Encore une autre sous-section</span></li>
[b]</ul>[/b]
CSS
[b]ul#titre-section[/b] {
margin:0;
padding:0;
}
[b]ul#titre-section li[/b] {
font:bold 1em/1.4em Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
}
[b]ul#titre-section li span[/b] {
border: 1px solid red;
}
Et voilà. Ça devrait marcher.

Normand
Merci Normand pour ces judicieux conseils et l'astuce de la balise span qui a été très efficace.
Je dois avouer que c'est une balise que je n'avais pas réutilisé depuis que j'ai lâché mes tableaux Smiley smile
Heureux de vous avoir rendu service, cher EcliptuX. Pour terminer en beauté, il ne vous reste plus qu'à clore le sujet que vous avez ouvert en y ajoutant Résolu.
Sujet clos
Aller à