Discussion :

[nicolas.charlot]

Bonjour,

Il s'agit dans un div contenu de placer deux listes non ordonnées côtes à côtes horizontalement. Chacune de ces listes occupant 50% de la largeur du div. La liste gauche sera toujours aussi ou plus longue donc haute que la liste droite.
Problème décidément très embêtant sous IE 5

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul class="liste_droite">
<li>item 1</li>
<li>item ...</li>
<li>item n</li>
</ul>
<ul class="liste_gauche">
<li>item 1</li>
<li>item ...</li>
<li>item n</li>
</ul>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.liste_droite {
float: right;
width: 50%;
}
 
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Sous IE5, il y a un problème avec les pourcentages :
50% donne 50% de la largeur du document et non 50% de la largeur du div.
Donc, la liste droite est beaucoup trop large...

Merci à vous

[spirou]

Je ne possède pas la version 5 de IE, j'ai déjà assez de mal avec la 6

Donc, je ne peux pas trop me rendre compte de l'affichage que tu obtiens.
En faisant comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.liste_gauche{
float: left;
width: 50%;
}
.liste_droite {
float: left;
width: 50%;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}

Ca fonctionne ?

[nicolas.charlot]

Ca ne marche pas mieux, mais c'est normal car le problème est situé au niveau des pourcentages...
50% donne 50% de la largeur du document et non 50% de la largeur du div.
Donc, la liste droite est beaucoup trop large...

[etarip]

D'apres le code tu n as pas de div mais des class. Si il y a un div qui continent tout ca est-ce que tu as défini l'attribut position?

[nicolas.charlot]

Je crois que tu confonds id et class...

Mais je pense voir ce que tu veux dire.

En fait ce code se trouve dans un div central autour duquel il y a des colonnes.
Donc le div en question ne représente pas 100% de la largeur du document mais 100% - la largeur des 2 colonnes (2x150px).
Ah oui, je précise que tout est dans une largeur fluide.

[spirou]

Et le div qui contient tes deux listes, je suppose que sa largeur est aussi exprimée en % ?

Peut-être ça, mais sans conviction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.liste_droite, .liste_gauche{
    width: 50%;
    list-style-type: none;
    margin: 0;
    position: absolute;
}
.liste_droite{
    top: 0;
    left: 0;
    border: 1px solid #00f;
}
 
.liste_gauche{
    top: 0;
    left: 50%;
    border: 1px solid #0f0;
}

[nicolas.charlot]

Non, sa largeur n'est pas exprimée, puisqu'il s'agit de la zone centrale...

Ca marche pas non plus avec position: absolute...

Mais le problème ne vient pas de la position des listes, le problème vient de la largeur...
Ma première méthode avec le float:right fonctionne bien en pixels mais je suis dans un site en largeur fluide.[/code]

[nebule]

et en mettant tes div dans une plus grande limité à X pixel ? ou X % ?
ou dans un tableau ...

[nicolas.charlot]

Etant dans une mise en plage fluide, c'est impossible car seules les colonnes ont leur largeur fixée à 150px.

Pour le centre on a donc une largeur de 100% de la largeur du document moins 300px... On ne peut donc rien fixer.

[nicolas.charlot]

Personne n'a la solution ?

[CUCARACHA]

Salut,

Si j'étais toi (et si j'ai bien compris ce que tu demandes) je mettrais simplement une table dans le div dont la largeur et la hauteur ferait 100%
ça donnerait ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<DIV>
<TABLE border=0 cellpadding=0 cellspacing=0 width=100% height=100%>
<tr>
<td width=50% valign=top>
<ul class="liste_droite"> 
<li>item 1</li> 
<li>item ...</li> 
<li>item n</li> 
</ul>
</td>
<td  valign=top>
<ul class="liste_gauche"> 
<li>item 1</li> 
<li>item ...</li> 
<li>item n</li> 
</ul> 
</td>
</tr>
</TABLE>
</DIV>

Et n'utilise pas les CSS (dans ce cas) pour les lageurs des listes

Bien à toi

Laurent Jordi

[KibitO]

Les tableaux, rien de tel, je ne le répèterai jamais assez.

[nicolas.charlot]

C sûr qu'avec les tableaux c'est facile, mais ça n'est pas conforme aux standards. Si je passe du temps aujourd'hui à me mettre aux CSS, c'est pas pour refaire des mises en pages grâce aux tableaux dés que je suis bloqué, sinon quel intérêt ?

[10-nice]

Les tableaux, rien de tel, je ne le répèterai jamais assez.

beuark la mise en page tableau, alors qu'oni peut mettre en page grâce au css n'importe quel balise html quasiment...

[nicolas.charlot]

Et alors, pour mon cas ?

[10-nice]

Des divs, du js et de l'huile de coude

jvais essayer de te faire ca si j'ai le temps

[nicolas.charlot]

du js ?

[10-nice]

javascript

j'ai commencé, j'ai un chti pb au niveau du style mais j'y travaille

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type="text/javascript">
                   function onHeadClick(id) {
                      document.getElementById('List'+id).style.visibility = 'visible';
                   }
                   function onOptionClick(id){
                      var ListId = id.substring(1,2);
                      document.getElementById('ListHeader'+ListId).innerHTML =  document.getElementById('Item'+id).innerHTML;
                      document.getElementById('List'+ListId).style.visibility = 'hidden';
                   }
                </script>
	</head>
	<body>
	   <div id="Main" style="width:500px;">
	      <div style="width:250px;float:left;" id="ListHeader1"
	         onClick="onHeadClick('1');">
	         <div style="float:left;width:250px;">Sélectionnez</div>
	      </div>
	      <div style="width:250px;float:left;" id="ListHeader2"
	         onClick="onHeadClick('2');">
	         <div style="float:left;width:250px;">Sélectionnez</div>
	      </div>
	      <div style="width:250px;float:left;visibility:hidden;" id="List1">
	         <div style="float:left;width:250px;" id="Item11"
	            onClick="onOptionClick('11');">Choix 1</div>
	         <div style="float:left;width:250px;" id="Item21"
	            onClick="onOptionClick('21');">Choix 2</div>
	         <div style="float:left;width:250px;" id="Item31"
	            onClick="onOptionClick('31');">Choix 3</div>
	         <div style="float:left;width:250px;" id="Item41"
	            onClick="onOptionClick('41');">Choix 4</div>
	         <div style="float:left;width:250px;" id="Item51"
	            onClick="onOptionClick('51');">Choix 5</div>
	      </div>
	      <div style="width:250px;float:left;visibility:hidden;" id="List2">
	         <div style="float:left;width:250px;" id="Item12"
	            onClick="onOptionClick('12');">Choix 1</div>
	         <div style="float:left;width:250px;" id="Item22"
	            onClick="onOptionClick('22');">Choix 2</div>
	         <div style="float:left;width:250px;" id="Item32"
	            onClick="onOptionClick('32');">Choix 3</div>
	         <div style="float:left;width:250px;" id="Item42"
	            onClick="onOptionClick('42');">Choix 4</div>
	      </div>
	   </div>
	</body>

si tu veux t'amuser avec le style... J'ai mis des divs partout mais tu peux allègrement mettre des lists, ce qui sera moins lourd

[nicolas.charlot]

J'ai pas testé car je te rappelle qu'il s'agit d'un site en largeur fluide et ton main fait 500px de large ?...

[10-nice]

Dans ce cas en fin de page tu rajotue un pti script qui va récupérer la taille du body, tu fais ton calcul et tu attribut une taille à tes divs, la principalle à la taille du body (moins les largeur s'il y a) et les div "listes déroulantes" en font la moitié, après tu fais ta sauce