Width dynamique

Bonjour,

Relarivement compétent en CSS2, j'ai lu avec beaucoup d'intérêt le livre : CSS avancées : Vers HTML5 et CSS3.

Sauf erreur, je n'ai pas trouvé réponse à un problème que je me pose depuis longtemps.

Pour faire très simple, vous avez une table et un paragraphe.

La table est d'une longueur indéterminée fixée par un contenu dynamique.

Vous voulez que la largeur du paragraphe (ou largeur maximale) soit celle de la table.

Je n'ai pas trouvé cette possibilité avec CSS3

<table>
contenu à largeur inconnue
</table>
<p>commentaire sur le tableau</p>

p {max-width: valeur dynamique de width table}

Avez-vous une solution en CSS ou peut-être en javascript ?
Modifié par boteha_2 (30 Mar 2015 - 18:09)

Tu peut obtenir quelque chose proche de ce que tu décris avec display sur un conteneur commun au tableau et au paragraphe. http://codepen.io/gc-nomade/pen/vEPeEO

En gros , tu te sert des caractéristique d'affichage du tableau en partant d'une petite largeur , formater en tableau (block ou en ligne) il s’étendra en fonction de la largeur de son contenu.

Je te laisse jouer avec le codepen pour en decouvrir certaines limites (comme un width:x% des contenu ).

Bonjour,

J'ai suivi ton lien.

Ton code est très intéressant et le résultat spectaculaire mais c'est quand même tordu.

Est-ce exprès que tu ne mets pas d'unité à width: 12 ?

Reste le javascript.

Dommage quand même que CSS3 ne traite pas ce problème, ils auraient pu y penser.

boteha_2 a écrit :
Bonjour,

J'ai suivi ton lien.

Ton code est très intéressant et le résultat spectaculaire mais c'est quand même tordu.

pas plus qu'une autre valeur de display, il ne s'agit que d'une particularité de cette valeur, generalement elle pose probleme et se regle avec un table-layout:fixed; .
Je dirais plutôt par exemple q'un overflow:hidden pour englober un flottant peut sembler une logique tordue.

boteha_2 a écrit :

Est-ce exprès que tu ne mets pas d'unité à width: 12 ?
.

heu non , c'est width:1%;

bonne continuation

boteha_2 a écrit :
Bonjour,

Bonjour a toi aussi et aux lecteurs de passages

boteha_2 a écrit :
Si je comprends une astuce de ton code est ce width; 1%

Comme c'est impossible, la navigateur adapte alors le DIV à la taille de la table.

Oui, en fait le div qui hérite d'un formatage de tableau via le CSS, impliquant aussi le table-layout avec sa valeur par défaut, va s’étendre en fonction de l'element le plus grand, ici le tableau est le plus large.

boteha_2 a écrit :
Mais pourquoi pas à la taille du paragraphe en-dessous ?

Le paragraphe, de type block et sans width spécifiè va s’étaler sur toute la largeur disponible.
Comme le tableau est plus large que n'importe lequel des mot dans le paragraphe c'est lui qui donne la largeur minimale nécessaire a tout faire rentrer dans le div. C'est un peu la que la méthode est imparfaite rapport a ta question, car si un mot (ou une image ou autre élément en ligne comme un textarea) est plus large que le tableau, le tableau ne sera plus la largeur de reference.
A moins de tenter de lui spécifier un min-width:100% pour lelargir a son conteneur, illogique (tordu ) au vu d'un width:1%; sur son parent mais avec un résultat surprenant http://codepen.io/anon/pen/bNZQem .

IE8 comprend display:inline-table; et le navigateur de Microsoft a eté le dernier à implémenter ce display (qui etait dans les spec depuis 1998 ! ).

A moins que tu ne souhaites inclure IE7 et 6, tu ne devrais avoir aucun soucis avec ce CSS.

display:table; fonctionne tout aussi bien si c'est pour empiler les boites.

Sinon, il ny a pas vraiment d'alternative.
IE6 accepterais un display:inline;zoom:1;width:1%; car il considère le width comme un min-width.
IE7 = javascript sans négociation
Les autres navigateur éventuelles à problème ont probablement disparu avec les machines sur lesquelles ils ont pu être installés (8/10ans)
Enfin là c'est ce que je crois sans certitude vu le nombre de navigateur et et de médias qui surfent aujourd'hui , il y a peut-être encore des vilains canards qui trainent.

Un petit javascript ne devrait pas couter grand chose en effet .
Bonsoir

Bonjour,

Pour info, le javascript est très simple :

<script type="text/javascript">
<!--
var w = document.getElementById('élément_à_mesurer').offsetWidth;
document.getElementById('élément_à_ajuster').style.maxWidth = w+'px';
//-->
</script>

A placer dans le code html après l'élément à mesurer ou plus bas.
Modifié par boteha_2 (24 Apr 2015 - 22:04)