Ecrire des listes verticales dans les éléments d'une liste horizontal

Question

Relax

4 Aug 2009 à 00:05

Bonsoir,

J'ai créé une liste d'éléments en float left (voir ci-dessous), mais je voudrais les remplir d'information comme l'image suivante :

http://img195.imageshack.us/img195/6651/letx.jpg

voici le code :


<style type="text/css">
div#contenu
{
	margin: 250px 30px 30px 225px ;
	padding: 15px ;
	border: 1px solid #27167d ;
}
ul#lettres li
{
	height: 200px ;
	width: 155px ;
	float: left ;
	text-align: center ;
	font-weight: bold ;
	list-style-type: none ;
	border: 1px solid #27167d;
	margin: 5px 5px 5px 5px;
}
.spacer {
  clear: both;
}
</style>
<div id="contenu">
	<ul id="lettres">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<!-- etc. -->
	</ul>
	<div class="spacer"> </div>
</div>

Ce code génère les cases lettres mais je ne sais pas les remplir avec les éléments en rouge.
Modifié par Relax (04 Aug 2009 - 00:05)

Igor

4 Aug 2009 à 01:49

Bonjour,

Peut-être avec des listes imbriquées pour les énumérations de termes et des titres pour les lettres les chapeautant du genre:


<h1>Abécédaire</h1>
	<ul id="lettres"> 
     <li>
	<h2>A</h2>
		<ul>
		<li>Amulette</li>
		<li>Artisans</li>
		</ul>
	</li> 
        <li>
        <h2>B</h2>
		<ul>
		<li>Bateau</li>
		<li>Banane</li>
		</ul>
	</li> 
        <li><h2>C</h2></li> 
        <li><h2>D</h2></li> 
        
    </ul>

jQz

4 Aug 2009 à 15:33

Oui mais là Igor, tu modifie la structure recherchée par Relax.

Voilà ce que je te propose :


<body>
	
	<div id="contenu"> 
		<ul id="lettres"> 
			<li>A<span><br />Amulette<br /> artisans</span></li> 
			<li>B<span><br />Bateau<br />Banane</span></li> 
			<li>C</li> 
			<li>D</li> 
        <!-- etc. --> 
		</ul> 
		
    <div class="spacer"> </div> 
</div> 
	
</body>

Explications :

Comme les éléments de liste, li sont considérés comme des éléments de types blocks, on peut inclure la balise <span> à l'intérieur de ces derniers.
Ensuite, à l'intérieur de ta balise <span>, tu insères ton contenu sans oublier les retours à la ligne, <br />, car sans eux, le texte s'écrirait sur une seule et même ligne.

Néanmoins, à force de rajouter du contenu il se peut que ton code se retrouve envahie d'un bataillon de balise <br /> Smiley langue

.
Pour pallier ce problème, on peut recourir au PHP en utilisant la fonction nl2br.

Pour plus de détails sur cette fonction :

- Des outils très pratiques - nl2br.
- nl2br.

Du côté de ton fichier CSS, tu peux rajouter cette ligne pour retirer le gras des mots :


ul#lettres li span {	
	font-weight: lighter;
}

Voilà

.
Modifié par jQz (04 Aug 2009 - 15:38)

Relax

4 Aug 2009 à 19:41

Merci pour ces réponses, j'essayerai les deux solutions et je verrai laquelle adopter Smiley cligne

Heyoan

4 Aug 2009 à 20:16

jQz a écrit :
Oui mais là Igor, tu modifie la structure recherchée par Relax.

Oui mais c'était fait exprès car elle manquait de structure. Smiley cligne

De ton côté tu génères une espèce de bric à brac sans aucune sémantique et en plus (je suppose que c'est juste pour que la lettre ait une police plus grasse que le reste Smiley rolleyes

) tu mets dans un SPAN ta liste de mots séparés par des BR ! --> A oublier.

Relax

4 Aug 2009 à 20:25

J'en suis arrivé à ça :


<style type="text/css">
ul#lettres
{ 
    margin: 0; 
    padding: 0; 
    overflow: hidden;
}

li#lettre
{
	height: 200px ;
	width: 225px ;
	float: left ;
	text-align: center ;
	list-style-type: none ;
	border: 1px solid #c4c2c7;
	margin: 5px ;
}

li#lettre h2
{
	color: #77B5FE;
	font-size: 11pt;
}

