28217 sujets

CSS et mise en forme, CSS3

DIV qui s'ajuste en largeur en fonction du contenu

Ca fait un petit moment que je tourne en rond pour résoudre un pb, et d'après ce que j'ai lu, je ne sais même pas si mon soucis a une solution en CSS.

Je souhaite afficher 4 lignes de texte dans un div. J'aimerai que ce div voit sa largeur s'auto-ajuster en fonction du contenu.
Je parvenais à ce résultat sans pb avec un tableau, mais avec le CSS ça semble plus compliqué voire impossible.

Voici ma page de test : http://www.spheerys.com/maquettes/alsa/pb-div.php

Voici le code HTML :
	  <div class="cadre">

	 	<b>Ceci est un cadre qui doit s'ajuster tout seul</b><br />
        Comme vous le voyez, j'ai quelques difficultées pour réaliser en CSS un<br />
        cadre dont la largeur s'adapte automatiquement au contenu.<br />
        Je ne parviens pour le moment qu'à lui donner une taille fixe<br />
        suffisante afin qu'il n'y ai pas de retour à la ligne inesthétiques.
	  </div>

Et le code CSS correspondant :
  .cadre {
   background: #ffff99;
   width: 400px;
   margin-left: auto;
   margin-right: auto; 
   border: 1px #b37233 solid;
   text-align: center;
  }


Mon pb est-il résolvable où dois-je revenir aux tableaux pour ce cas très particulier ?
Merci d'avance Smiley smile
Modifié par EcliptuX (28 Mar 2005 - 21:24)
Je comprend pas trop, si tu spécifie une largeur de 400 px , le div aura la même largeur quelque soit son contenu... Smiley confus
Mais justement : j'aimerai ne pas fixer de largeur spécifique afin que les bords gauche et droit "collent" au texte.
Ok !

Tu dois regarder du côté de la propriété display, plus précisément la valeur table-cell.

tag {
display: table-cell;
}

http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-display

Mais j'ignore son niveau d'implémentation dans les différents navigateurs Smiley confus

<edit />
Ne semble pas fonctionner sous IE/Mac et un peu « buggé » sous Safari...
Fonctionne bien dans Mozilla 1.7, Firefox 1.0 et Netscape 7.2

<re-edit />
Sous Windoze :
* Firefox 1.0 => OK
* Mozilla 1.8 => OK
* Netscape 7.1 => OK
* Opera 7.5 => OK
* IE 6 => Ne fonctionne pas...
Modifié par Stephan (30 Mar 2005 - 02:38)
Bonjour,
Oui cela devrait être possible avec l'utilisation de span:

<p><span>Voici un premier cadre avec une phrase à l'intérieur</span></p>
<p><span>Voici un deuxième cadre avec un peu plus de texte à l'intérieur</span></p>


span{
background: #ffff99;
border: 1px solid #b37233;}
Merci Igor et Stephan Smiley smile

Concernant ton astuce Stephan, ça pose un problème que table-cell ne soit pas reconnu partout. Je viens d'essayer sous Safari, je résultat est assez cocasse Smiley ohwell
Mais si en plus tu me dit que IE6 ne l'interprête pas bien....
C'est dommage car c'est visiblement ce que je recherche

Sinon igor, l'utilisation de span n'est pas adapté dans le cas où il y a plusieurs lignes.

Voilà la mise en oeuvre de vos tuyaux : http://www.spheerys.com/maquettes/alsa/pb-div.php

S'il y a d'autres suggestion, je suis tout ouïe Smiley sweatdrop
Sujet clos
Aller à