28172 sujets

CSS et mise en forme, CSS3

Problème de décallage ul il dans un <div> float left

Bonjour à tous, je viens vers vous car je rencontre un petit problème dont j'ai un peu de mal a trouver la solution... Je m'explique :

Je dois simplement créer deux colonnes, chacune d"elle comporte une liste (<ul><li>...) avec un titre.

voici le code que j'ai créer : 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#left-content {	float:left; }
</style>

</head>
<body>
<div id="left-content">
	Mon titre de la premiere colonne
	<ul>
		<li>Mon contenu</li>
		<li>Mon contenu</li>
		<li>Mon contenu</li>
	</ul>
</div>
<div id="">
	Mon titre de la deuxième colonne
	<ul>
		<li>Mon contenu</li>
		<li>Mon contenu</li>
		<li>Mon contenu</li>
		<li>Mon contenu</li>
	</ul>
</div>

</body>
</html>


Le problème est que les "pastilles" li de la colonne de droite sont toujours décalées...

J'ai beau ajouter :


ul { margin-left:0px; padding-left:10px; }
li { margin-left:0px; padding-left:10px; }


voici ce que j'obtiens :
http://djsark.free.fr/img/pb-ul-li.jpg

J'aimerais savoir comment faire pour que les "pastilles" s'aligne bien avec le titre situé au dessus...

J'ai déjà réussi a résoudre ce problème dans le passer, mais de manière pas très propre... en mettant des margin un peu partout... pas clean Smiley eek
Bonjour,

La page feuille de style entière avec l'environnement aurait pu nous aider à te répondre plus efficacement, en l'occurrence, on ne peut faire que des suppositions.
Et là je vote pour : 


ul {
margin:0px;
padding:0px;
list-style-position:outside;
}

Si tu veux que ce soit le TEXTE qui s'aligne avec le titre



ul {
margin:0px;
padding:0px;
list-style-position:outside;
}

Si tu veux que ce soit les PASTILLES qui s'alignent avec le titre


Cependant, je ne peux pas m'empêcher de préciser qu'un titre en HTML, c'est H1, H2, H3,... H6.
Modifié par Nigel (31 May 2011 - 15:55)
Bonjour,

Tu peux remplacer :


#left-content {    float:left; }

par


.left-content {    float:left; }  // en option rajouter par exemple padding-right:10px; pour que les colonnes ne soient pas collées


puis remplacer :

<div id="left-content">

et


<div id="">

par 
<div class="left-content">
Bonjour et merci pour vos réponses Smiley smile

Nigel :

Le code que j'ai coller dans cette page est juste la pour expliquer mieux le problème, je n'ai volontairement pas mis la mise en forme des textes (h1 etc...).

Si je rajoute les propriétés css que tu as mentionné, le problème n'est pas résolu... les pastille de la colonne de droite "mangent" toujours dans la colonne de gauche...

Natha

Les modifications communiquées ne changent rien au problème Smiley biggrin
L'environnement graphique est très important pour résoudre un problème, à chaque situation sa solution. Les CSS dépendent complètement du design, c'est leur rôle, d'ailleurs.

Pour ton problème, as-tu retiré l'ensemble des margin et padding des li, en plus de ce que je t'ai refilé ?

.left-content {float:left; margin-left:10px;} 
ul { margin:0; padding:0; list-style-position:inside; } 
li { margin:0; padding:0; }



Ce que t'a conseillé Natha n'est pas idiot non plus, en supplément. Appliquer une classe à deux éléments censés détenir les mêmes propriétés, c'est le fondement même des CSS. Smiley smile

Maintenant il reste à adapter les margin / padding à ton design.
Modifié par Nigel (31 May 2011 - 16:44)
Tu peux remplacer le css des "ul" par ça (par rapport au code que j'ai donné) :

ul { margin-left:0px;  left:0px; }


upload/38118-shack.jpg

ça s'alignera pareil des deux cotés, après si c'est pas ce que tu voulais c'est que j'ai mal compris ta demande Smiley smile
Modifié par Natha (31 May 2011 - 16:45)
J'ai résolu le problème!

voici le bon code : 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Document sans nom</title> 
<style type="text/css"> 
 
#left-content {float:left; margin-right:20px}  
ul { margin:0; padding:0; list-style-position:inside; }  
li { margin:0; padding:0; } 

</style> 
 
</head> 
<body> 
<div id="left-content"> 
    Mon titre de la premiere colonne 
    <ul> 
        <li>Mon contenu</li> 
        <li>Mon contenu</li> 
        <li>Mon contenu</li> 
    </ul> 
</div> 
<div id=""> 
    Mon titre de la deuxième colonne 
    <ul> 
        <li>Mon contenu</li> 
        <li>Mon contenu</li> 
        <li>Mon contenu</li> 
        <li>Mon contenu</li> 
    </ul> 
</div> 
 
</body> 
</html>



le contenu est bien aligné avec le "titre" du dessus.
Smiley langue
Bonjour,

Si tu inspectes les éléments avec Firebug, Web Inspector ou autre outil similaire, tu verras que ton deuxième DIV et les éléments UL et LI qu'il contient passent en dessous du flottant. C'est normal, les flottants ça marche comme ça: ça repousse le texte, pas les blocs.

Pour que le bloc lui-même soit repoussé, tu peux le faire flotter aussi, lui affecter un contexte de formatage en utilisant overflow:hidden, ou encore lui donner un margin-left correspondant à la largeur du flottant.

Remarques en vrac:
- Je ne vois pas de Doctype dans ton code. Je suis persuadé qu'il y en a un en bonne et due forme (toute autre situation serait suicidaire...), mais je le signale à tout hasard. Smiley cligne
- Cet attribut id vide, c'est pas terrible tout de même. Tu peux soit choisir un id qui va bien, soit retirer l'attribut.
- Il serait plutôt logique que tes titres soient codés comme des titres, donc avec des <h1> par exemple.
Sujet clos
Aller à