ul#liste
{
	margin: 10px; 
    padding: 0;
	list-style-type: none ;
	text-align: left;
	font-size: 10pt;
}
</style>
<div id="contenu">
	<ul id="lettres">  
		<li id="lettre"> 
			<h2>A</h2>
			<ul id="liste"> 
				<li>Amulette</li> 
				<li>Artisan</li> 
			</ul> 
		</li>  
		<li id="lettre"> 
			<h2>B</h2> 
			<ul id="liste"> 
				<li>Bateau</li> 
				<li>Banane</li> 
			</ul> 
		</li>  
	</ul>
</div>

Voici un apercu :

http://img522.imageshack.us/img522/7971/78441925.jpg

Ca fait beaucoup de id, y'a quelque chose que je fais de travers ?

Heyoan

4 Aug 2009 à 20:49

Relax a écrit :
Ca fait beaucoup de id, y'a quelque chose que je fais de travers ?

Oui :

* d'abord parce qu'un id doit être unique dans un document (cf. cet article)

* ensuite parce que même une classe serait inutile : il suffit d'utiliser le bon sélecteur.

ul {  
	margin: 0;  
	padding: 0;  
	font-size: 1em;
    list-style-type: none ; 
} 
 
ul#lettres {
    overflow: hidden;
	text-align: center;
} 
 
ul#lettres li {
    height: 200px ; 
    width: 225px ; 
    float: left ;
    border: 1px solid #c4c2c7; 
    margin: 5px ; 
} 
 
ul#lettres li h2 { 
    color: #77B5FE;
	font-size: 1em;
} 

ul#lettres li ul li {
	float: none;
	text-align: left; 
	border: none;
	width: auto;
	height: auto;
       font-size: .8em;
	margin: 0;
	padding: 0 5px;
}

<div id="contenu"> 
    <ul id="lettres">   
        <li>  
            <h2>A</h2> 
            <ul>  
                <li>Amulette</li>  
                <li>Artisan</li>  
            </ul>  
        </li>   
        <li>  
            <h2>B</h2>  
            <ul>  
                <li>Bateau</li>  
                <li>Banane</li>  
            </ul>  
        </li>   
    </ul> 
</div>

Edit: à noter que le code css aurait pu être simplifié en utilisant le sélecteur enfant (>) mais cela obligerait à rajouter un commentaire conditionnel pour IE6 qui ne le reconnaît pas.
Modifié par Heyoan (04 Aug 2009 - 21:11)

jQz

4 Aug 2009 à 22:40

