Affichage d'une liste

Bonjour a tous

Je suis debutant en design css

J'essai d'afficher une liste dont chaque ligne contient:
a gauche: une image
a droite: une boite contentant:
un texte
une liste de liens

C'est en fait une liste de partitions musicales par album, chaque ligne correspond a un album

Mon probleme est que les contenus d'album s'affichent en ligne par 2 et non les uns en dessous des autres

J'ai cree la structure suivante:

<div id="main">
  <ul>
    <!-- Contenu de l'album 1 -->
    <li>  
      <div class="album">
        <div class="albumCover">
          <img src="... une jaquette d album ..." />
        </div>

        <div class="albumDescription">
          <h3>Artiste 1 / Album</h3>
          <p>Commentaire</p>
  
          <div class="albumsTablatures">
            <ul>
              <li><a href="lien vers la partition du titre 1">Titre 1...</a></li>
              <li><a href="lien vers la partition du titre 2">Titre 2...</a></li>
              <li><a href="lien vers la partition du titre 3">Titre 3...</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>  
    
    <li>  
      <!-- Contenu de l'album 2 -->
      <div class="album">
        <div class="albumCover">
          <img src="... une autre jaquette d album ..." />
        </div>

        <div class="albumDescription">
          <h3>Artiste 2 / Album</h3>
          <p>Commentaire</p>
  
          <div class="albumsTablatures">
            <ul>
              <li><a href="lien vers la partition du titre 1">Titre 1...</a></li>
              <li><a href="lien vers la partition du titre 2">Titre 2...</a></li>
            </ul>
          </div>
        </div>
      </div>
    </li>  
</div>

et le css

.album {
	display: block;
}
 
.albumCover {
	float: left;
	width: 15%;
} 

.albumCover img {
	width: 150px;
	height: 150px;
} 

.albumDescription {
	float: left;
	margin: 0;
	padding: 0px 10px;
} 

.albumDescription h3 {
	margin: 0;
	padding: 0;
	font-size: 130%;
}

.albumDescription p {
	margin: 0;
	padding: 0;
}

.albumsTablatures {
	margin: 0;
	padding: 15px;
}

.albumsTablatures ul {
	display : list-item;
	list-style-image: url(../img/note.gif);
	list-style-position: outside;
}

.albumsTablatures li {
}

.albumDescription h3 a:link, .albums h3 a:visited {
	color: #245185;
}

Merci beaucoup d'avances pour vos conseils experts
Modifié par vc74 (18 Aug 2007 - 17:38)

Salut,

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

zut les espaces ne sont pas bien passes

OK je rajoute les balises code
Modifié par vc74 (18 Aug 2007 - 17:41)

a écrit :
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Ben oui je l'ai fait, j'ai ecrit quelque chose de mal ou c'est juste un message type?

Bonjour vc74,

C'est un message type je crois

Je ne me rends pas bien compte du rendu que tu veux, en plus, ça donne deux choses différentes avec FF et IE et je ne comprends pas ce que tu entends par "contenus d'album"
tu pourrais donner un lien de ton travail stp, je me rendrais peut-être mieux compte avec les images et/où tout le code.

Merci de ta reponse rapide blue
Je vais poster une image pour t'expliquer mon probleme

Voila une photo de ce que je voudrais faire
J'ai mis deux fois le meme album mais en principe ce sont bien sur des albums differents

Suis-je oblige d'utiliser une liste (ul)?

Merci d'avance

Sur ce genre de choses, et si tu veux vraiment faire une liste, je regarderais du côté des lostes de définitions (dl, dt, dd) l'avantage étant qu'on peut avoir plusieurs dd pour un dt avec des classes différentes.

Maintenant tu peux aussi très simplement empiler des div
Modifié par Marie-Aude (19 Aug 2007 - 10:22)

Bonjour vc74,

en mettant à ta div

.album

un

clear: both;

ça devrait marcher

Merci beaucoup de ta reponse blue
Effectivement ca a l'air de fonctionner

Dois-je en deduire qu'a chaque fois que j'utilise float je dois utiliser clear sur le premier element que je ne veux pas voir aligne a l'element flottant?

Bah en fait, je ne sais pas trop, je suis pas trop technicienne, je fais souvent à l'instinct.

Par contre, tu pourrais mettre

clear: both;

à ta div

.albumCover

et supprimer ta div

.album

ça marche aussi bien, alors...
peut-être un pro pourra répondre à ta question