28220 sujets

CSS et mise en forme, CSS3

[Résolu]Probleme opera : des div dans des listes

Bonjour a tous !
N'etant pas un expert en css je vous demande beaucoup d'indulgence !

J'ai un probleme avec Opera 8.5 pour une mise en page a base de liste qui contienne des div.
Je veux que mes div soit en ligne et mise en page dans une liste,mais opera me les mets en colonnes.
upload/4879-opera.jpg
Mon code marche parfaitement avec FF et Netscape,
upload/4879-ff.jpg
j'ai essayer dans tous les sens ca ne merche pas et je CRACK !http://forum.alsacreations.com/smilies/fache.gif
Smiley fache
J'ai isoler le code qui me pose probleme pour une lecture rapide mais je precise que je veux eviter les float qui ne m'arrange pas pour la suite.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
  <title>index</title>
  <style title="Principale" media="screen" type="text/css">
  .conteneur { 
    width: 150px;
    height: 150px;
    display: table-cell;
    background-color: rgb(255, 153, 102);
    }
    
  .im li {
    display: inline; 
    list-style-type: none;
    background-color: rgb(255, 153, 102);
    }

  .im { position: relative;
    }
  </style>
</head>
<body>
<ul class="im">
  <li>  
       <div class="conteneur"> 
       </div>  
  </li>
    <li> 
        <div class="conteneur"> 
        </div>
  </li>  
</ul>
</body>
</html>

Voila le code qui me rend FOU !
Je precise que j'adore Opera qui est tres bon, ce qui me conforte dans l'idee que l'erreur provient de moi.
J'attend avec impatience vos messages!
Merci d'avance!
Modifié par evens (25 Jan 2006 - 03:02)
Bonjour evens et bienvenue ici.

En attendant avec impatience, est-ce que tu pourrais baliser ton code avec le BBCode [ code][/code ] (sans les espaces) comme spécifié dans les règles du forum* ?

Ça le rendra plus lisible.

upload/1-code.gif

Merci. Smiley cligne

* que tu as lues et approuvées en t'inscrivant.
Dans Konqueror tu as le même rendu qu'avec Opera, sauf que l'espacement entre les deux éléments disparaît.

Sinon, comme ça ça marche :
	.im { display: table; }

	.conteneur { 
		width: 150px;
		height: 150px;
		background-color: rgb(255, 153, 102);
	}

	li {
		display: table-cell;
		list-style-type: none;
		background-color: rgb(255, 153, 102);
	}

Testé avec Firefox 1.5, Konqueror 3.4.3, Opera 8.51. Bien sûr pour IE on peut se brosser... (pas de support de display: table;).

Sinon, certains problèmes viennent peut-être du fait qu'on utilise des blocs (divs) à l'intérieur d'éléments en display: inline. Ça me semble assez tiré par les cheveux comme méthode.
Salut,

j'y vais un peu sur des oeufs n'ayant jamais tester le display:table-cell;

Il me semble néanmoins que tu place un élément de type block (un div) dans un élément mis en comportement css inline (.im li).

A priori c'est bien le type/comportement block du div qui doit l'emporter (sous réserve, pour le redire, de l'application de display:table-cell;) et donc le résultat avec opera me semble plutôt logique.

<edit>
Heu...
mpop a écrit :

Sinon, certains problèmes viennent peut-être du fait qu'on utilise des blocs (divs) à l'intérieur d'éléments en display: inline. Ça me semble assez tiré par les cheveux comme méthode.



désolé mpop mais je suis tellement lent quand je rédige mes réponse que je n'arrête pas les court circuitages navrants. donc à César ce qui lui est du Smiley smile

</edit>
Modifié par clb56 (23 Jan 2006 - 00:40)
Bonjour,

Pour corriger le code du premier message, la valeur de display correcte pour les éléments li est display: inline-table (Implémentée par Opera, mais non par FF et IE, à confirmer pour Safari/Konqueror).
Modifié par Laurent Denis (23 Jan 2006 - 04:44)
Laurent Denis a écrit :
display: inline-table (Implémentée par Opera, mais non par FF et IE, à confirmer pour Safari/Konqueror).


J'ai vérifié via BrowserCam, c'est OK pour Safari et Konqueror, et effectivement pas avec FF et IE, ni NS. En revanche entre tous les navigateurs testés (Opera y compris), seul le navigateur Safari rend la hauteur de 150 px (et seulement la version 2, pas la 1.2 ni 1.3)
Modifié par Alan (23 Jan 2006 - 11:02)
Merci a tous pour vos reponse et l'interet que vous y avez porter !
Je suis desoler de vous repondre un peut tard mais je n'ai pas pu me remetre dessus avant !

J'ai tester vos reponse et celle de mpop marche mais elle change trop l'implementation du code d'ou est extrait mon probleme.
Ensuite pour "Sinon, certains problèmes viennent peut-être du fait qu'on utilise des blocs (divs) à l'intérieur d'éléments en display: inline. " , dites moi si je me trompe mais "UL ,LI" sont aussi d'origine de type block ?

J'ai trouver la solution qui me convient grace a laurent denis et alan Smiley cligne et un peu de recher sur le net pour que le tout soit compatible avec ff .
il faut juste changer le display du conteneur.


  display: table-cell; display: inline-table; display: inline-block;

Encore merci a tous !!!!
Sujet clos
Aller à