28234 sujets

CSS et mise en forme, CSS3

Couper en deux une liste numérotée

Bonjour à tous !
Je dois mettre en page des listes dont le nombre d'items est aléatoire (je peux le compter grâce à PHP). Ce que je souhaiterais en fait, c'est pouvoir couper la liste au milieu, pour pouvoir l'afficher sur deux colonnes, plutôt que de tout afficher à la suite. C'est à dire, passer à une nouvelle colonne après l'item qui correspond à la moitié de la liste. Est-ce possible ? Je ne souhaite pas utiliser une solution javascript, pour cause d'accessibilité. Je ne peux pas faire deux listes, car la liste est numérotée.
Deuxième question, toujours par rapport à la liste numérotée, est-il possible d'appliquer un arrière-plan et un style particulier uniquement au numéro de l'item (1, 2 etc)
D'avance merci pour votre aide
Bonjour,

Solutions possibles:
- Faire deux listes successives, dont la seconde utilise l'attribut start de l'élément ol pour démarrer à la valeur de compteur voulue. Solution la plus robuste, qui nécessite cependant une DTD transitional.
- A fortiori si, comme c'est probable, l'élément ol sert simplement à faire apparaitre une numérotation et non à indiquer que l'ordre des éléments est significatif, utiliser deux listes ul, masquer les puces et intégrer la numérotation directement dans le contenu. Sinon, utiliser deux listes ol et procéder de même.
- Laisser la liste ol telle quelle et se contenter du colonnage dans les navigateurs Gecko via la propriété moz-colomn

Par ailleurs, les marqueurs de liste ne sont pas stylables. Ce qui invite à utiliser la solution 2 Smiley cligne
Merci beaucoup Laurent Smiley smile En fait, je vais peut-être expliciter mon problème, la liste en question est la tracklist d'un album. Sémantiquement parlant, est-ce impératif de faire une liste <ul> ? Sinon, il est clair qu'avec les <div> cela serait beaucoup plus simple. deux <div></div> de 50% dont un en float:right; et je mets la moitié des enregistrements dans le premier, le reste dans le second. J'utilise un DTD Strict. 

<div style="width:100px">
<div style="height:10px"><div style="width:5px;height:10px;float:left">1</div>Titre 1</div>
</div>
<div style="width:100px;float:right">
<div style="height:10px"><div style="width:5px;height:10px;float:left">2</div>Titre 2</div>
</div>
</div>


Je crois que ce serait plus simple comme solution, mais est-ce correct ?
Administrateur
le_fleau a écrit :
Je crois que ce serait plus simple comme solution, mais est-ce correct ?

Tu peux faire exactement la même chose avec deux listes à la place des deux div Smiley smile

Et vu qu'il s'agit d'une liste d'éléments, il est parfaitement logique d'employer <ul>, voire <ol> dans ton cas puisque c'est numéroté
Modifié par Raphael (21 Jan 2007 - 18:03)
le_fleau a écrit :
la liste en question est la tracklist d'un album. Sémantiquement parlant, est-ce impératif de faire une liste <ul> ?


Une liste, oui, et pas autre chose. Pour ul ou ol, tout dépend de ton choix sur la pertinence de l'ordre des morceaux.

Cela dit, au vu du contenu, j'éviterai les solutions avec deux listes: la récupération du contenu par un script s'en trouverait passablement compliquée Smiley cligne

Donc, solution 3 ci-dessus...
Raphael a écrit :

Et vu qu'il s'agit d'une liste d'éléments, il est parfaitement logique d'employer <ul>, voire <ol> dans ton cas puisque c'est numéroté


Ah... Les numéros des listes ol Smiley ravi

Un petit dernier, avant vous quitter jusqu'au week-end prochain, alors:

Les listes ordonnées portent bien leur nom: elles indiquent qu'à la différence d'une liste non ordonnée, l'ordre des éléments est porteur de sens et doit être conservé dans tous les cas, quelque-soit les transformations ou la présentation du contenu. Qu'il y ait des numéros, pas de numéros, des lettres, des puces, des brocolis en guise de marqueur, ou rien du tout... ou encore que la numération soit continue, non continue, partielle... tout cela n'a aucune importance.

