28172 sujets

CSS et mise en forme, CSS3

Bloc conteneur qui se décale à gauche: <ul> dans <dd>

Bonjour à toute la communauté,

Je reviens vers vous ce dimanche car je bute sur un problème de décalage qui affecte mon site en développement sous tous les navigateurs.

Voici la partie du code HTML localisé qui pose problème:


<div id="content">
    <div id="main_content">
        <h1>Titre</h1>
	<dl>
	<dt>contenu dt 1</dt>
	<dd>bla bla 1</dd>
	<dt>contenu dt 2</dt>
	<dd>
		<ul>
			<li>element de liste 1</li>
			<li>element de liste 2</li>
			<li>element de liste 3</li>
		</ul>
	</dd>
    </div>
    <div id="sub_content">
    <p></p>
    </div>
</div>


Si j'ôte le bloc de liste dans les balises <dd> la page s'affiche proprement sans décalage, lorsque j'ajoute le bloc <ul> c'est tout le bloc "content" qui se décale horizontalement de quelques px sur la gauche.

Côté CSS, voici la portion de mon code correspondante:

#content{
	overflow: hidden;
	clear: left;
	margin: 20px auto;
	padding: 0 10px 10px 0;
	width: 960px;
}

#main_content{
	float: left;
	width: 620px;
	min-height: 300px;
}

#sub_content{
	float: right;
	width: 300px;
}

#main_content, #sub_content{
	text-align: left;
}

h1{
	font-size: 1.4em;
	text-align: center;
	padding: 8px 0;
	margin-bottom: 28px;
	width: 100%;
}

dl, #content p{
	margin: 10px 40px;
}

dt{
	margin-bottom: 4px;
}

dd{
	padding: 4px 0;
}

dd, #content p{
	margin-bottom: 20px;
}

#content li{
	background: url(puce.png) no-repeat;
	padding-left: 22px;
	line-height: 18px;
	margin: 8px auto;
}


Avez-vous des idées?

Merci d'avance pour votre aide Smiley smile

Alex
je ne sais pas si c'est véritablement la bonne solution
mais tu pourras jouer avec le margin et le padding
de ton ul et li

j'ai ajouté une classe pour ton ul


essaie cela:

#content{ 
    overflow: hidden; 
    clear: left; 
    margin: 20px auto; 
    padding: 0 10px 10px 0; 
    width: 960px; 
} 
 
#main_content{ 
    float: left; 
    width: 620px; 
    min-height: 300px; 
} 
 
#sub_content{ 
    float: right; 
    width: 300px; 
} 
 
#main_content, #sub_content{ 
    text-align: left; 
} 
 
h1{ 
    font-size: 1.4em; 
    text-align: center; 
    padding: 8px 0; 
    margin-bottom: 28px; 
    width: 100%; 
} 
 
dl, #content p{ 
    margin: 10px 40px; 
} 
 
dt{ 
    margin-bottom: 4px; 
} 
 
dd{ 
    padding: 4px 0; 
} 
 
dd, #content p{ 
    margin-bottom: 20px; 
} 
 
 
#content ul{ 
    
    padding-left: 0px; 
   
   
}
#content li{ 
    background: url(puce.png) no-repeat; 
   
    line-height: 18px; 
    margin: 8px auto; 
}

Modifié par waik (08 May 2011 - 13:06)
Mabelle a écrit :
Bonjour, je sais pas si ça joue mais ta balise &lt;dl&gt; n'est pas fermée.



en effet, cela affectait bien le positionnement ^^
En effet bien vu pour la balise dl mais ça ne résoud pas mon problème, je vais tester le padding-left: 0 ce soir et je vous tiens au courant.
Malheureusement le padding-left à 0px sur le <ul> ne change rien. J'ai tenté de commenter uniquement les <li> et le décalage cesse. En fait il s'agirait d'un décalage du aux éléments de liste et non au <ul> conteneurs...
Du nouveau: j'obtiens un phénomène étrange sous Firefox si j'utilise Firebug (ouvert) pendant la navigation des pages sur mon site, le décalage n'existe plus !
Quelqu'un aurais une idée?
Bonjour,

Deux remarques:
- Je ne connais pas le contenu exact, mais l'utilisation de DL me semble fausse ici. Il me semble qu'on aurait du utiliser des H2, tout bêtement (donc virer les <dl>, remplacer <dt> par <h2>, virer les <dd> sans autre forme de procès). Ça aurait aussi l'avantage d'être plus simple...
- S'il y a du padding ou des marges par défaut qu'on souhaite annuler, le meilleur moyen de les repérer c'est d'utiliser Firebug ou Web Inspector ou Dragonfly ou les Developer Tools d'IE... enfin de chercher d'où ça vient exactement en inspectant les différents éléments. Avec la plupart de ces outils il y a une option pour lister aussi les styles par défaut des navigateurs.
Bonjour fvsch, merci pour tes remarques.

En effet l'utilisation des balises DL n'était pas très judicieuse, je les ai remplacées par des H2.

Au niveau du décalage j'utilise Firebug sous Firefox et j'ai localisé le problème: le décalage s'effectue sur la gauche lorsqu'un élément de liste est présent dans mon bloc de contenu principal. J'ai tenté d'appliquer des padding/margin à 0 sur les LI et UL correspondants mais rien n'y fait le décalage persiste. Ce souci est propre a tous les navigateurs mais n'existe plus si je passe par IE tester où que Firebug est actif par exemple. D'où mon étonnement.
Du nouveau sur mon souci de décalage de quelques pixels de mon contenus d'une page à l'autre: si j'ôte le margin: auto général de mon conteneur de premier niveau, qui permet le centrage horizontal de mon site, le site se colle à gauche de ma fenêtre (ce qui est normal) et le décalage n'apparaît plus lorsque je navigue d'une page à l'autre.

Il s'agit donc du centrage automatique de mon conteneur principal qui est la cause du problème, très étrange... quelqu'un a une idée?
Sujet clos
Aller à