2 listes côtes à côtes (50/50) sous IE 5

**nicolas.charlot** · 20/09/2005, 20h20

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** · 20/09/2005, 21h43

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** · 21/09/2005, 09h06

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** · 21/09/2005, 14h24

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** · 21/09/2005, 14h30

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** · 21/09/2005, 15h30

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** · 21/09/2005, 15h40

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** · 21/09/2005, 15h47

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

**nicolas.charlot** · 21/09/2005, 15h51

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** · 22/09/2005, 15h12

Personne n'a la solution ?

CUCARACHA · 24/09/2005, 23h04

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** · 24/09/2005, 23h15

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

**nicolas.charlot** · 26/09/2005, 10h41

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** · 26/09/2005, 11h14

Envoyé par KibitO

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** · 26/09/2005, 11h16

Et alors, pour mon cas ?

**10-nice** · 26/09/2005, 11h21

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

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

**nicolas.charlot** · 26/09/2005, 11h27

du js ?

**10-nice** · 26/09/2005, 11h50

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** · 26/09/2005, 11h54

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** · 26/09/2005, 12h00

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

2 listes côtes à côtes (50/50) sous IE 5

HTML

Vue hybride

Discussions similaires

Partager

Partager