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

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)

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)

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)