28172 sujets

CSS et mise en forme, CSS3

Liste qui n'aggrandit pas une div et marges d'une liste

Bonjour,

j'ai un petit problème avec une liste dans une div : la liste ne fait pas agrandir la div "contenu" comme des <p> le feraient.

Aussi, je constate que les margin (à 30px) ne sont pas respectés, 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 ;
}
</style>
<div id="contenu">
	<ul id="lettres">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
		<li>F</li>
		<li>G</li>
		<li>H</li>
		<li>I</li>
		<li>J</li>
		<li>K</li>
		<li>L</li>
		<li>M</li>
		<li>N</li>
		<li>O</li>
		<li>P</li>
		<li>Q</li>
		<li>R</li>
		<li>S</li>
		<li>T</li>
		<li>W</li>
		<li>X</li>
		<li>Y</li>
		<li>Z</li>
	</ul>
</div>

Modifié par Relax (09 Aug 2009 - 05:27)
Merci pour le lien Smiley smile le problème est réglé.

Je n'arrive par contre toujours pas à faire respecter les marges pour cette liste Smiley bawling
Relax a écrit :
Je n'arrive par contre toujours pas à faire respecter les marges pour cette liste Smiley bawling
Que veux-tu dire ? Quel est le résultat que tu attendais ?

Peut-être qu'un schéma serait le bienvenu...

A tout hasard je te rappelle que :
margin: 250px 30px 30px 225px ;
correspond à :
margin-top: 250px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 225px;
Hum... pas 30px... Enfin plutot, "pas 5px"... je n'ai toujours pas compris ce que tu voulais ! Smiley murf

Est-ce qu'il n'y aurait pas une petite confusion entre margin et padding ? (Re)lire la description du modèle de boîtes.
Je ne comprends pas pourquoi il y a tant d'écart entre la div contenu et la liste lettres.

le margin de la liste "lettres" (par rapport à la div "contenu" non ?) est à 5px dans la css, pourtant on voit bien qu'il y a beaucoup plus.
Eh bien il faudrait commencer par supprimer les valeurs par défaut de l'élément UL (ce qui permettra également d'avoir le même rendu dans IE et dans les autres navigateurs) : 
ul#lettres {
	margin: 0;
	padding: 0;
	overflow: hidden; /* correction du dépassement des flottants */
}
Puis retirer le padding de 15px du DIV conteneur qui s'ajoute au margin des LI. As-tu lu l'article dont je t'ai donné le lien plus haut ?


Edit: à voir également : Méthodologie pour résoudre les problèmes d'affichage en CSS.
Modifié par Heyoan (02 Aug 2009 - 03:11)
Merci pour ces réponses, tout est réglé Smiley smile

J'aurais une toute dernière question concernant mes listes : comment remplir les listes par d'autres listes ?
Dans ce cas là, il s'agit de mettre des mots pour chaque lettre comme cela par exemple :

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

J'ai essayé divers solutions comme celle-ci :


<ul id="lettres">
	<li>A
		<ul id="mot">
			<li>Amulette</li>
			<li>Artisan</li>
		</ul>
	</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
</ul>

ou encore ça :

<ul id="lettres">
	<li id="lettre">A</li>
	<li id="mot">Amulette</li>
	<li id="mot">Artisan</li>
	<li id="lettre">B</li>
	<li id="mot">Bateau</li>
	<li id="mot">Banane</li>
</ul>


Mais ... sans succès malheureusement.
Sujet clos
Aller à