Bonjour à tous,
Historique de départ : test comparatif de menu avec
et
Tout se passe bien, c'est beau, propre et sémantique dans les deux cas.
Tiens ! je vais travailler tout ça avec un backround-image "courbe" et décaler mes items de menu le long de la courbe ... (ça va être beauuu !)
=> bakground-image sur <ul> et sur <dl>.
Oups... dans le cas de <dl> il me faut un margin-top pour obtenir le même rendu puisque le <dt> est dans le <dl> (le <h2> est avant le <ul>) ! Zouu, voilà qui est fait !
Allez, hop, un autre petit margin pour le titre (<h2> et <dt>) et ... c'est là qu'est l'os !
Sous FF3 avec <dl>, si je mets un margin (top et/ou bottom) sur le <dt>, le background-image de <dl> se décale d'autant en hauteur (pas avec IE6) !
En fait il semble même avoir des "margins" top et bottom identiques à celles de <dt> !
Recherches ... rien trouvé, tests divers et deux solutions trouvées :
- ajout pour <dl> d'un border de 1px de même couleur que le background (=> invisible)
- ajout pour <dl> de d'un display: table
=> résolu dans les deux cas. (il y a peut-être d'autres solutions mais je me suis contenté de celles-là)
(J'ai aussi cherché du côté de "haslayout" : ni <dl>, ni <dt> ne l'ont mais height confère le layout : suppression du height de <dl> => rien de change)
Mes questions donc :
Qu'est-ce qui provoque le décalage du background-image ?
Pourquoi ces deux solutions fonctionnent-elle ? (j'aime comprendre ;o)
Ci-dessous les codes html et css pour le cas <dl> :
Merci d'avance pour vos cogitations et réponses !
Modifié par Philix (07 Dec 2008 - 08:21)
Historique de départ : test comparatif de menu avec
<h2>Menu</h2> /* ...ou h3, suivant la hiérachie qui précède */
<ul>
<li>item1</li>
...
</ul>et
<dl>
<dt>Menu</dt> /* équivallent au h2 ci-dessus */
<dd>item1</dd>
...
</dl>Tout se passe bien, c'est beau, propre et sémantique dans les deux cas.
Tiens ! je vais travailler tout ça avec un backround-image "courbe" et décaler mes items de menu le long de la courbe ... (ça va être beauuu !)
=> bakground-image sur <ul> et sur <dl>.
Oups... dans le cas de <dl> il me faut un margin-top pour obtenir le même rendu puisque le <dt> est dans le <dl> (le <h2> est avant le <ul>) ! Zouu, voilà qui est fait !
Allez, hop, un autre petit margin pour le titre (<h2> et <dt>) et ... c'est là qu'est l'os !
Sous FF3 avec <dl>, si je mets un margin (top et/ou bottom) sur le <dt>, le background-image de <dl> se décale d'autant en hauteur (pas avec IE6) !
En fait il semble même avoir des "margins" top et bottom identiques à celles de <dt> !
Recherches ... rien trouvé, tests divers et deux solutions trouvées :
- ajout pour <dl> d'un border de 1px de même couleur que le background (=> invisible)
- ajout pour <dl> de d'un display: table
=> résolu dans les deux cas. (il y a peut-être d'autres solutions mais je me suis contenté de celles-là)
(J'ai aussi cherché du côté de "haslayout" : ni <dl>, ni <dt> ne l'ont mais height confère le layout : suppression du height de <dl> => rien de change)
Mes questions donc :
Qu'est-ce qui provoque le décalage du background-image ?
Pourquoi ces deux solutions fonctionnent-elle ? (j'aime comprendre ;o)
Ci-dessous les codes html et css pour le cas <dl> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<meta http-equiv="Content-Language" content="fr-be" />
<meta name="robots" content="noindex, nofollow" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
</head>
<body>
<div id="conteneur">
<h1>Test</h1>
<dl id="menu">
<dt>Menu</dt>
<dd id="menudd1"><a href="#">Lorem</a></dd>
<dd id="menudd2"><a href="#">Ipsum</a></dd>
<dd id="menudd3"><a href="#">Dolor</a></dd>
<dd id="menudd4"><a href="#">Sit</a></dd>
<dd id="menudd5"><a href="#">Amet</a></dd>
<dd id="menudd6"><a href="#">Consectetur</a></dd>
<dd id="menudd7"><a href="#">Adipisicing</a></dd>
<dd id="menudd8"><a href="#">Elit</a></dd>
<dd id="menudd9"><a href="#">Nimbae</a></dd>
<dd id="menudd10"><a href="#">Est</a></dd>
</dl>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: url(../images/layout_grid.gif) no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
}
#conteneur {
border: 1px solid black;
margin: 50px;
}
#menu {
background: transparent url(../images/pneu.jpg) 0 5.0em no-repeat;
/*border: 1px solid red;*/
/*display: table;*/
height: 290px;
}
#menu dt {
font-size: 1.65em;
margin: 1.0em;
}
#menu dd {
font-size: 1.1em;
}
#menudd1 {
margin-left: 2.2em;
}
#menudd2 {
margin-left: 3.3em;
}
#menudd3 {
margin-left: 4.0em;
}
#menudd4 {
margin-left: 4.4em;
}
#menudd5 {
margin-left: 4.8em;
}
#menudd6 {
margin-left: 5.0em;
}
#menudd7 {
margin-left: 5.2em;
}
#menudd8 {
margin-left: 5.3em;
}
#menudd9 {
margin-left: 5.2em;
}
#menudd10 {
margin-left: 5.1em;
}
Merci d'avance pour vos cogitations et réponses !
Modifié par Philix (07 Dec 2008 - 08:21)
avant "abandon" 
...
,