Discussion :

[Onyx91]

Bonjour,

le problème que je vais énoncer ici se trouve sur cette page : http://paris1rugby.info/equipe.php

Le code posant problème est le suivant :

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
 
<div class="equipe">
<strong>L'équipe !</strong><br />Voici les joueurs de l'équipe universitaire 2005/2006 :
<ul class="avants">
 <li><a href="#">Joueur 1</a></li>
 <li><a href="#">Joueur 2</a></li>
 <li><a href="#">Joueur 3</a></li>
 <li><a href="#">Joueur 4</a></li>
</ul>
 
<ul class="arrieres">
 <li><a href="#">Joueur 1</a></li>
 <li><a href="#">Joueur 2 </a></li>
 <li><a href="#">Joueur 3</a></li>
 <li><a href="#">Joueur 4</a></li>
</ul>
</div>

Et le CSS :

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
.equipe {
font-size:14px;
font-family:trebuchet ms;
margin-left:170px;
padding:10px;
border: 1px solid #cccccc;
background-image: url("images/backgrounds/articlenormal.jpg");
background-position:top left;
background-repeat:no-repeat;
margin-bottom:10px;
}
 
.avants {
position: relative;
float:left;
 
}
 
.arrieres {
position: relative;
float:right;
 
}

J'aimerai donc que mes deux listes soient dans la DIV équipe. Hors à l'affichages elles n'y sont pas, et je ne vois pas pourquoi
J'ai essayé avec des span, et en position:absolute, le problème ne change pas
J'aimerai qu'elles soit en colonnes, une à gauche, l'autre à droite, cela fonctionne. Si j'enlève le float:right et left, les listes sont bien dans la DIV, mais plus en colonnes.

Si quelqu'un a une piste ... merci d'avance

[bourvil]

bein avec firefox ca a l'air d'aller!
je vois deux colonnes avec chacune 4 joueurs!

[franculo_caoulene]

Salut,

Un truc dans le genre peut-être :

Code :

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

1
2
3
4
5
6
7
8
.avants {
float:left;
margin: 0;
}
 
.arrieres {
margin: 0 0 0 350px;
}

Tu laisses couler le flux à gauche de .avants et tu places .arrieres dans le flux grâce à une marge.

Tu devrais d'ailleurs peut-être mettre des id plutôt que des classes si les éléments sont uniques dans ta page.

[Onyx91]

La solution de franculo_caoulene est la bonne, merci beaucoup à vous deux !
Le rugby universitaire vous remercie

[ddeee]

Bonjour,

ajoute une largeur pour chacune des listes (width:100px
si on met pas de largeur j'ai l'impression que la premiere liste (gauche) prend toute la place et pousse la seconde à la ligne

j'ai aussi enlevé position:relative;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.avants { 
float:left; 
border: 1px solid #cccccc; 
width:100px;
 
} 
 
.arrieres { 
float:right; 
border: 1px solid #cccccc; 
width:100px;
 
}