Jump to content

Marge en haut et marge à gauche


Recommended Posts

Commencons par le code :

#scd_nav{
width: 778px;
margin: 0px;
border: 1px solid #000000;
}

#scd_nav dl{
float: left;
width: 180px;
padding: 0px;
border: 1px solid #000000;
margin-left: 10px;
}

hr {
margin: 0px;
padding: 0px;
height: 1px;
clear: both;
visibility: hidden;
}

et

<div id="scd_nav">
<dl>
 <dt>Titre 1</dt>
 <dd>Texte à insérer</dd>
</dl>
<dl>
 <dt>Titre 2</dt>
 <dd>Texte à insérer</dd>
</dl>
<dl>
 <dt>Titre 3</dt>
 <dd>Texte à insérer</dd>
</dl>
<dl>
 <dt>Titre 4</dt>
 <dd>Texte à insérer</dd>
</dl>
<hr />
</div>

Rien de très compliqué, pourtant l'exemple est assez saisissant. Sous mozilla, une marge de 10px apparait au dessus de la liste dl, sous IE elle apparait a gauche.

J'ai tenté différents hack et rien n'y fait, Je cherche donc une parade à ces 2 phénomènes... :angry:

A votre bon coeur... :whistling:

Link to post
Share on other sites

Bon, comme je n'aime pas rester les bras croisés, trop longtemps, j'ai cherché une autre solution, moins sémentique mais c'est pas grave.

CSS:
hr {
margin: 0px;
padding: 0px;
height: 1px;
clear: both;
visibility: hidden;
}

#autour{
width: 778px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}

#a, #b, #c, #d{
float: left;
width: 180px;
padding: 0px;
border: 1px solid #000000;
margin-left: 10px;
}

#a{
margin-left: 5px;
}
html>body #a{
margin-left: 10px;
}

XHTML:

<div id="autour">
<div id="a">
<h2>Titre 1</h2>
<p>Texte à insérer</p>
</div>
<div id="b">
<h2>Titre 2</h2>
<p>Texte à insérer</p>
</div>
<div id="c">
<h2>Titre 3</h2>
<p>Texte à insérer</p>
</div>
<div id="d">
<h2>Titre 4</h2>
<p>Texte à insérer</p>
</div>
<hr />
</div>

Je conclue de cette expérience qu'IE s'amuse à doubler la valeur du margin-left du premier élément float left. :wacko: Il doit bien y avoir aune autre solution moins acrobatique non? <_<

Link to post
Share on other sites

Euh... :whistling:

Une petite recherche m'apprend que je peux régler le problème en ajoutant un :

	display: inline;

:blush:

Au niveau de mes boites :

#a, #b, #c, #d{
float: left;
width: 180px;
padding: 0px;
border: 1px solid #000000;
margin-left: 10px;
}

Merci, http://www.positioniseverything.net

http://www.positioniseverything.net/explor...led-margin.html

Par contre, il semble que cette astuce ne fonctionne pas dans les listes dl :unsure:

Edited by Tchesko
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...