[Résolu]Images en float : taille et padding en % : pb avec opera

Bonjour

J'ai un petit probleme concernant des images placés en ligne (ou frise) avec float.

Vous pouvez voir sur ce lien : http://www.meteobell.com/__anjou_carte.php

Sur Mozilla fitrefox et IE, pas de probleme (ouf je me dis). Sur opéra tout part de travers.

Je vous explique maintenant le code :

Au début, classique, j'ai mis float left avec chacun par ex 1 padding-right:3px;

Mais la taille des images en question est obligatoirement exprimé en %.

33% si j'ai 3 images en ligne
24% si j'ai 4 images
19% si j'en ai 5 etc....
(j'ai utilisé des valeurs inférieur pour justement avoir des marges entre les photos)
J'avais donc forcément un espace à droite qui restait

Pour que ca colle à gauche et à droite, j'ai donc complexifié la chose.

Prenons l'exemple avec 3 images de 33% (la plus simple)
Si j'utilise float:left
j'ai 99% de la largeur utilisé et 1% à droite qui reste (pas jolie)

Si je met un padding-right exprimé en valeur absolu (2px par ex) y'a de grandes chances que ça colle qu'à moitié surtout en changeant la fenêtre de navigation ou pire que ça face descendre la dernière image à drotie en dessous. (comportement normal de float après tout)

Il faut donc que ma dernière image à droite n'est pas de padding-right. Jusque là ok

Si je met des valeurs relatives à mon padding, le résultat des bordures possèdent un comportement vraiment idéale quel que soit la taille de la fenêtre (tout mon site est en valeur relative je précise)

Donc pour 33%, il me faut un padding de (100%-99%=1% 1%/2 bordures=0.5%)
Y'a bien 2 bordures pour 3 images donc 1%:2

Ok donc la 1ere image de gauche et celle du centre auront un float:left; padding-right:0.5% width:33%
Et la dernière de droite aura un float:left width:33% mais sans padding (inutile, il aura obligatoirement la bonne taille de 0.5%)

En fait, pour être tout à fait exacte, le 0.5% marche réellement si vous mettez un float right sans padding pour la 3ème image à droite (ainsi collé), ce qui est le cas dans mon code. Mais pour le bug en question ça change rien.

Et bien cela vous ne pouvez pas le faire avec Opéra.

Car il semble que la dimension de l'image entre celui qui possède le padding:0.5% et celui sans padding ne soit pas la même, comme si il intégrait le padding dans sa propre dimension.

Je précise que toutes les images ont exactement la même dimension normallement et sans width.

Probleme de boite ? Pourtant avec IE aucun probleme, c'est ça que je comprend pas.

Voilà si vous avez des idées.





EDIT : pour ceux qu'on la flemme de tout lire, voici le code en question dans l'exemple du 33% et comme il est réellement dans mon site.

<div class="frise">
<a href="agglo.jpg" ><img class="float_frise_right_33"src="mo_agglo.jpg"alt="Panorama d'Angers"  /></a>
				
<a href="maine.jpg" ><img class="float_frise_left_33"src="mo_maine.jpg"alt="Panorama du Maine et Loire" /></a>

<a href="pano.jpg" ><img class="float_frise_left_33_seul"src="mo_pano.jpg"alt="Panorama de la région d'Angers" /></a>
				</div>

div.frise
{padding-left:30px;
padding-right:30px;}

img.float_frise_right_33
{
float:right;
width:33%;
margin:0;
padding-top:5px;
padding-bottom:5px;

padding-left:0.4%;
}


img.float_frise_left_33
{
width:33%;
float:left;
margin:0;
padding-top:5px;
padding-bottom:5px;

padding-right:0.4%;
}


img.float_frise_left_33_seul
{
width:33%;
float:left;
margin:0;
padding-top:5px;
padding-bottom:5px;
}

J'ai essayé de mettre différentes autres propiétés comme display ou overflow, mais rien n'y fait.
Toujours ce bug opéra de taille entre les images avec le padding-right:0.4% et ceux sans.
Modifié par Damonya (10 Sep 2006 - 17:50)

Je me demande, si cette autre façon de faire trouvé sur l'excellent site de Laurent denis, en mélangeant float et position relative ne serait pas plus efficace. Sauf que moi ce sont des images.

http://www.test.blog-and-blues.org/3_colonnes_float/

Je vais testé tout de même :

EDIT : Bon j'ai testé mais c pas ça.
Modifié par Damonya (10 Sep 2006 - 16:50)

Aïe, en effet !
- respecter l'ordre hiérarchique du titrage est un choix important pour l'accessibilité : les titres forment une table des matières... qui perd beaucoup en utilité lorsque les niveaux sont arbitraires.
- XHTML1.0 transitionnal est a priori le doctype adapté (si tu es susceptible d'utiliser des éléments dépréciés en strict, voir l'article sur le sujet déjà indiqué http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir ).


(Merci à Igor, plus attentif que moi à regarder le code source, ce que je n'avais pas fait)

a écrit :
"presque exacte" car il faut un petit 0.1% en moins pour qu'IE Windows ne tousse pas.

C'est vrai, c'est la raison exacte pour laquelle je parle de 0.5% au début et que j'utilise 0.4% dans le code, je ne l'ai pas signalé.



Alors pour ta solution, je dis bravo. J'étais parti dans des trucs bien compliqué. J'ai testé ta façon de faire fort simple et le résultat est exactement le même sur IE, mozilla et Opéra. Merci beaucoup. J'ai passé un peu la journée à chercher sur le net, sans trouver de réponse à mon probleme. Je commence à comprendre pourquoi. Je dois bien être le seul à avoir fait comme ça pour gérer ses marges d'images lol

Ceci dit, cela montre quand même qu'il y a un véritable probleme de modèle de boite avec les marges en position relative (ce qui est intéréssant à savoir je trouve).

a écrit :
Bonjour,

Attention, comme dit dans tes sujets précédents la structure html est toujours problématique tant du point de vue du doctype choisi qui n'est certainement pas adapté, ni servi avec le bon type mime (voir la faq), ainsi qu'une utilisation des niveaux de titres inadéquate, des id répétés etc.

Je me répète mais sans un minimum d'effort pour avoir une structure html solide, il n'est pas encore l'heure de se pencher sur ces questions de rendu.

Je te conseille de reprendre en priorité ton code html.

Ok je vais voir ce que je peux faire.

Un grand merci à laurent denis, qui confirme sa réputation. Je n'avais pas mis cette remarque pour t'inciter personnellement à y répondre, c'est donc une grande joie que ce soit toi en plus qui m'apporte cette solution, fort simple en plus.
Modifié par Damonya (10 Sep 2006 - 18:25)