En d'autres termes, et contrairement à une expression courante, ce ne sont pas des listes numérotées. Et beaucoup de listes ol telles qu'elles sont utilisées aujourd'hui sont en fait des ul qui s'ignorent Smiley cligne
Je vous remercie à tous les deux Smiley smile J'ai essayé de tenir compte de vos remarques : voici le résultat en ligne (j'ai bien utilisé des listes, mais en numérottant "à la main") : ici - les tracklists entre <div class="box_big"> et </div> . J'ai juste un petit souci, comment faire que, pour sous Firefox la liste "<ul style="width:100%">" aparaisse bien à gauche à la fin de la trackliste, comme sous IE ? De plus, comment faire pour éviter que le début du premier <div class="box_big"> ne soit masquée par les onglets, toujours sous Firefox ?

D'avance merci pour votre aide

EDIT : Petite erreur dans le code
Modifié par le_fleau (22 Jan 2007 - 01:01)
Je te remercie ghost pour ton aide, mais avec cette modif, cette liste (téléchargez cet album, achetez cet album) apparait une fois que ma colonne de droite est finie, toujours sous firefox. Par ailleurs, j'ai comblé mon problème relatif aux onglets en incorporant mon <div id="onglets"> dans un autre div, pour lequel j'ai précisé une hauteur.... Je trouve ça un peu bricolage, mais je n'ai rien trouvé d'autre :s Si vous avez d'autres idées, merci d'avance
Re,

Tu parles bien de cette liste :
<ul style="clear: both;">
<li><a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheAlbum=100727726" class="darkgray" onclick="window.open(this.href); return false;"><strong>Téléchargez cet album</strong></a></li>
<li><a href="http://www.fnac.com/Shelf/article.asp?PRID=1509687&Origin=CITYLOISIR" class="darkgray" onclick="window.open(this.href); return false;"><strong>Acheter cet album</strong></a></li>
</ul>


Chez moi en local, le clear me la renvoie systématiquement en bas à gauche du block !!
FF2.0
Modifié par ghost (22 Jan 2007 - 01:13)
Si je peux me permettre, ton système de numérotation de liste pourrait être allégé, au moins en donnant une classe à ton bloc puce en css externe.

