18081 sujets

Questions générales et questions de débutants

Cadre extensible en largeur (horizontalement)

Bonjour.

Est-il possible d'obtenir qu'un cadre s'adapte automatiquement à son contenu en s'élargissant selon le texte qu'il contient ?

Je suis en train de faire un modèle de page en CSS. Il y a un titre au sommet des pages qui ressemble à cela :
upload/6862-Capture-tit.png
Or, ce cadre doit abriter un titre de longueur variable. Je peux bien sûr ajuster sa largeur pour chaque page, mais il faut alors que j'introduise un style local alors que mes styles sont dans une feuille de style externe.
Comment faire pour que le cadre soit élastique horizontalement, comme il peut l'être naturellement en vertical ?

Merci pour le tuyau Smiley rolleyes (C'était si simple avec un tableau : il suffisait de ne pas indiquer de largeur et il s'ajustait tout seul — mais il fallait alors fragmenter les deux images autour et ça, le CSS n'aime pas Smiley ravi : dans la version actuelle de mon modèle, j'ai mis les images en background, dans des cadres positionnés...)
Modifié par Piteur (04 Jun 2006 - 22:13)
Bonsoir,
Pour que ton cadre s'adapte a son contenu, tu dois le mettre en position:absolute ou en float:left.
Hermann a écrit :
Bonsoir,
Pour que ton cadre s'adapte a son contenu, tu dois le mettre en position:absolute ou en float:left.

Ou alors le passer en display: inline; (pas sûr que ça soit exploitable dans ton cas, mais c'est une possibilité).
Hermann a écrit :
Pour que ton cadre s'adapte a son contenu, tu dois le mettre en position:absolute ou en float:left.
Pas mal pas mal, merci ! Mais du coup, mon cadre n'est plus centré dans le cadre englobant ! Smiley biggol
mpop a écrit :
Ou alors le passer en display: inline; (pas sûr que ça soit exploitable dans ton cas, mais c'est une possibilité).
Euh, là, pour le coup, je ne comprends pas... Smiley confus Pourrais-tu m'en dire plus (je débute en CSS !) ? Merci.
Modifié par Piteur (05 Jun 2006 - 10:56)
[quote=mpop]Tu peux alors styler l'élément de type en-ligne. Mais je disais que ce n'est peut-être pas exploitable, car il y a des restrictions aux styles que l'on peut donner à un élément de type en-ligne.[/mpop]
Ah ben voilà, j'en avais parlé…
Modifié par mpop (08 Jun 2006 - 22:00)
mpop a écrit :
ou un élément de type bloc en affichage de type en-ligne –, qui sera centré automatiquement (il est considéré comme du texte).
Merci pour ta réponse.

Ok, j'ai réussi à obtenir quelque chose avec un contenu tout simple (un <div>Texte</div>), mais si je mets par exemple <p>texte></p> entre les div, je perds le fond défini pour le <div> !)

>> Deuxième embûche : le cadre qui doit être centré doit être de type élastique. Or je n'arrive à l'obtenir qu'avec position: absolute; ou float: left; ou float: right; si bien que je ne peux affecter le style display: online; ! Smiley decu

Je rappelle ce que je voudrais :
• un cadre élastique devant recevoir un titre et présentant deux images latérales (voir exemple ci-dessus) (j'ai réussi à faire un cadre de largeur définie avec deux images en background-image de cadres positionnés en absolu à gauche et à droite, mais rien d'élastique)
• ce cadre doit être placé dans un cadre conteneur au centre duquel il doit se placer...
Modifié par Piteur (05 Jun 2006 - 15:36)
Piteur a écrit :
Merci pour ta réponse.

Ok, j'ai réussi à obtenir quelque chose avec un contenu tout simple (un <div>Texte</div>), mais si je mets par exemple <p>texte></p> entre les div, je perds le fond défini pour le <div> !)

>> Deuxième embûche : le cadre qui doit être centré doit être de type élastique. Or je n'arrive à l'obtenir qu'avec position: absolute; ou float: left; ou float: right; si bien que je ne peux affecter le style display: online; ! Smiley decu

Je rappelle ce que je voudrais :
• un cadre élastique devant recevoir un titre et présentant deux images latérales (voir exemple ci-dessus) (j'ai réussi à faire un cadre de largeur définie avec deux images en background-image de cadres positionnés en absolu à gauche et à droite, mais rien d'élastique)
• ce cadre doit être placé au centre d'un cadre conteneur...
Hmm… centrer un cadre fluide (sans largeur fixe) en largeur…

J'y pense, il y a peut-être un truc qui peut marcher :
div#titre {
	min-width: 200px;
	margin: 0 auto;
}

Ça devrait suffire à le centrer en largeur dans Firefox, Opera, Safari, etc. Que n'y ai-je pensé plus tôt ! Smiley sweatdrop
En plus mon propre site est centré de la sorte…

Par contre, pour que ça passe dans IE, il faudra peut-être ruser un peu. En particulier, pour que les marges automatiques fonctionnent, il faut que le bloc ait une instruction de largeur (pour qu'il ne prenne pas 100% de la largeur disponible, auquel cas il n'y a plus moyen de caser des marges). Donc soit width, soit min-width. IE ne comprend pas min-width (la propriété qui nous arrange bien dans notre cas), mais interprète width comme si c'était min-width.

Il faut donc s'arranger pour avoir :
min-width: 200px;
margin: 0 auto;

Avec les navigateurs modernes, et
width: 200px;
margin: 0 auto;

Avec IE.

Si tu ne t'es pas encore penché sur la question des commentaires conditonnels, c'est le moment !

PS : on peut aussi utiliser un hack pour IE, mais c'est moins propre.
mpop a écrit :
Si tu ne t'es pas encore penché sur la question des commentaires conditonnels, c'est le moment !

Il faut comprendre ce genre de phrases ainsi :
« Si tu ne t'es pas encore penché sur la question des commentaires conditionnels, c'est le moment de faire une recherche avec ton moteur préféré, ou tout simplement au sein de ce forum. »

Allez, aujourd'hui on va être plus gentil que pédagogue :
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows
mpop a écrit :
Allez, aujourd'hui on va être plus gentil que pédagogue :
http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Alors, là, je te remercie vraiment : quel temps gagné (je cours toujours après le temps !) Smiley lol .

Grâce soit rendue au Maître ! http://www.fredator.com/smileys/salut2.gif

Mais ça veut dire qu'il me faut abandonner l'idée d'un cadre "élastique" avec IE (je ne parle pas de la version 7...) ? Smiley confus
Modifié par Piteur (08 Jun 2006 - 19:14)
mpop a écrit :
Ça devrait suffire à le centrer en largeur dans Firefox, Opera, Safari, etc. Que n'y ai-je pensé plus tôt ! Smiley sweatdrop
En plus mon propre site est centré de la sorte…

Oh putain, faut que j'arrête de répondre sur Alsacréations à près d'une heure du matin, du coup je dis n'importe quoi. Je me filerais des baffes !

div#titre {
	min-width: 200px;
	margin: 0 auto;
}

