[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)

Bonjour,

Bon, bah, après le "excellent" ci-dessus, je n'ai plus qu'à m'y coller

Alors, à vue de nez : ce qui m'échappe, c'est pourquoi ce mode compliqué pour gérer l'espacement des images, alors qu'il est possible de laisser faire le calcul automatiquement ?

Pour cela:
- ce sont les liens contenant les images qu'il faut dimensionner en % avec la fraction presque exacte d'espace qui leur revient afin de "tout remplir" (33.2% pour 3 images, 24.9% pour 4 images, etc.) : "presque exacte" car il faut un petit 0.1% en moins pour qu'IE Windows ne tousse pas.
- Puis dimensionner les images à moins de 100% de leur lien, afin de ménager les espaces entre elles (90% semble donner un résultat agréable).
- Enfin, un text-align:center sur les liens permet de répartir harmonieusement ces espaces...

non ?

grosso-modo, et sans cosmétique, ça donnerait quelque-chose comme:

<style type="text/css">
<!-- 
.wrapper {
margin: 30px;
border: 1px solid;
overflow: hidden;
zoom: 1;
}
.wrapper a {
text-align: center;
float: left;
}
.wrapper a img {
width: 90%;
}
.trois a {
width: 33.2%;
}
.quatre a {
width: 24.9%;
}
.cinq a {
width: 19.9%;
}
.six a {
width: 16.5%;
}
.sept a {
width: 14.2%;
}
-->
</style>
</head>
<body>
<div class="wrapper trois">
  <a href="#"><img src="..." alt="..." /></a>
  <a href="#"><img src="..." alt="..." /></a>
  <a href="#"><img src="..." alt="..." /></a>
</div>


<div class="wrapper quatre">
  <a href="#"><img src="..." alt="..." /></a>
etc.

Modifié par Laurent Denis (10 Sep 2006 - 17:29)

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.

En fait même avec ta méthode Laurent, j'avais toujours ce petit bug avec Opéra.

En testant ton code, je me suis rendu compte que ce bug provient uniquement quand le nombre d'image est impair et qui ne peuvent pas tomber juste, comme avec 3 images (33%)

J'ai l'impression que c'est une question d'arrondi comme si opéra n'acceptait pas ce qui se passe après les virgules.

J'ai réussi à parer à cela en faisant comme ceci (et pas autrement) :

				<div class="frise">
				<a class="trois_l"href="angers.jpg" ><img src="mo_angers.jpg"alt="Panorama de la région d'Angers"  /></a>
				
				<a class="trois_l"href="angers.jpg" ><img src="mo_angers.jpg"alt="Panorama d'Angers"  /></a>
				
				<a class="trois_r"href="pano.jpg" ><img src="mo_pano.jpg"alt="Panorama du Maine et Loire"  /></a>
				</div>

div.frise a.trois_l, div.frise a.trois_r{
text-align: center;
float: left;
}

div.frise a img {

width: 100%;

}
.trois_r{

width: 33%;

}

.trois_l 
{width: 33%;padding-right:0.5%;}

Pour écarter les marges, mettez 32% et padding-right:2% etc....

L'astuce consiste à ne pas mettre de padding-right sur la dernière image de droite et à comptabiliser que les 2 padding-right en marge relative pour les 2 autres. Ainsi on évite les chiffres impairs, opéra revient dans le droit chemin comme les autres et le dernier float de droite est presque bien collé à droite, presque comme un float:right;

Ouf

Quand il y a un nombre d'image pair, inutile d'utiliser cette astuce, ou vous allez justement revenir en nombre impair (4 images et 3 marges à gérer)
Modifié par Damonya (10 Sep 2006 - 20:02)