Comment contenir une liste

bonjour,

Je désire que ma liste ait une taille maximale en largeur. pour cela j'ai donner un width sur le UL, sous internet explorer le rendu est bon, sous firefox c'est pas bon du tout.

Voyez par vous même :
http://www.mon-livre-photo.fr/detail-produit.php?id=7

voici le code de la liste :

#list { 
	list-style-type:none;  
}
#list div {padding-left:10px; width:250px; float:right;}

Le code HTML :

<ul id="list" style="background-color:#3C0; width:445px">
<li style=" width:auto"><div>Carré</div>Format : </li> 
<li style=" width:auto"><div>30 par 30 cm </div>Taille ( largeur / hauteur ) : </li>
<li style=" width:auto"><div>20 pages</div>  Nombre de page de base : </li></ul>

Si je ne définie pas de taille la liste épouse le bloc bleu, est dépasse en dessous, c'est pas terrible. (voir pièce jointe)
Modifié par mims1664 (29 May 2009 - 11:37)

Euh...

Pour donner une largeur de 100px à une liste :

ul{
  width:100px;
}

<ul>
<li></li>
<li></li>
</ul>

Tu devrais essayer de faire attention a mettre des codes CSS au même endroit, de préférence dans ton fichier.css plutôt que de les éparpiller dans ta page HTML avec l'attribut style.

Et, question, bien que mettre un div dans un li ne soit pas incorrect, quel le le but ? Un span serait plus approprié.

Bonjour,

Merci de votre réponse, effectivement des span semble plus approprié, quant au style dans le code HTML c'est plus pour tester qu'autre chose.

J'ai testé en donnant une taille au <UL> mais le résultat n'est pas bon sous firefox uniquement. la j'ai mis 445px. voyez le résultat.

mims1664 a écrit :
Merci de votre réponse, effectivement des span semble plus approprié

La question d'utiliser un DIV ou un SPAN ici est complètement marginale, on s'en fout un peu.
Par contre la structure HTML est mauvaise. Pour bricoler de la mise en page, on a échangé l'ordre de deux informations, ce qui rend la lecture linéaire (avec un lecteur d'écran, ou sans styles CSS appliqués par exemple) complètement incompréhensible. Ça serait pas mal de corriger ça.

Sur le fond, je vais répondre à deux questions qui ne sont pas posées explicitement ici mais qui me semblent constituer le fond de l'affaire.

Question: pourquoi est-ce que la largeur de ma liste ne s'adapte pas toute seule?

Réponse: à priori parce que le bloc bleu est soit positionné en absolu, soit flottant. Dans le premier cas, la seule solution est de limiter la largeur de la liste, ou celle de sont conteneur, en utilisant soit une largeur fixe en pixels ou une marge à droite ayant la largeur du bloc bleu. Dans le deuxième cas, on peut utiliser ces premières solutions, ou bien utiliser un contexte de formatage pour que la liste (ou son conteneur si on travaille sur cet élément) soit repoussée par le flottant, ce qui n'est pas le comportement par défaut (en l'absence de contexte de formatage).

Question: quelle structure je peux utiliser pour baliser ma liste de caractéristiques?

Réponse: une liste non ordonnée (UL) avec un ordre logique des contenus, ça serait pas mal. Un tableau à deux colonnes (une ligne par caractéristique), c'est très bien aussi. Dans ce dernier cas on pourra baliser les intitulés des caractéristiques comme <th scope="row">...</th>. (Hmm... à voir, ça pourrait être un peu verbeux dans un lecteur d'écran pour pas grand chose.)

On s'assurera en tout cas d'avoir un contenu qui se linéarise bien, c'est à dire notamment que l'affichage sans CSS ou, dans le cas d'un tableau, la lecture ligne par ligne, donne un contenu compréhensible et logique.

Ok,

Merci des conseils, je crois dans un premier temps que je vais tenter de donner une ordre logique de lecture.

Ensuite si je ne m'en sors pas le tableau bien sur mais j'essaye de faire sans...

Merci pour les quelques explications.

Jérémie