28172 sujets

CSS et mise en forme, CSS3

[Résolu] Quel équivalent de display:table pour ie ?

Bonjour à tous !

Je suis en train de développer un thème pour mon blog.
L'idée est de faire un site 100% horizontal, soit simplement plusieurs bloc alignés les uns à coté des autres, à faire défiler avec la scrollbar horizontale.

Actuellement, j'utilise cette structure qui n'est pas compatible avec IE :
- un div "global", width 100%, height 100% et overflow:auto
- dans "global" : un div container, width:auto, display:table, qui contient les différents blocs du site.

si j'enlève display:table, les div contenues dans "container", ayant la propriété float:left , ne s'aligneront pas sur une seule et même ligne. il y'aura un "retour a la ligne" si les blocs ne tiennent pas en largeur.

la seule alternative que j'ai trouvé pour ie, est de mettre la largeur du container a 10000px. Ainsi ca fonctionne, mais il y'aura un grand espace vide scrollable a droite de mes blocs. Ce qui s'avère bien dommage.

Enfin : je ne peux pas assigner une valeur fixe exacte à container, puisque la largeur totale du site (donc du container) dépend de la page, et donc du nombre de blocs présents sur cette page.

Merci d'avance !

Quelqu'un a-t-il donc une idée pour imiter cette mise en page sous IE ?
Si je ne suis pas clair, voici le code en ligne.
Modifié par 28ToM47 (09 Apr 2010 - 15:43)
bonjour,

il n'y a pas d'equivalent pour IE7 et moins a display:table .
Mis a part un vrai tableau.

Ensuite , si tu veut vraiment jouer sur un defilement horizontal de tes contenus , tu devras partir sur un gabarits epuré et repetitif.

Pour le css , idem , juste partir sur une base epurée et ne t'attacher qu'a positionner ces zones .

Une fois reussi , tu vas t'apercevoir , que ça implique pas mal de truc désagreables et que c'est fragile.

Ce sujet a deja étè abordé sur le forum comme : http://forum.alsacreations.com/topic-4-47479-1-Petit-defi-pour-vous--fullscreen-et-scroll-horizontal.html

Sinon une base theorique instable : (a la vue de ton css , il y a confusoin sur inline-block et ses alternatives plus ou moins utiles)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>gabarit horizontal , gcyrillus </title>
<style type="text/css" media="screen">
html , body , #global {width:100%;}
html , body , #global , .cell , .tampon { height:100%;margin:0;padding:0; }
#global {letter-spacing:-0.5em;white-space:nowrap;}
.cell {display:-moz-inline-stack;display:inline-block;position:relative;}
.tampon {white-space:normal;letter-spacing:normal;display:block;min-width:400px;border-left:solid;}
</style>
<!--[if lte ie 7]>
<style  type="text/css"  media="screen">
.cell {display:inline;zoom:1;}
</style>
<![endif]-->
</head>
<body>
<div id="global">
	<div class="cell">
		<div class="tampon">
			 en theorie yapuka , mais bonjour l'ergo [smile] <a href="#fin">dernier</a>	
		</div>
	</div>
	<div class="cell">
		<div class="tampon"> 
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon">
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon">
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon">
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon">
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon">
			 Zone ou section
			 Zone ou section
		</div>
	</div>
	<div class="cell">
		<div class="tampon" >
			 Zone ou section <a href="#global" id="fin">debut document</a>
			 Zone ou section
		</div>
	</div>
</div>
</body>
</html>

Le moins receptif a ce type de mise en forme est 'opera'.

GC
Tu as expliqué quel était l'impact lorsque tu supprime le display:table.

Mais tu n'as pas dis ce que cela impact lorsque tu supprime le display:table
Pourquoi veux tu le retirer ?
sinon , entre display et float il y a une certaine incompatibilité .
Le formatage en flottant l'emporte sur le formatage en ligne ou boite dans le flux .

float = ancre et extrait en partie un element du flux naturel inline ou block , son interaction est modifié avec les autres element (ex: span ou div , ils perdent leur display au profit du float).
display = l'element reste dans le flux et change de comportement (ex : span en display block , alors il se comporte comme un div sans en être un ).

GC
yeeeeeeeeeaaah !!!

Merci beaucoup gc-nomade c'est ce que je cherchais ! J'viens de passer 3 jours à chercher, tu m'enlève une belle épine du pied !
Pour ce qui est de l'ergonomie, ce blog est censé afficher majoritairement des images. Il fera office de portfolio. C'est pourquoi j'ai choisi un affichage horizontal. Perso je déteste les portfolio où on arrive sur une page d'accueil qui nous montre des miniature où on ne voit rien, on clique sur n'importe laquelle, ça reload la page et on voit UNE image. Là, toutes les illustrations seront simplement placée côté à côte, avec un lien en dessous de chacune d'elle pour commenter. Cet affichage permet donc pour moi de mettre l'accent sur le contenu, où tout s'affichera sur une seule page.

alexx -> Euuuh j'ai pas compris ta question dsl ^^ Mais si je supprimais display:table, les div ne s'affichaient horizontalement que tant que la largeur du navigateur n'était pas atteinte. Sinon les div basulent en dessous des unes des autres.

Un grand merci encore !
Je comprends que tu n'es pas bien compris mon message. Mes 2 phrases se sont contredites.
Je corrige mon texte.

a écrit :
Tu as expliqué quel était l'impact lorsque tu supprimes le display:table.

Mais tu n'as pas dis ce que cela impact lorsque tu conserves le display:table
Pourquoi veux tu le retirer ?
Qu'est ce que cela fait lorsque tu grades le display:table ?
Ah ^^ je vois Smiley langue

Et bien sur Firefox, display:table fonctionne ( les div s'affichent horizontalement, comme dans les cellules d'un tableaux ), contrairement à IE ( les div s'affichent horizontalement, mais une fois la largeur du navigateur occupé, elles s'imbriquent les unes en dessous des autres. ) . Par soucis de compatibilité je cherchais donc une alternative pour un affichage similaire, et compatible avec davantages de navigateurs.
Sujet clos
Aller à