cauchemard de height

Le
WebShaker
salut.

j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.

J'ai fait plusieurs essais ici.
http://www.webshaker.net/cauchemard2.html

Mais rien a faire si je ne force pas a un moment un height quelques
part, j'y arrive pas.

quelqu'un pourrait il me dire comment faire en sorte que le cadre
contienne et le texte et la photo ???
et qu'evidement si le text est plus long que le div, celui-ci s'allonge.

Merci
Etienne
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22043801
Le 1/11/10 10:32 PM, WebShaker a écrit :
salut.

j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.

J'ai fait plusieurs essais ici.
http://www.webshaker.net/cauchemard2.html

Mais rien a faire si je ne force pas a un moment un height quelques
part, j'y arrive pas.



et ...
clear:left;
à quoi ça peut bien servir ?


<div class="wssyscol" id="wssysinfo">
<div class="hello">
<img
src="http://extranet.cyberbebe.fr/userstuff/icons/i64/astrologer.png">
<div class="message">
<b>Un petit texte</b><br>
Qui ne s'affiche pas du tout comme je le voudrai<br>
... comme je voudrais (comme nous voudrions)<br>
Sans forcer le height a 70px;
</div>
<hr style="clear:left;height:1px;margin:0;color:#fff;border:none">
</div>
</div>

--
sm
WebShaker
Le #22043791
<hr style="clear:left;height:1px;margin:0;color:#fff;border:none">



surper ca marche...

et ...
clear:left;
à quoi ça peut bien servir ?



Ben oui! A quoi ca sert ?

Si tu as un petit peu d'explication théorique je suis preneur.
Quel est l'impact du clear left sur le div conteneur ???

Merci
Etienne
SAM
Le #22043781
Le 1/12/10 9:37 AM, WebShaker a écrit :
<hr style="clear:left;height:1px;margin:0;color:#fff;border:none">



surper ca marche...

et ...
clear:left;
à quoi ça peut bien servir ?



Ben oui! A quoi ca sert ?

Si tu as un petit peu d'explication théorique je suis preneur.



Malheureusement ... la théorie n'est pas mon fort.
et :
ne nous renseigne guère quant au comportement du conteneur.

Quel est l'impact du clear left sur le div conteneur ???



On stoppe la flottaison là,
le div conteneur sait donc (enfin ?) où il s'arrête,
ou, puisque la flottaison s'arrête ici, le div conteneur s'apprête pour
le contenu suivant, il a une idée de son layout, de la hauteur à ménager.

Il faut savoir que le float est une espèce de {position: absolute;}
et que donc le conteneur n'a plus vraiment à s'en occuper (un peu comme
si sorti du flux). Enfin ... grosso-merdo

--
sm
docanski
Le #22043771
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
WebShaker ecrit ce qui suit en ce 11/01/2010 22:32 :
salut.



Yo !

j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.



Un height:auto ne résoud pas le problème ?

Mais rien a faire si je ne force pas a un moment un height quelques
part, j'y arrive pas.
quelqu'un pourrait il me dire comment faire en sorte que le cadre
contienne et le texte et la photo ???



Une série d'exemples dans les fiches descriptives de mycorance, en
signature te permettront de voir qu'il n'est pas nécessaire de préciser
une hauteur.

et qu'evidement si le text est plus long que le div, celui-ci s'allonge.



C'est le cas dans ces fiches et ça marche sur plus de 800 de celles-ci ! ;-)

Cordialement
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Laurent vilday
Le #22043761
WebShaker :
j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.

J'ai fait plusieurs essais ici.
http://www.webshaker.net/cauchemard2.html

quelqu'un pourrait il me dire comment faire en sorte que le cadre
contienne et le texte et la photo ???
et qu'evidement si le text est plus long que le div, celui-ci s'allonge.



style="overflow:auto" sur le parent contenant l'élément flottant.

Le <div class="hello"> dans ton exemple, donc dans ta déclaration CSS

