[Résolu] CSS+Javascript (display = none) petit soucis de retour chariot

[Ter Rowan]

Je me suis retrouvé avec une situation un peu bizarre sous ie (et peut être sous ff , mais je ne sais plus), j'aimerais avoir votre avis :




je crée un menu horizontal sous forme de ul.
juste après je pose une div pour y mettre un texte quelconque

visuellement ça donne :

[Menu1][Menu2][Menu3][Menu4][Menu5]
blablablabla
blablablabla
blalblablabla

le code est simple

Code PHP :

<?php 

<ul>

<li>Menu1</li>

<li>Menu2</li>

<li>Menu3</li>

<li>Menu4</li>

<li>Menu5</li>

</ul>

<div>

blablablabla<br />

blablablabla<br />

blalblablabla<br />

</div> 

[Sephi-Chan]

Il faudrait que tu casses le flux flottant en mettant ce code entre ta liste et ta division.

Code :

<br style="clear: both;" />

Sephi-Chan

[Ter Rowan]

oki merci, je ne connais pas du tout ce mécanisme.

Par contre, il faut le mettre directement dans le html, ou on sépare code et style (donc dans css ) ?

[Sephi-Chan]

Tu peux faire ça :

Code :

<ul>
    <li>Menu1</li>
    <li>Menu2</li>
    <li>Menu3</li>
    <li>Menu4</li>
    <li>Menu5</li>
</ul>
<br class="spacer" />
<div>
    blablablabla<br />
    blablablabla<br />
    blalblablabla<br />
</div>

Et affecter à ton .spacer le style clear : both; line-height : 0; height : 0; afin que son effet (un saut de ligne) soit invisible.


Sephi-Chan

[Ter Rowan]

merci sephi, tu réponds pleinement. (plus qu'à essayer ce soir)

et paf vla oxman qui me montre des chemins encore plus détournés..

tu peux expliquer un peu ce que font ces deux choses. Par rapport à mon float:left qui provoque déjà la ligne (de plus je crois que j avais essayé le inline dans le ul sans vraiment savoir à quoi ça servait mais ça n'avait pas marché)

[Roworll]

Quelques infos sur le inline-block et son support dans les navigateurs : Lien

[Sephi-Chan]

En mettant plutôt :
li { display: inline }

Je pense que ça marche mieux, voire display: inline-block

En fait, ça convient dans les cas où les liens restent de simples textes. Mais si ces liens sont graphiques, ou bien s'ils doivent avoir des marges, bordures, etc. Ça devient impossible avec inline, et trop hasardeux avec inline-block vu son support.

Un autre article intéressant : Alsacreations - Mise en page CSS avancée grâce à la propriété display.


Sephi-Chan

[Sephi-Chan]

Justement, le bloc flottant est plus souple puisqu'il s'adapte dans tous les cas : qu'il souhaite faire du graphique ou du texte.

Inutile de parler de inline-block tant son support au sein d'IE est mauvais, et cela jusqu'à ce qu'IE8 soit utilisé massivement (par ceux qui utilisent actuellement IE6 et IE7). Autant dire qu'il n'est pas utilisable en l'état.


Sephi-Chan

[z3d]

@Sephi-Chan > En regardant de plus près ton code, on remarque que tu peux améliorer celui-ci en évitant d'ajouter des élément inutiles tel que <br />

Code PHP :

<?php 

<ul>

    <li>Menu1</li>

    <li>Menu2</li>

    <li>Menu3</li>

    <li>Menu4</li>

    <li>Menu5</li>

</ul>

<div class="spacer">

    blablablabla<br />

    blablablabla<br />

    blalblablabla<br />

</div> 

[Sephi-Chan]

Effectivement, mais comme expliqué plus haut, je donne cette solution dans un soucis de généricité. Ayant affaire à une personne intelligente, je suppose qu'elle comprendra comment remanier ça selon son cas.

Toutefois, il faut noter qu'un <hr /> serait sémantiquement correct.

Le soucis du hasLayout ne se pose pas en utilisant le <br /> (ni une autre balise dont on spécifie la hauteur) dont la hauteur est spécifiée.

• Le concept de hasLayout dans IE/Win
  

Sephi-Chan