28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai développé en PHP une galerie de photos avec un peu de CSS.
Chaque page affiche plusieurs bandes horizontales d'images accompagnées de coche pour une sélection.
En IE8, cela avait fini par marcher, même si cela a été laborieux.
Depuis le passage (partiel) de mes clients en IE11, cela est en vrac. Les vignettes ne restent pas dans leur bande et déroulent verticalement, ou si j'arrive à les bloquer en horizontal, c'est leur input qui se barre ... Bref ! je zone depuis plusieurs jours.
Le code PHP (extrait)
# ............................................... Affichage d'une bande de Vignettes
echo "<div class='Bande'>";
echo "<div class='Vignette'>
	<dfn title='".$Titre."'>
	<img src='".$Adresse."' onClick=\"javascript:AfficherImage('".$NomDomaine."','".$NomGalerie."','".$NomImage."')\" />
	<input type='checkbox' name='_Vignettes[]' value='".$NomImage."' ".$Coche." />
	</dfn>
</div>\n";
echo"</div>\n";						

Côté CSS
.Bande {
	display:			block;
	height:				80px;
	margin:				2px;
	padding:			2px;
	height:				100px;
	background-color:	#CCDDFF;
}
.Bande .Vignette {
	display:			inline;

	margin:				2px;
	padding:			2px;

	border:				1px solid #FFFFFF;
	background-color:	#CCEEFF;
}
.Bande .Vignette dfn {
	width:				100px;
}
.Bande .Vignette img {
	display:			block;
	border:				none;
	width:				100px;
}
.Bande .Vignette input {
	display:			block;
	border:				none;
	text-align:			center;
	width:				100px;
}

Si une bonne âme peut m'aiguiller
Olivier
Modifié par lemoineo (03 Feb 2015 - 12:53)
Hello,

Je pense que tu peux simplement passer ton inline en inline-block pour .Bande .Vignette.

Conseils en vrac :
* éviter de fixer la hauteur de tes cellules, laisser faire au maximum le flux naturel des éléments
* définir des dimensions à tes images avec les attributs height et width (performance)
* définir un attribut alt sur tes images (accessibilité)
* éviter le javascript directement dans les éléments HTML (attribut on*) et proposer un fichier JS qui gère ce comportement

Bonne continuation Smiley smile