28216 sujets

CSS et mise en forme, CSS3

Vignettes, display:inline-block et IE7

Bonjour a tous,

Petit soucis de mise en page et de compatibilité avec IE, je suis face à un problème insoluble pour mon niveau, si quelqu'un pouvait m'aider ou me pointer dans la bonne direction, je lui en serrait très reconnaissant, merci Smiley biggrin !

Le problème en question, j'ai un DIV de largeur variable (de 800 a +de 3000px), avec un nombre variable de "vignettes" (200x150) et je voudrais que la ligne de vignette remplisse le div, avec éventuellement un retour a la ligne si le nombre de vignettes est trop élevé.
J'y arrive avec FF et Chrome, mais pas avec IE (display:inline-block). Et mieux encore, je voudrais que les vignettes occupent tout l'espace en adaptant les marges, autrement dit, "centrer" toutes les vignettes pour éliminer l'espace à droite.

Voici un aperçu de ce que je voudrais :
(avec une taille fixe pour l'exemple)
http://www.mangasuki.net/css/css_final.gif

Voici ce que j'obtiens avec FF et Chrome :
http://www.mangasuki.net/css/css_ff3.gif

Et finalement avec IE7 :
http://www.mangasuki.net/css/css_ie7.gif

Et voici le code qui a servi :


<style>

	.vignette {
		display:inline-block;
		background-color:#F00;
		height:150px;
		width:200px;
		border:solid #000000 1px;
	}

</style>

<div style="background-color:#C0D2B9; width:700px;height:400px">
	
    <div class="vignette"><!----></div> 
    <div class="vignette"><!----></div>    
    <div class="vignette"><!----></div>    
    <div class="vignette"><!----></div>
    
</div>
Bonjour,

À vue de nez, je dirais qu'il n'y a strictement aucun moyen en HTML et CSS de réaliser ce que tu décris.

Ce que tu as tenté ne donne rien dans IE 6-7 car ces derniers ne supportent pas display: inline-block sur les éléments de type bloc (les DIV ici).
Bon ben, voici qui a le mérite d'être clair, merci Florent Smiley lol .

Par contre, n'existe pas d'autres possibilité que le inline-block, pour que j'ai au moins le même résultat entre FF et IE ? (mettons de côté la répartition égale dans le div).

Et si je bidouille un peu avec javascript, y a moyen de changer toutes les marges de toutes les vignettes en les recalculant a partir d'un offsetWidth ?
Phil.Antrope a écrit :
Par contre, n'existe pas d'autres possibilité que le inline-block, pour que j'ai au moins le même résultat entre FF et IE ? (mettons de côté la répartition égale dans le div).

Oui, tu peux travailler avec des DIV en float: left, ou simplement en display: inline. Aucun des deux ne correspond à ton cahier des charges, mais le résultat ne sera pas catastrophique.

Phil.Antrope a écrit :
Et si je bidouille un peu avec javascript, y a moyen de changer toutes les marges de toutes les vignettes en les recalculant a partir d'un offsetWidth ?

Oui, il y a moyen. Ça demandera un peu de doigté et de mathématiques, mais ça me semble tout à fait jouable. Ce que je ferais, c'est que je partirais d'un style de base avec vignettes flottantes et des marges figées, et en JavaScript je ferais quelques savants calculs pour réattribuer les marges de gauche et droite des blocs flottants. Tu peux même remettre à zéro la marge à gauche de chaque flottant qui sera en début de ligne, et celle de droite pour chaque flottant en fin de ligne.
Modérateur
bonjour

coucou mr Forent V. Smiley smile
http://forum.alsacreations.com/topic-4-39488-1-Centrage-vertical-resolu.html

qu'en est-il de :
http://yidille.free.fr//plux/valign/?19-inline-block-tout-navigateurs
est ce deja obsolete (IE7, ff2 ) ?
display:inline-block modifie le contexte de formatage , dans IE c'est le haslayout qui est conféré .... blaba etc

Quel contre-indication peut-il y avoir ?
marges differentes , obligation de faire usage des commentaires conditionnels , trop complexe ou difficile a maintenir ? ... fauteur de trouble dans certains medias ? ... degradation minime mais pas assez gracieuse ?
méprisable ?

GC
gcyrillus a écrit :
Quel contre-indication peut-il y avoir ? (...) trop complexe ou difficile a maintenir ?

Je ne l'ai jamais utilisé en production, parce que je craignais un problème de complexité à la mise en place, et de maintenance après coup. Je ne peux pas dire par expérience si c'est un risque acceptable ou pas.

De manière générale, j'évite les solutions intéressantes mais trop complexes et/ou difficiles à maintenir. C'est pourquoi je considère que le «One True Layout» est une connerie: c'est intéressant comme recherche, mais l'utiliser en production est selon moi une erreur. Ne serait-ce parce que la personne qui passe derrière et qui a des connaissances moyennes ou même avancées en CSS n'y pigera peut-être rien, et risque d'être bloquée pour toute maintenance. Et aussi parce que cela contribue à l'idée que le positionnement CSS c'est de la magie noire, idée que certains exploitent de manière quasi-populiste pour vendre des bouquins... qui proposent encore plus de magie noire. Smiley smile
(Je parle ici du bouquin «Everything You Know About CSS Is Wrong».)

Pour la solution que tu proposes (et que j'ai en partie défrichée), l'utilisation de -moz-inline-stack me semble trop casse-gueule. À l'heure actuelle, j'utilise display:inline-block ponctuellement, sur des éléments de type en-ligne, pour certains effets cosmétiques, par exemple des mini-colonnes avec intitulé à gauche et quelques mots à droite... un span en display:inline-block avec un width ou min-width, c'est pas mal, et osef FF2 (voire IE6 pour le min-width). Pour utiliser display:inline-block pour des contenus plus importants ou des blocs pour la mise en page, j'attends la quasi-disparition de FF2, pour gérer uniquement le cas particulier IE6-7. (Je pars du principe que FF2 disparaitra bien avant IE6.)
Sujet clos
Aller à