Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

cauchemard de height

0 views
Skip to first unread message

WebShaker

unread,
Jan 11, 2010, 4:32:52 PM1/11/10
to
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

SAM

unread,
Jan 11, 2010, 9:08:38 PM1/11/10
to
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

unread,
Jan 12, 2010, 3:37:07 AM1/12/10
to
> <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

unread,
Jan 12, 2010, 5:02:24 AM1/12/10
to
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 :
<http://www.yoyodesign.org/doc/w3c/css2/visuren.html#propdef-float>
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

unread,
Jan 12, 2010, 7:57:28 AM1/12/10
to
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

unread,
Jan 12, 2010, 9:49:05 AM1/12/10
to
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

unread,
Jan 12, 2010, 9:51:54 AM1/12/10
to
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

unread,
Jan 12, 2010, 11:57:23 AM1/12/10
to
Le 1/12/10 3:51 PM, Laurent vilday a �crit :

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

unread,
Jan 12, 2010, 5:58:53 PM1/12/10
to
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

unread,
Jan 12, 2010, 11:22:07 PM1/12/10
to
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

unread,
Jan 13, 2010, 3:53:13 AM1/13/10
to
> 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.


SAM

unread,
Jan 13, 2010, 1:22:53 PM1/13/10
to
Le 1/13/10 9:53 AM, WebShaker a �crit :

>> Pour ?
>>
>> div.hello img { float: left; width: 70px }
>> .message { margin-left: 80px; }
>> sm
>
> Nan j'avais test� ca rendait pas le f"effet voulu.

Si, si !
Bien s�r.
C'est la m�thode employ�e pour "colonner"
- un block en absolute ou avec float
- un block qui marge pour laisser la place � l'autre

> J'ai mis l'exemple a jour.
> la colonne de droite te donne le rendu de ta prosposition.

Sauf qu'il ne faut plus que "message" flotte ...
... je n'ai pas vu que j'aie mis 'float' � .message{ }

<div class="message" style="margin-left: 72px; float: none">

Au passage et pour info :
dans mon navigateur l'exemple de gauche a tout son texte sous l'image

--
sm

WebShaker

unread,
Jan 13, 2010, 4:04:53 PM1/13/10
to
SAM a �crit :

> Si, si !
> Bien s�r.
> C'est la m�thode employ�e pour "colonner"
> - un block en absolute ou avec float
> - un block qui marge pour laisser la place � l'autre

Ah ben oui...
J'ai d�finitivement � comprendre le concept du float.
Quand faut il l'utiliser quand il ne faut pas.

Merci en tout cas.
Etienne

SAM

unread,
Jan 14, 2010, 4:14:31 AM1/14/10
to
Le 1/13/10 10:04 PM, WebShaker a �crit :

> SAM a �crit :
>> Si, si !
>> Bien s�r.
>> C'est la m�thode employ�e pour "colonner"

exemple :
<http://stephane.moriaux.pagesperso-orange.fr/truc/2col>
autre exemple - colonnage en absolute :
<http://stephane.moriaux.pagesperso-orange.fr/truc/3cols_images_adapt_strict.htm>
(exercice pour image s'adaptant � la colonne)

>> - un block en absolute ou avec float
>> - un block qui marge pour laisser la place � l'autre
>
> Ah ben oui...
> J'ai d�finitivement � comprendre le concept du float.
> Quand faut il l'utiliser quand il ne faut pas.

Le float fait couler la suite � droite ou � gauche puis dessous

En CSS2 il n'est pas pr�vu d'�couler de part et d'autre

--
sm

0 new messages