[résolu] Disposition d'un titre vertical ne fonctionnant pas sous IE

Auteur
beegees	# 16 Mar 2010 - 11:06:58
148 Posts	Bonjour tout le monde, Je suis occupé à créer un site : http://164.15.111.52:82/FlowerPower/index.php Ce site fonctionne parfaitement avec IE7 et Firefox mais "FLOWER POWER" sur la gauche en vertical n'apparaît pas correctement sur IE6. Le titre devrait se trouve plus bas, juste en dessous du menu. Voici le code HTML de ma div : `<div id="fp_vertical"> F<br /><br /> L<br /><br /> O<br /><br /> W<br /><br /> E<br /><br /> R<br /><br /><br /> P<br /><br /> O<br /><br /> W<br /><br /> E<br /><br /> R<br /><br /><!-- .<br /><br /> <sup><i>B<br /> E</i></sup>--> </div> <!-- #fp_vertical -->` et mon code CSS : `#fp_vertical { float:left; position:fixed; left:100px; font-familly:'Trebuchet MS', Arial, Helvetica, sans-serif; font-size:24px; margin-top:6%; background-color:#000000; color:#F0E39E; margin-left:auto; margin-right:auto; text-align:center; }` Sauriez-vous svp comment je peux faire ? Merci d'avance. beegees Modifié par beegees (16 Mar 2010 - 15:57)
148 Posts
supprime50	# 16 Mar 2010 - 14:27:00
103 Posts	Hello, IE6 ne supporte pas le positionnement fixe tel quel. C'est pour ça que ça ne s'affiche pas bien sous IE6. Tu vas devoir faire joujou avec un positionnement absolu dans un bloc en relatif, ou adopter une image pour avoir l'effet escompté Si ton objectif est d'avoir "FLOWER POWER" en positionnement fixe avec une colonne juste à côté, pour que ça marche sous IE6 tu vas revoir ruser un peu : - rajouter une structure dans #fp_vertical et entourant le texte (un div ou un span, comme tu veux) - positionner en relatif #fp_vertical et flottant à gauche (n'oublie pas de rajouter un petit "display:inline;" pour éviter un bug d'IE6 sur les flottants) - positionner en absolu le div/span que tu auras rajouter autour du texte vertical - éventuellement ajouter un brin de javascript pour que ça reste correct lors d'un redimensionnement de fenêtre Je vois que ça pour obtenir l'effet souhaité En espérant que ça puisse t'aider PS : voilà une démo de l'astuce mise en oeuvre, sur mon espace perso (sans ajout de javascript, juste pour la base), et testée sous un IE6 natif (pour précision). Un span a été rajouté autour du texte vertical, et ces règles ont été rajoutées dans la CSS concernée : `/* "Star-Hack" pour IE5/6 / html #fp_vertical { position:relative; /* on passe le bloc en relatif / display:inline; / ne pas oublier le bug des flottants d'IE ! / left:0; / ajustement du positionnement et des marges / top:6%; margin-top:0; } html #fp_vertical span { position:absolute; /* on passe en absolu le mini-conteneur interne. solution qui marche sur IE6 */ top:0; left:0; }` PS2 : une image serait peut-être plus adaptée pour ce texte vertical. La succession de <br /> entre les lettres, même si elle permet d'avoir un texte vertical, n'est pas du plus bel effet qui soit Modifié par Ladytron (16 Mar 2010 - 15:09)
103 Posts
beegees	# 16 Mar 2010 - 15:32:48
148 Posts	Salut, Un tout grand merci pour ta réponse très précise et très complète. J'ai adapté mon code css et mon code HTML et ça fonctionne nikel. Tu es trop fort, merci pour ton aide. beegees Modifié par beegees (16 Mar 2010 - 15:56)
148 Posts