div.hello { ..... }

devient :
div.hello { .....; overflow:auto }

--
laurent
Laurent vilday
Le #22043751
SAM :
Le 1/11/10 10:32 PM, WebShaker a écrit :
j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.

J'ai fait plusieurs essais ici.
http://www.webshaker.net/cauchemard2.html

Mais rien a faire si je ne force pas a un moment un height quelques
part, j'y arrive pas.



et ...
clear:left;
à quoi ça peut bien servir ?



Beurk. Ca oblige à ajouter un élément complètement inutile.

C'est ... ahh ... beurk. :)

imHo, div.hello { overflow:auto }, c'est plus joli.

--
laurent
SAM
Le #22043741
Le 1/12/10 3:51 PM, Laurent vilday a écrit :
SAM :
Le 1/11/10 10:32 PM, WebShaker a écrit :
j'aimerai en floating arriver à redimentionner un div en hauteur en
fonction du contenu.

J'ai fait plusieurs essais ici.
http://www.webshaker.net/cauchemard2.html

Mais rien a faire si je ne force pas a un moment un height quelques
part, j'y arrive pas.



et ...
clear:left;
à quoi ça peut bien servir ?



Beurk. Ca oblige à ajouter un élément complètement inutile.

C'est ... ahh ... beurk. :)

imHo, div.hello { overflow:auto }, c'est plus joli.



Bonne année !

Bonnet d'âne :
quand même ce n'est pas la 1ère fois que Laurent le dit !

overflow,
overflow,
y a qu'ça d'vrai!

Mais faut m'pardonner,
je ne suis pas toujours parvenu à mes fins avec ce {surlesflots: gloup;}

(mon IE ne respecte pas la marge bas du contenu)
(bon, OK, avec l'élément d'éclaircie c'est encore pire)
WebShaker
Le #22043731
Laurent vilday a écrit :
div.hello { ..... }
devient :
div.hello { .....; overflow:auto }



Ah oui ça marche aussi. et cela me semble plus propre.
Merci.

Du coup j'ai un autre problème sur le même exemple.
si la phrase
"Qui ne s'affiche pas du tout comme je le voudrai. j'allonge un peu le
text pour voir ce que ca donne." tiens sur une seule ligne alors super,
le texte est à droite de l'image.

par contre si je réduis la fenêtre et que la ligne ne peut plus
s'afficher en entier alors tout le texte passe en dessous de l'image ce
qui n'est évidement pas le but recherché...

Quelqu'un pourrais... encore... me filer un coup de main ?

Merci
Etienne
SAM
Le #22043701
Le 1/12/10 11:58 PM, WebShaker a écrit :
Laurent vilday a écrit :
div.hello { ..... }
devient :
div.hello { .....; overflow:auto }



Ah oui ça marche aussi. et cela me semble plus propre.
Merci.

Du coup j'ai un autre problème sur le même exemple.
si la phrase
"Qui ne s'affiche pas du tout comme je le voudrai. j'allonge un peu le
text pour voir ce que ca donne." tiens sur une seule ligne alors super,
le texte est à droite de l'image.

par contre si je réduis la fenêtre et que la ligne ne peut plus
s'afficher en entier alors tout le texte passe en dessous de l'image ce
qui n'est évidement pas le but recherché...



c'est normalement prévu pour fonctionner comme ça.

Quelqu'un pourrais... encore... me filer un coup de main ?



Pour ?


div.hello img { float: left; width: 70px }
.message { margin-left: 80px; }

--
sm
WebShaker
Le #22043691
Pour ?

div.hello img { float: left; width: 70px }
.message { margin-left: 80px; }
sm



Nan j'avais testé ca rendait pas le f"effet voulu.
J'ai mis l'exemple a jour.
la colonne de droite te donne le rendu de ta prosposition.

Merci Qd meme.
A bientot.
Publicité
Poster une réponse
Anonyme