Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2014-12-30T18:12:33+01:00Les derniers messages parus sur le forum de Zeste de Savoir.Padding sur la balise <li> et espace entre les <li>, message #371322014-12-30T18:12:33+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37132<figure><blockquote>
<p>Une autre solution aurait été de faire un display: table sur le UL, et de mettre les LI en display: table-cell.
</p>
</blockquote>
<figcaption><p><a href="http://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37129">Thunderseb</a></p></figcaption></figure><p>Celle que j'oublie toujours ! Pratique en plus pour répartir les éléments sur toute la largeur, façon flexbox (qui n'a d'ailleurs pas grand intérêt ici je trouve — sans parler de son support encore bancale).</p>Padding sur la balise <li> et espace entre les <li>, message #371292014-12-30T17:41:54+01:00Thunderseb/@Thundersebhttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37129<p>Une autre solution aurait été de faire un display: table sur le UL, et de mettre les LI en display: table-cell. </p>Padding sur la balise <li> et espace entre les <li>, message #371262014-12-30T17:38:39+01:00melepe/@melepehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37126<p>Le problème est résolu, mais je voulais tout de même signaler les <code>flexbox</code> qui à mon avis pourraient répondre à ton problème. <img alt=":)" src="/static/smileys/smile.png"></p>
<p>(Et sinon, ils discutent sur ce <a href="http://stackoverflow.com/questions/1097006/removing-whitespace-between-html-elements-when-using-line-breaks/8902198#8902198">topic de SO</a> des différentes manières de virer les whitespaces dus au HTML. Moi je serais tenté d'utiliser la réponse de opatut, mais toutes se valent)</p>Padding sur la balise <li> et espace entre les <li>, message #370872014-12-30T12:52:02+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37087<figure><blockquote>
<p>Par contre <code>width: 100%</code> sur un élément block n'a aucun sens : c'est le comportement par défaut et c'est source de problèmes (ajoute un simple <code>padding</code> sur ce genre d'éléments, tu verras tout de suite de quoi je parle).</p>
</blockquote>
<figcaption><p><a href="http://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37085">viki53</a></p></figcaption></figure><p>Je suis totalement d'accord sur ce point !</p>Padding sur la balise <li> et espace entre les <li>, message #370852014-12-30T12:28:15+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37085<p>Les commentaires sont une technique courante, ça évite de jouer avec du CSS. C'est pas forcément le plus clean mais ça reste correct. (Par contre l'excuse des floats qui créent des problèmes n'en est pas vraiment une, <em>sauf si tu veux quelque chose de centré avec une largeur variable</em>)</p>
<p>Par contre <code>width: 100%</code> sur un élément block n'a aucun sens : c'est le comportement par défaut et c'est source de problèmes (ajoute un simple <code>padding</code> sur ce genre d'éléments, tu verras tout de suite de quoi je parle).</p>Padding sur la balise <li> et espace entre les <li>, message #370772014-12-30T11:59:48+01:00La source/@La%20sourcehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37077<p>Mouai… si tu es satisfais du résultat <img alt="^^" src="/static/smileys/hihi.png"> n'empêche que c'est du plâtre sur une jambe de bois.</p>Padding sur la balise <li> et espace entre les <li>, message #370732014-12-30T11:50:27+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37073<p>C'est ce que j'ai eu lu, qu'il déconseillait l'utilisation de width:100%.</p>
<p>Mais j'ai réussi à résolver mon problème, j'ai trouver une astuce asser simple, car j'ai eu trop de problème avec les floats.</p>
<p>Résultat:</p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/357.jpg"><figcaption>Sur tous les navigateurs</figcaption></figure></p>
<p>Et la modification se fait sur le html en ajoutant un commentaire entre les <li>:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt"><nav></span>
<span class="nt"><ul></span>
<span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $accueil;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>Accueil<span class="nt"></a></span>
<span class="nt"></li></span><span class="c"><!--</span>
<span class="c"> --></span><span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $presentation;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/presentation"</span><span class="nt">></span>Présentation<span class="nt"></a></span>
<span class="nt"></li></span><span class="c"><!--</span>
<span class="c"> --></span><span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $situation;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/situation"</span><span class="nt">></span>Situation<span class="nt"></a></span>
<span class="nt"></li></span><span class="c"><!--</span>
<span class="c"> --></span><span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $contact;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/contact"</span><span class="nt">></span>Contact<span class="nt"></a></span>
<span class="nt"></li></span><span class="c"><!--</span>
<span class="c"> --></span><span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $emploi;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/emploi"</span><span class="nt">></span>Emploi<span class="nt"></a></span>
<span class="nt"></li></span><span class="c"><!--</span>
<span class="c"> --></span><span class="nt"><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $concours;?>"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/concours"</span><span class="nt">></span>Concours<span class="nt"></a></span>
<span class="nt"></li></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
</pre></div>
</td></tr></table>Padding sur la balise <li> et espace entre les <li>, message #370702014-12-30T11:40:42+01:00La source/@La%20sourcehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37070<p>Ha bon ? et pourquoi sa ? j'men sert fréquemment sans problème.</p>Padding sur la balise <li> et espace entre les <li>, message #370672014-12-30T11:36:09+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37067<p>euh width:100% … je crois que plusieurs personne sauterais jusqu'au plafond en disant qu'il ne faut pas l'utiliser.</p>Padding sur la balise <li> et espace entre les <li>, message #370662014-12-30T11:31:49+01:00La source/@La%20sourcehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37066<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt">nav</span> <span class="nt">a</span> <span class="p">{</span>
<span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
<span class="k">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="k">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<p><em>code non testé, c'est juste l'idée ;)</em></p>
<p>-> donc fatalement il ne faut pas de padding dans le li, il faut le mettre au niveau du a</p>Padding sur la balise <li> et espace entre les <li>, message #370642014-12-30T11:20:07+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37064<figure><blockquote>
<p>Eu… un li dans un a ???? c'est quoi ce truc immonde ?</p>
<p>Sinon, pour un menu horizontale, un diplay: inline n'est pas la technique recommandée, il serai plus approprié d'utiliser la propriété float.</p>
<p>Exemple <a href="http://css.mammouthland.net/menu-horizontal-en-css.php">ici</a> et <a href="http://openclassrooms.com/courses/un-menu-horizontal">ici</a>, sinon une recherche <a href="https://www.google.be/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=css%20menu%20horizontal">google donne plein d'autre exemple</a> <img alt=";)" src="/static/smileys/clin.png"></p>
</blockquote>
<figcaption><p><a href="http://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37062">La source</a></p></figcaption></figure><p>A je viens de voir ton message, je met le lis dans un <a> pour avoir le lien sur toutes la zone, (Donc le padding) et pas uniquement sur le texte. Si il y a un autre moyen plus propre, alors volontier.)</p>
<p>Et merci pour tes liens, je vais voir ça.</p>Padding sur la balise <li> et espace entre les <li>, message #370622014-12-30T11:17:10+01:00La source/@La%20sourcehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37062<p>Eu… un li dans un a ???? c'est quoi ce truc immonde ?</p>
<p>Sinon, pour un menu horizontale, un diplay: inline n'est pas la technique recommandée, il serai plus approprié d'utiliser la propriété float.</p>
<p>Exemple <a href="http://css.mammouthland.net/menu-horizontal-en-css.php">ici</a> et <a href="http://openclassrooms.com/courses/un-menu-horizontal">ici</a>, sinon une recherche <a href="https://www.google.be/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=css%20menu%20horizontal">google donne plein d'autre exemple</a> <img alt=";)" src="/static/smileys/clin.png"></p>Padding sur la balise <li> et espace entre les <li>, message #370602014-12-30T11:10:16+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37060<blockquote>
<p>Donc soit tu supprimes ces espaces, soit tu fais en sorte de les masquer (avec des flottants ou en jouant avec letter-spacing sur le parent.</p>
</blockquote>
<p>Et comment je les supprimes ? Et ce moyen de les masqués avec letter-spacing est-il "propre" ?</p>
<p>Et sinon je vais tester le vertical-align. Merci</p>
<p>[edit]</p>
<p>J'ai tenté d'appliquer le vertical-align sur un <li> ou le <ul>, mais c'est encore pire.</p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/354.jpg"><figcaption>Opera et Chrome</figcaption></figure></p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/355.jpg"><figcaption>Firefox</figcaption></figure></p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/356.jpg"><figcaption>IE 11</figcaption></figure></p>Padding sur la balise <li> et espace entre les <li>, message #370592014-12-30T11:00:34+01:00viki53/@viki53https://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37059<p>Tes espaces verticaux doivent être liés à l'alignement vertical des éléments. Essaie de jouer avec <code>vertical-align</code>.</p>
<p>Pour ce qui est des espacements horizontaux c'est tout simplement dû au <code>display: inline</code> qui affiche les espaces présents dans le HTML. Donc soit tu supprimes ces espaces, soit tu fais en sorte de les masquer (avec des flottants ou en jouant avec <code>letter-spacing</code> sur le parent.</p>Padding sur la balise <li> et espace entre les <li>, message #370582014-12-30T10:49:00+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37058<p>Très bien,</p>
<p>voici donc le css de la barre de navigation:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20</pre></div></td><td class="code"><div class="codehilite"><pre> <span class="nt">nav</span><span class="p">{</span>
<span class="k">background-color</span><span class="o">:</span> <span class="m">#961414</span><span class="p">;</span>
<span class="k">padding</span><span class="o">:</span><span class="m">15px</span><span class="p">;</span>
<span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">nav</span> <span class="nt">ul</span><span class="p">{</span>
<span class="k">display</span><span class="o">:</span><span class="k">inline</span><span class="p">;</span>
<span class="k">list-style-type</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">nav</span> <span class="nt">li</span><span class="p">{</span>
<span class="k">display</span><span class="o">:</span><span class="k">inline</span><span class="p">;</span>
<span class="k">padding</span><span class="o">:</span> <span class="m">15px</span> <span class="m">20px</span> <span class="m">15px</span> <span class="m">20px</span><span class="p">;;</span>
<span class="k">margin</span><span class="o">:</span><span class="m">0</span><span class="p">;</span>
<span class="k">color</span><span class="o">:</span><span class="nb">white</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">nav</span> <span class="nt">li</span><span class="nd">:hover</span><span class="p">{</span>
<span class="k">background-color</span><span class="o">:</span> <span class="nb">white</span><span class="p">;</span>
<span class="k">cursor</span><span class="o">:</span><span class="k">pointer</span><span class="p">;</span>
<span class="k">text-decoration</span><span class="o">:</span> <span class="k">underline</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<p>Le html:</p>
<table class="codehilitetable"><tr><td class="linenos"><div class="linenodiv"><pre> 1
2
3
4
5
6
7
8
9
10</pre></div></td><td class="code"><div class="codehilite"><pre><span class="nt"><nav></span>
<span class="nt"><ul></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $accueil;?>"</span><span class="nt">></span>Accueil<span class="nt"></li></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/presentation"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $presentation;?>"</span><span class="nt">></span>Présentation<span class="nt"></li></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/situation"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $situation;?>"</span><span class="nt">></span>Situation<span class="nt"></li></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/contact"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $contact;?>"</span><span class="nt">></span>Contact<span class="nt"></li></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/emploi"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $emploi;?>"</span><span class="nt">></span>Emploi<span class="nt"></li></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"/concours"</span><span class="nt">><li</span> <span class="na">style=</span><span class="s">"background-color:<?php echo $concours;?>"</span><span class="nt">></span>Concours<span class="nt"></li></a></span>
<span class="nt"></ul></span>
<span class="nt"></nav></span>
</pre></div>
</td></tr></table>Padding sur la balise <li> et espace entre les <li>, message #370572014-12-30T10:39:15+01:00La source/@La%20sourcehttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37057<p>Tu pourrai nous donner un code html/css de base stp ?</p>Padding sur la balise <li> et espace entre les <li>, message #370542014-12-30T10:09:11+01:00WinXaito/@WinXaitohttps://zestedesavoir.com/forums/sujet/2090/padding-sur-la-balise-li-et-espace-entre-les-li/?page=1#p37054<p>Bonjour,</p>
<p>j'ai un petit problème avec les <li>, quand je leur applique un padding de 15px par exemple,sur une barre d'une hauteur de 30px, ça me fais des choses bizarres sur certain navigateurs. (étonnement pour le coup, seul IE fonctionne correctement …)</p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/349.jpg"><figcaption>Firefox</figcaption></figure></p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/350.jpg"><figcaption>Opéra et Chrome</figcaption></figure></p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/351.jpg"><figcaption>Internet Explorer 11</figcaption></figure></p>
<p>Et je voulais savoir s'il y avait un moyen de supprimer ces espaces:</p>
<p><figure><img alt="" src="http://cloud.winlap.ch/pic/353.jpg"><figcaption>Problème d'espacement</figcaption></figure></p>
<p>En vous remerciant, WinXaito.</p>