Pour moi, j'aurais procédé différemment, quitte à numéroté à la mano, j'aurais utiliser une list-style-image pour chaque numéro (il n'y en a pas 100 !) ce qui aurait éviter les problèmes d'alignements et de débordements en cas d'aggrandissement du texte coté client. (et soulager un ton code en div)

Fais attention si ta liste de droite est plus longue que celle de gauche, sous FF les li de droite passent sous la liste de gauche, pour éviter cela donne un overflow: hidden par exemple à ton ul de droite pour que le height du bloc ul suivent le contenu .
Modifié par ghost (22 Jan 2007 - 01:36)
Merci beaucoup ghost Smiley cligne
ghost a écrit :
Si je peux me permettre, ton système de numérotation de liste pourrait être allégé, au moins en donnant une classe à ton bloc puce en css externe.

Pour moi, j'aurais procédé différemment, quitte à numéroté à la mano, j'aurais utiliser une list-style-image pour chaque numéro (il n'y en a pas 100 !) ce qui aurait éviter les problèmes d'alignements et de débordements en cas d'aggrandissement du texte coté client. (et soulager un ton code en div)

En fait, c'est prévu de tout mettre dans un fichier css externe, mais je le fais à la fin, une fois que le chantier est terminé ^^ ça m'évite d'aller tout le temps dans un autre fichier Smiley cligne et d'ailleurs la méthode que j'utilise n'est pas compatible xhtml 1.1. Sinon, pour le style-image, je verrais... c'est vrai que ça pourrait poser des problèmes de mise en forme.... Et puis il suffirait de faire une trentaine d'images au max.
Sinon, pour en revenir au problème, voici mon résultat sous FF 2.0 upload/2464-pbp.gif . Le clear:both fait que la liste apparait après tous les contenus en float, y compris mon menu de droite... Or je souhaiterais que cette liste de liens apparraisse juste sous la tracklist comme le montre l'illustration

Merci pour votre aide

EDIT : erreur de ma part
Modifié par le_fleau (22 Jan 2007 - 01:46)
ghost a écrit :
Re,

Clear: all; ? je ne connais pas !
voir : http://wiki.media-box.net/documentation/css/clear


Oui, pardon, je voulais dire clear:both. Désolé, je suis un peu fatigué. J'ai dû faire un mélange avec <br clear="all" /> En tous cas, visiblement, c'est pas avec clear que ça peut fonctionner Smiley ohwell
Modifié par le_fleau (22 Jan 2007 - 01:51)
Re,

Effectivement tu as un problème de sortie de float et à cette heure ci ..., juste pour une idée teste ce bout de code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> test</title>
<style type="text/css">
<!-- 
#centre{
width:550px;
margin-left:auto;
margin-right:auto;
font-family: verdana;
font-size: 0.7em;
}

.box_big {
margin-top:50px;
background:url('../img/bg_top_box.gif') no-repeat;
background-color:#F0F0F0;
margin-top:10px;
}

ul.droit{
overflow: hidden;
padding-left: 65px;

}

ul.gauche{
width: 225 px;
float: left;
margin: 0;
padding: 0;

}

ul.bas{
clear: both;
list-style-type: none;
margin-left: 5px;
padding: 0;

}

.puce1 {
list-style-image: url(puce1.gif);
line-height: 15px;
} 

li span{
vertical-align: top;
}
.texte{
margin-left: 140px;
}

img{
float: left;
}

h3{
margin-left: 100px;
margin-bottom: 20px;
margin-top: 0;
}
-->
</style>

</head>
<body>

<!-- DEBUT CONTENU DE LA PAGE -->
<div id="centre">
	<div class="box_big">
	<img src="http://multimedia.fnac.com/multimedia/images_produits/grandes/5/2/5/5050466961525.gif"  alt="Pochette" />
	<h3>Cibelle2004 - WSM - 11 titres</h3>
	<div class="texte">
	<ul class="gauche">
		<li class="puce1"><span>Deixa <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727727" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>So sei viver no samba <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727728" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>	
		<li  class="puce1"><span>Hate <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727729" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li  class="puce1"><span>Luisas <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727730" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li  class="puce1"><span>Waiting <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727731" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>No prego <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727732" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
	</ul>

	<ul class="droit">
		<li class="puce1"><span>I'll be <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727733" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
  <li class="puce1"><span>Train <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727734" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Inutil paisagem <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727735" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Um so segundo <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727736" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Pequenos olhos <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727737" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
	</ul> 
</div>
	<ul class="bas">
		<li><a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheAlbum=100727726" class="darkgray" onclick="window.open(this.href); return false;"><strong>Téléchargez cet album</strong></a>
		</li>
		<li><a href="http://www.fnac.com/Shelf/article.asp?PRID=1509687&Origin=CITYLOISIR" class="darkgray" onclick="window.open(this.href); return false;"><strong>Acheter cet album</strong></a>
		</li>
	</ul>

	<div class="bottom_box">
	</div>

</div>
	<div class="box_big">
	<img src="http://multimedia.fnac.com/multimedia/images_produits/grandes/5/2/5/5050466961525.gif"  alt="Pochette" />
	<h3>Cibelle2004 - WSM - 11 titres</h3>
	<div class="texte">
	<ul class="gauche">
		<li class="puce1"><span>Deixa <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727727" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>So sei viver no samba <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727728" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>	
		<li  class="puce1"><span>Hate <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727729" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li  class="puce1"><span>Luisas <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727730" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li  class="puce1"><span>Waiting <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727731" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>No prego <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727732" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
	</ul>

	<ul class="droit">
		<li class="puce1"><span>I'll be <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727733" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
  <li class="puce1"><span>Train <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727734" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Inutil paisagem <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727735" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Um so segundo <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727736" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
		<li class="puce1"><span>Pequenos olhos <a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheTitre=100727737" class="darkgray" onclick="window.open(this.href); return false;">[MP3]</a></span>
		</li>
	</ul> 
</div>
	<ul class="bas">
		<li><a href="http://www.vm-wl.com/default.aspx?RefererId=66&BannerId=1&FicheAlbum=100727726" class="darkgray" onclick="window.open(this.href); return false;"><strong>Téléchargez cet album</strong></a>
		</li>
		<li><a href="http://www.fnac.com/Shelf/article.asp?PRID=1509687&Origin=CITYLOISIR" class="darkgray" onclick="window.open(this.href); return false;"><strong>Acheter cet album</strong></a>
		</li>
	</ul>

	<div class="bottom_box">
	</div>

</div>
</div>
<!-- FIN CONTENU DE LA PAGE -->

</body>
</html>
upload/5854-puce1.gif
Merci beaucoup ghost !
je vais essayer d'adapter ta solution, et je dirais si oui ou non ça a marché Smiley smile
Sujet clos
Aller à