Il n'y a qu'avec un width ou avec un max-width que l'on peut centrer un élément de type bloc grâce aux marges automatiques ! Pour une raison très très simple : un élément de type bloc prend toute la largeur disponible, et donc lui donner une largeur minimale ne sert à rien (il prendra 100% de la largeur, ce qui ne laisse pas de place pour des marges). Ça ne sert que dans le cas de blocs positionnés en absolu ou en relatif, ou lorsque l'espace disponible pour le bloc est plus petit que la largeur minimale voulue.

Au passage, mon site personnel est centré grâce à max-width (et à width dans Internet Explorer pour les résolutions élevées, à l'aide d'une astuce javascript). C'est sans doute pour ça que je n'y ai pas pensé ! Smiley biggol

mpop a écrit :
IE ne comprend pas min-width (la propriété qui nous arrange bien dans notre cas), mais interprète width comme si c'était min-width.

Oh mon dieu, j'ai écrit ça ?
IE interprète la propriété width correctement (encore heureux !), et n'implémente pas min-width. L'astuce que je décris concerne l'équivalence entre min-height du modèle standard et height dans IE6.


Bref, il ne faut pas prendre en compte mes trois ou quatre derniers messages. Misère… Smiley bawling Smiley bawling Smiley bawling
Ah si, les commentaires conditionnels sont à retenir.

Piteur a écrit :
Mais ça veut dire qu'il me faut abandonner l'idée d'un cadre "élastique" avec IE (je ne parle pas de la version 7...) ?

Ben oui, du coup je ne vois pas trop…
Bon alors voilà, j'ai peut-être un semblant de solution. J'avais suggéré de faire quelque chose comme ça un peu plus haut, il me semble.

	h1 {
		text-align: center;
	}
	h1 strong {
		position: relative;
		zoom: 1; /* Corrige un bug de HasLayout dans IE6 */
		border: solid 1px red;
		padding: 0 40px;
	}
	h1 strong span {
		display: block;
		position: absolute;
		top: 0;
		width: 40px;
		height: 100%;
		background: burlywood;	
	}
	h1 strong span.gauche {
		left: 0; 
	}
	h1 strong span.droite {
		right: 0; 
	}


<h1><strong><span class="gauche"></span>Mon super titre<span class="droite"></span></strong></h1>


Je sais pas vous, mais moi je trouve ça un poil lourd.
Pour info, une des deux décorations peut être faite via une image de fond pour la balise strong, ce qui évite de rajouter du code pour rien.

Testé avec Firefox 1.5 et IE6 (OK en corrigeant le bug de layout). Par contre c'était bugué dans Konqueror, et là j'ai pas trop le temps d'explorer le pourquoi du comment. Du coup, si c'est bugué dans Konqueror, il faudrait voir si ça l'est aussi dans Safari.
Modifié par mpop (08 Jun 2006 - 21:58)
Sujet clos
Aller à