a écrit :
De ton côté tu génères une espèce de bric à brac sans aucune sémantique et en plus (je suppose que c'est juste pour que la lettre ait une police plus grasse que le reste ) tu mets dans un SPAN ta liste de mots séparés par des BR ! --> A oublier.

J'ai énervé Heyoan Smiley bawling

.

Pour être sincère et honnête, je pensais que ce code n'était aussi désastreux qu'il n'en a l'air.

En tout cas, je suis content qu'une personne ai prit la peine de rectifier mes erreurs car c'est en faisant des erreurs et en les comprenant que l'on progresse dans son apprentissage.

Merci Heyoan Smiley cligne

.
Modifié par jQz (04 Aug 2009 - 23:15)

bentsen

4 Aug 2009 à 23:02

Salut,
Personnellement j'aurais remplacé les "li" qui te permettent d'afficher les cadres par des div, pour une raison simple, pour moi un li n'est pas un conteneur et je ne l'utilise pas pour afficher tout plein de chose dedans, d'ailleurs, je suis pas sur que se soit valide W3C (mais je ne suis vraiment pas sur). En revanche un div le permet et à relire s'est plus facile que de voir :

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

Mon code aurait été le suivant :
HTML :


<body>
	<div class="blocLetter">
		<h2>A</h2>
		<ul>
			<li>Atomique</li>
			<li>Atention</li>
		</ul>
	</div>
	<div class="blocLetter">
		<h2>B</h2>
		<ul>
			<li>Baname</li>
			<li>Bouteille</li>
		</ul>
	</div>
	<div class="blocLetter">
		<h2>C</h2>
		<ul>
			<li>Baname</li>
			<li>Bouteille</li>
		</ul>
	</div>
	<div class="blocLetter">
		<h2>D</h2>
		<ul>
			<li>Baname</li>
			<li>Bouteille</li>
		</ul>
	</div>
	<div class="blocLetter">
		<h2>E</h2>
		<ul>
			<li>Baname</li>
			<li>Bouteille</li>
		</ul>
	</div>
	<div class="blocLetter">
		<h2>F</h2>
		<ul>
			<li>Baname</li>
			<li>Bouteille</li>
		</ul>
	</div>
</body>

Code CSS :


.blocLetter{
			float: left;
			width: 200px;
			height: 300px;
			margin: 5px 5px 5px 5px;
			border: 1px solid blue;
		}
		.blocLetter ul{
		
		}
		.blocLetter ul li{
		
		}
		.blocLetter h2{
			text-align: center;
			color: blue;
		}

Modifié par bentsen (04 Aug 2009 - 23:02)

Heyoan

4 Aug 2009 à 23:08

bentsen a écrit :
Salut,
Personnellement j'aurais remplacé les "li" qui te permettent d'afficher les cadres par des div, pour une raison simple, pour moi un li n'est pas un conteneur et je ne l'utilise pas pour afficher tout plein de chose dedans, d'ailleurs, je suis pas sur que se soit valide W3C (mais je ne suis vraiment pas sur).

Eh bien il se trouve que :
* c'est valide W3C
* pour un élément qui n'est pas un "conteneur" la liste des éléments enfants de LI est plutôt impressionnante. Smiley langue

* il me semble bien que les lettres de A à Z constituent une liste et que les LI sont appropriés.

En même temps chacun fait comme il le sent. Smiley cligne

Heyoan

4 Aug 2009 à 23:09

jQz a écrit :
c'est en faisant des erreurs et en les comprenant que l'on progresser dans son apprentissage.

Je suis entièrement de cet avis. Smiley smile

fvsch

5 Aug 2009 à 01:11

bentsen a écrit :
Personnellement j'aurais remplacé les "li" qui te permettent d'afficher les cadres par des div

+1. Le code HTML proposé est parfait. Smiley smile

bentsen a écrit :
pour moi un li n'est pas un conteneur et je ne l'utilise pas pour afficher tout plein de chose dedans

Disons que c'est valide en HTML, mais que les imbrications de listes à outrance posent un problème d'accessibilité (forte verbosité dans un lecteur d'écran). Ici avec deux listes imbriquées ce n'est pas catastrophique, mais ce qui me semble clair c'est que:
1. Si vraiment on veut utiliser une liste pour le premier niveau, il faudrait pour être cohérent utiliser un OL et pas un UL.
2. La liste ne fournit pas une navigation précise dans le contenu, contrairement aux titres.

En bref, utiliser des titres est ici pertinent, et ce n'est pas la peine de surcharger sémantiquement avec une liste.

jQz a écrit :
Pour être sincère et honnête, je pensais que ce code n'était aussi désastreux qu'il n'en a l'air.

Les problèmes avec le code que tu proposais sont:
- une structure de liste là où une structure titre+contenu serait plus pertinente (mais ça reste discutable);
- les «titres» ne sont pas balisés, ni comme en-têtes de section, ni comme simple élément sémantiquement neutre permettant une mise en forme CSS (un SPAN);
- les listes de deuxième niveau sont balisées comme un SPAN, ce qui permet un peu de mise en forme, mais les différents éléments ne sont pas balisés, et là encore si on veut appliquer des styles CSS un peu pointus on va se retrouver bloqué par la pauvreté du balisage.

jQz

5 Aug 2009 à 14:59

a écrit :
Les problèmes avec le code que tu proposais sont:
- une structure de liste là où une structure titre+contenu serait plus pertinente (mais ça reste discutable);
- les «titres» ne sont pas balisés, ni comme en-têtes de section, ni comme simple élément sémantiquement neutre permettant une mise en forme CSS (un SPAN);
- les listes de deuxième niveau sont balisées comme un SPAN, ce qui permet un peu de mise en forme, mais les différents éléments ne sont pas balisés, et là encore si on veut appliquer des styles CSS un peu pointus on va se retrouver bloqué par la pauvreté du balisage.

Merci Florent V. pour tes explications concernant mon code Smiley ravi

.
Modifié par jQz (05 Aug 2009 - 14:59)

Sujet clos

Sémantique web et HTML

Ecrire des listes verticales dans les éléments d'une liste horizontal