DIV et IMG

[criocere]

Bonjour,

Je crois que j'ai tout essayé ou presque

Voilà la page qui me pose ombrage :

http://www.aujardin.info/trucs/trucs_fourmis.php

Je voudrais que l'image soit en dehors des blocs matérialisés par les pointillés et que ces blocs épousent l'espace restant mais rien ni fait, en tout cas je ni suis pas arrivé.

Comment feriez-vous ?

Merci

[MarvinLeRouge]

Salut,

Il faudrait que tous tes blocs de texte potentiellement au contact de l'image aient une marge droite de largeur au moins égale à celle de l'image.

[thick]

Dans ce genre de cas je ne m'embête pas et je colle un gentil tableau qui ne va pas se prendre la tête sous IE ou autre.

Mais bon, je ne suis pas un puriste et je vois surtout le côté pratique de la chose, même si 90% de mon code est en div.

[criocere]

Marvin,

La boite ne fait pas toujours la même largeur selon qu'il y ait une image ou pas. Je ne vais pas faire autant de boite que de possibilité !

Je ne me résouds pas encore aux tableaux, il y a surement une solution. L'image semble se comporter comme un bloc float mais que je la mets dans un SPAN ou un DIV, les boites entourées de pointillées s'affichent n'importe comment

Bref, je cherche toujours....

[Sarc]

Salut !

C'est pas le align=right qui la fait se comporter comme un float ? Je me demande si c'est judicieux d'utiliser cette balise html au lieu du CSS...

[klelugi]

Salut Criocere,

As tu essayer un float right pour un div contenant ton image par exemple ?

<div id="centercontentpage"><h1>header</h1>

<div id="img"><img src...></div>

<div class="boite">contenu</div>
<div class="boite">contenu</div>
...
<div id="clear"></div>

</div><!-- end centercontentpage -->

Dans le CSS

div#img{float:right}
div#clear{clear:both}

[klelugi]

Ah et de plus je pense que tu peux virer le :

en dessous du h1 tu n'as juste qu'à mettre un margin-bottom de 50px sur ce h1 par exemple

[Dudu]

Salut,

Dans ce genre de cas je ne m'embête pas et je colle un gentil tableau qui ne va pas se prendre la tête sous IE ou autre.

Mais bon, je ne suis pas un puriste et je vois surtout le côté pratique de la chose, même si 90% de mon code est en div.

Ouh le vilain La résolution de ce problème uniquement en HTML tableless et en CSS ne posera pas AMA de problèmes avec IE.

Mais dans des cas extrêmes tu n'as pas tort: il faut parfois trouver un juste milieu entre la sémantique à tout prix d'un côté et les manques d'implémentations navigateur d'un autre côté.

- As tu essayer un float right pour un div contenant ton image par exemple ?

- Ah et de plus je pense que tu peux virer le :

en dessous du h1 tu n'as juste qu'à mettre un margin-bottom de 50px sur ce h1 par exemple

- Pas obligé de mettre un div juste pour çà. La règle CSS "#centercontentpage img" s'appliquera à toutes les images placés dans le bloc centercontentpage

Le code CSS suivant devrait convenir (à condition d'enlever aussi le fameux align="right" dans le code HTML

#centercontentpage img {float:right; margin: 7px;}

(Le margin sert à ce que la boîte pointillée et l'image ne soit pas collées )

- klelugi a tout à fait raison de signaler ceci. Il en va de même pour le "<div></div>" placé en fin du <div id="#centercontentpage">