[Résolu] FF et ce Ž@###!$ de IE

Message par **Ymai** » 13 déc. 2006, 16:42

Bonjour
Dans KpZ, je réalise la mise en page toute simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1st July 2004), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      titre
    </title>
<style type="text/css">
#conteneur {
border: 1px solid green;
margin: auto;
width: 1000px;
height: 100%;
text-align: center;
}
#menu {
color: #ff6600;
width: 140px;
position: absolute;
}
#texte {
border: 1px solid Red;
padding: 5px;
margin-left: 160px;
background-color: #eeeeee;
text-aliign: justify
}
</style>
  </head>
  <body>
    <div id="conteneur">
      <div id="menu">
        <ul>
          <li>Item 1
          </li>
          <li>Item 2
          </li>
          <li>Item 3
          </li>
        </ul>
      </div>
      <div id="texte">
        Le texte
      </div>
    </div>
  </body>
</html>

Simple et élégant

)
Dans FF, pas trop de souci. Mais dans IE, la zone id="menu" se dispose vraiment n'importe où.
Et j'avoue ne vraiment pas voir où est le souci. La seule solution que j'ai pu trouver passe par l'anéantissement total et définitif de IE.
Donc, si quelqu'un passait par là, ce serait vraiment aimable de vous pencher sur mon cas.

Message par **chinon37** » 13 déc. 2006, 18:40

ma solution!?!
Pourquoi ton truc ne marche pas? mystère?!

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      titre
    </title>
    <style type="text/css">
#conteneur {
    border: 1px solid green;
    margin-right: auto;
    margin-left: auto;
    width: 1000px;
    height: 100%;
    }
    #menu {
    color: #ff6600;
    width: 140px;
    position: relative;
    float: left;
    }
    #texte {
    border: 1px solid Red;
    padding: 5px;
    margin-left: 160px;
    background-color: #eeeeee;
    text-align: justify;
    }

    </style>
  </head>
  <body>
    <div id="conteneur">
      <div id="menu">
        <ul>
          <li>Item 1
          </li>
          <li>Item 2
          </li>
          <li>Item 3
          </li>
        </ul>
      </div>
      <div id="texte">
        Le texte
      </div>
    </div>
  </body>
</html>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Message par **Ymai** » 13 déc. 2006, 18:50

Merci pour cette solution qui fonctionne tant sous IE7 que sous FF.
Par contre, j'ai un (nouveau) souci.

Code : Tout sélectionner

<html><head>
<meta name="generator"
 content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>titre</title>
<style type="text/css">
#conteneur {
border: 1px solid green;
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 100%;
}
#menu {
color: #ff6600;
width: 140px;
position: relative;
float: left;
}
#texte {
border: 1px solid Red;
padding: 5px;
margin-left: 160px;
background-color: #eeeeee;
text-align: justify;
}
</style></head><body>
<div id="conteneur"><div id="menu"><ul><li>Item
1
</li><li>Item 2
</li><li>Item 3</li><li>Item 4</li><li>Item
5</li><li>Item 6</li><li></li></ul>
</div><div id="texte">Le texte<br><h1
 style="clear: both;">Un titre</h1>
</div></div></body></html>

Bon, en fait, ce n'est pas un nouveau souci. C'est un ancien qui n'apparaît pas dans ma version initiale, gentiment soufflée par une bonne âme sur le forum "Développement" et qui se reconnaîtra.
Tout le problème est bien au niveau du "clear:both" qui fait tout descendre ce qui suit sous le menu.

Message par **chinon37** » 14 déc. 2006, 08:14

Que cherches-tu à faire avec ce clear:both? en d'autres termes, en quoi t'est-il utile?
Si on a le même problème , "texte" se retrouve derrière "un titre" sous IE?

Message par **Ymai** » 14 déc. 2006, 09:01

Bonjour
Le but est de pouvoir disposer des éléments à ma guise.
Des blocs <div> placés côte-à-côte, d'autres placés obligatoirement à la marge gauche.

Code : Tout sélectionner

+-------------------+   +-------------------+
|                   |   |                   |
|                   |   |                   |
+-------------------+   +-------------------+

+-------------------+  
|                   |  
|                   |  
+-------------------+  
+-------------------+  
|                   |  
|                   |  
+-------------------+  
+-------------------+   +-------------------+
|                   |   |                   |
|                   |   |                   |
+-------------------+   +-------------------+

J'ai donc besoin du "clear" pour forcer les passages à la marge des <div>'s

Message par **chinon37** » 14 déc. 2006, 09:34

Bizarre, bizarre:
Sous IE (encore 6 chez moi, pas pressé de mettre le 7 et ses espions sur mon pc), la page apparait sans "le texte".
Après quelques clics de souris intempestifs à l'endroit où devrait se trouver "le texte" (toujours dans IE6), celui-ci apparait

Pourtant, je ne suis ni à Lourdes, ni à Lisieux!!
C'est sur un essai de clear:left que j'ai vu cette bizarrerie. Peux-tu confirmer?

Une solution utilisant la divite aigue (j'ai honte) c'est de faire des div imbriqués

Plus besoin des clear.

Message par **Ymai** » 14 déc. 2006, 09:49

chinon37 a écrit :Bizarre, bizarre:
Sous IE (encore 6 chez moi, pas pressé de mettre le 7 et ses espions sur mon pc), la page apparait sans "le texte".
Après quelques clics de souris intempestifs à l'endroit où devrait se trouver "le texte" (toujours dans IE6), celui-ci apparait
Pourtant, je ne suis ni à Lourdes, ni à Lisieux!!
C'est sur un essai de clear:left que j'ai vu cette bizarrerie. Peux-tu confirmer?

Confirmation: un bug de plus dans ie6

Une solution utilisant la divite aigue (j'ai honte) c'est de faire des div imbriqués Plus besoin des clear.

c.-à-d.? Entourer chaque "ligne" d'un grand <div> contenent chacune des séries de 1, 2 ou 3 cadres?
Pourquoi pas, si c'est la seule solution avec CSS2?

Message par **chinon37** » 14 déc. 2006, 09:58

Ymai a écrit :c.-à-d.? Entourer chaque "ligne" d'un grand <div> contenant chacune des séries de 1, 2 ou 3 cadres?
Pourquoi pas, si c'est la seule solution avec CSS2?

Oui

l'avis d'Alsacréations peut-être? ils sont toujours de bon conseil... et ça peut interresser pas mal de monde de faire des tableaux sans tableaux

Message par **Ymai** » 14 déc. 2006, 10:01

OK, merci.
Je vais essayer ça.

Geckozone

[Résolu] FF et ce Ž@###!$ de IE

[Résolu] FF et ce Ž@###!$ de IE

Qui est en ligne ?