+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu] CSS+Javascript (display = none) petit soucis de retour chariot (/showthread.php?tid=2938)
[Résolu] CSS+Javascript (display = none) petit soucis de retour chariot - Ter Rowan - 22-08-2008
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>
avec juste en css
Code PHP :
<?php
li { float : left;}
tout cela marche parfaitement partout
maintenant je rajoute une couche javascript donc l'objectif est de masquer Menu4 et Menu5 dynamiquement
pour ce faire le javascript rajoute au li concernés une classe css :
Code PHP :
<?php
li.cache { display : none; }
je m attend à trouver :
[Menu1][Menu2][Menu3]
blablablabla
blablablabla
blalblablabla
or je tombe sur :
[Menu1][Menu2][Menu3]
.................................blablablabla
.................................blablablabla
.................................blalblablabla
les menus 4 et 5 sont bien masqués
le div se retrouve en dessous du ul, mais décalé à la position en dessous du premier menu masqué (ici le 4)
j'ai résolu le soucis en mettant un <br/> entre le ul et le div mais je trouve ça moche, tant d'un point de vue codage, que d'un point de vue esthétique (un foutu espace vide de perdu)
vous avez une idée ?
PS je n ai pas le vrai code car si vous avez suivi mes aventures, j'étais sur un portable et je n'ai pas encore récupéré mon code
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Sephi-Chan - 22-08-2008
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
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Ter Rowan - 22-08-2008
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 ) ?
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Sephi-Chan - 22-08-2008
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
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Ter Rowan - 22-08-2008
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é)
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Roworll - 22-08-2008
Quelques infos sur le inline-block et son support dans les navigateurs : Lien
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Sephi-Chan - 22-08-2008
oxman a écrit :En mettant plutôt :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.
li { display: inline }
Je pense que ça marche mieux, voire display: inline-block
Un autre article intéressant : Alsacreations - Mise en page CSS avancée grâce à la propriété display.
Sephi-Chan
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Sephi-Chan - 22-08-2008
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
RE: CSS+Javascript (display = none) petit soucis de retour chariot - z3d - 22-08-2008
@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>
Toutefois, attention à l'utilisation de clear: both;, un résultat inattendu peut survenir sur IE quelque soit la version. Tout ceci est du au Layout. on peut se retrouver avec un décalage énorme car IE récupérera le flux d'un autre élément.
Mais une fois le principe de HasLayout acquis plus aucun souci de mise en page ne se profilera devant vous.
RE: CSS+Javascript (display = none) petit soucis de retour chariot - Sephi-Chan - 22-08-2008
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.
Sephi-Chan