Liste vertical et horizontal

Bonjour, j'ai un problème pour pouvoir faire des listes imbriquées.
Je souhaite mettre avoir une liste avec :
date de concert 1 & lieu de concert 1
date de concert 2 & lieu de concert 2
date de concert 3 & lieu de concert 3

J'ai essayé d'avoir des listes imbriquées et de déclarer une class = verticale et une classe horizontal plus une classe pour mettre la date de concert en rouge.
Voici ma feuille de style :

p,ul,li,td {
font-size : 90%;
font-family : Sylfaen, Verdana, Arial, Helvetica, Geneva, sans-serif;
color : white;
}

ul.vert {
list-style-type: none;
}

ul.vert li {
position: relative;
text-align: left;
}

ul.horz {
list-style-type: none;
width: 100%;
}

ul.horz li {
float: left;
}

#texte_concert {
position: absolute;
top: 10px;
left: 0px;
}

#concert {
position: relative;
background-color: black;
width: 540px;
height: 400px;
}
p.red {
color:red;
}

p.index {
text-indent: 5%;
}

la page html :
<div id="concert">

<div id="image_concert">
<img src="image_concert.jpg" width="500" length="640" </img>
</div>

<div id="texte_concert">
<ul class="vert">
<li>
<ul class="horz">
<li> <p class="red"> date de concert 1 </p> </li>
<li> <p class="index"> lieu de concert 1 </p> </li>
</ul>
</li>
<li>
<ul class="horz">
<li> <p class="red">date de concert 2 </p> </li>
<li> <p class="index">lieu de concert 2 </p> </li>
</ul>
</li>

</ul>
</div>

</div>

Cela ne s affiche pas du tout bien sur FF et bien sur IE. Sur FF j'ai la 1ere ligne avec les 2 dates de concert et lieu a coté" et apres c'est a droite pour les autres dates.

MErci de votre aide
LanEzpAlaIse

Bonsoir et bienvenue

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation


Modifié par Hermann (13 Sep 2007 - 00:34)

Bonjour,

Une page en ligne pour visualiser directement le problème?

En attendant et pour commencer, une erreur de syntaxe:

<img src="image_concert.jpg" width="500" length="640" [#red]</img>[/#]

(Par ailleurs, qui d'un texte alternatif sur cette image? Si elle est essentiellement décorative ou ne transmet pas d'information particulière, un alt="" sera pertinent.)

Ensuite, je trouve que tu complexifie trop ton code HTML. Tu pourrais faire quelque chose de sensiblement plus simple. Tu as le code suivant:

<ul class="vert">
<li>
<ul class="horz">
<li> <p class="red"> date de concert 1 </p> </li>
<li> <p class="index"> lieu de concert 1 </p> </li>
</ul>
</li>
<li>
<ul class="horz">
<li> <p class="red">date de concert 2 </p> </li>
<li> <p class="index">lieu de concert 2 </p> </li>
</ul>
</li>

</ul>

et tu pourrais faire ceci:

<ul id="liste-concerts">
	<li>
		<span class="date">date de concert 1</span>
		<span class="lieu">lieu de concert 1</span>
	</li>
	<li>
		<span class="date">date de concert 2</span>
		<span class="lieu">lieu de concert 2</span>
	</li>
</ul>

Si tu gardes tout de même ton système de listes imbriquées, évite de rajouter un p dans chaque li: c'est tout simplement inutile.

Enfin, n'oublie pas de tenir compte de la remarque d'Hermann.
Modifié par Florent V. (13 Sep 2007 - 10:11)