28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème Float left, et IE6

Bonjour,

J'ai un problème avec mon menu gauche, qui a un float:left,
sous IE6, il a tendance à se décaler vers le menu central.



#leftpanel {
    float: left;
    width: 150px;
    margin-left: 10px;
}


Par contre, sous IE7/Firefox, c'est niquel.

Quelle solution proposez-vous?

Merci & bonne journée
Modifié par boeing (29 Jul 2007 - 12:13)
Bonjour boeing et bienvenue,

Je pense que j'ai trouvé.

Enlève
float: left;

à
#leftpanel

et fais un conteneur à ton menu de gauche en 
float: left;


Dis moi si c'est bon sur tous les navigateurs après stp.
Salut, merci à toi Smiley cligne

J'ai enlevé le float de #leftpanel, et j'ai rajouté un conteneur :

	<div style="float: left;">


Le décalage du menu est reglé,
mais mon contenu descend.



Merci.
Modifié par boeing (29 Jul 2007 - 12:13)
Oui, c'est pour ça que je t'ai fait mettre un conteneur en float left à ton menu.

Je te donne les bouts de codes concernés
css :

#conteneurMenuGauche {
float: left;
}

html :

	<div id="content-wrap">
    	<div id="content-top"></div>
		<div id="content">
			[b][#red]<div id="conteneurMenuGauche">[/#][/b]      
				<div id="leftpanel">
					<div id="mainmenu">
						<div class="box">
							<div class="inner">
								<div class="sideinner">
									<div class="currentstyle"><h2><span class="bluetext">Tuto</span>riaux</h2></div>
										<ul>				
											<li><span class="arrowbullet">»</span> <a href="index.php?page=tutoriaux&id=6" title="A" class="mainmenulink">A</a></li>
											<li><span class="arrowbullet">»</span> <a href="index.php?page=tutoriaux&id=2" title="Audio" class="mainmenulink">Audio</a></li>
											<li><span class="arrowbullet">»</span> <a href="index.php?page=tutoriaux&id=4" title="audiooooo" class="mainmenulink">audiooooo</a></li>
											<li><span class="arrowbullet">»</span> <a href="index.php?page=tutoriaux&id=3" title="ssssss" class="mainmenulink">ssssss</a></li>
										</ul>
									<div class="menuspacer"></div>
									<a href="" class="switchtype">Switch to dingbats?</a>
								</div>
							</div>
							<div class="box-bottom"></div>
						</div>
						<!-- box -->
						<div class="box">
	                		<div class="box-top"></div>
			            	<div class="inner">
								<div class="sideinner">
									<div class="currentstyle"><h2><span class="bluetext">Actu</span>alité</h2></div>
									<ul>				
										<li><span class="arrowbullet">»</span> <a href="index.php?page=actualites&id=5" title="hgh" class="mainmenulink">hgh</a></li>
										<li><span class="arrowbullet">»</span> <a href="index.php?page=actualites&id=2" title="Soft" class="mainmenulink">Soft</a></li>
									</ul>
								</div>
								<div class="menuspacer"></div>
							</div>
			           		<div class="box-bottom"></div>
						</div>
						<!-- box -->
						<div class="box">
	                		<div class="box-top"></div>
			            	<div class="inner">
								<div class="sideinner">
									<div class="currentstyle"><h2><span class="bluetext">Fiches</span> films</h2></div>
									<ul>				
										<li><span class="arrowbullet">»</span> <a href="index.php?page=genre&id=4" title="Action" class="mainmenulink">Action</a></li>
										<li><span class="arrowbullet">»</span> <a href="index.php?page=genre&id=3" title="Comédie" class="mainmenulink">Comédie</a></li>
									</ul>
								</div><div class="menuspacer">
							</div>
						</div>
			           	<div class="box-bottom"></div>
					</div>
					<div class="box">
	                	<div class="box-top"></div>
			            <div class="inner"><div class="sideinner">
							<div class="currentstyle"><h2><span class="bluetext">Pl</span>us</h2></div>
							<ul>
								<li><span class="arrowbullet">»</span> <a href="index.php?page=glossaire" title="Glossaire" class="mainmenulink">Glossaire</a></li>
								<li><span class="arrowbullet">»</span> <a href="index.php?page=telechargements" title="Téléchargements" class="mainmenulink">Téléchargements</a></li>
								<li><span class="arrowbullet">»</span> <a href="index.php?page=newsletter" title="Newsletter" class="mainmenulink">Newsletter</a></li>
								<li><span class="arrowbullet">»</span> <a href="/forum/" title="Forum" class="mainmenulink">Forum</a></li>
							</ul>
						</div>
						<div class="menuspacer"></div>
					</div>
			        <div class="box-bottom"></div>
				</div>
			[b][#red]</div>[/#][/b]
		</div>
	</div>


Dis moi si tu as réussi.
boeing, tu n'as pas mis 

#conteneurMenuGauche {
float: left;
}

dans ton css, c'est donc normal... Smiley cligne

ou alors utilises ton

.float454 
{
float:left;
}

et remplace dans ton html
<div id="conteneurMenuGauche">

par
<div class="float454">
Ha oui, merci.

En faite, je testais avec la barre Webdeveloper de Firefox, ça donnait le même résultat.

ça à l'air de marcher,

Mais c'est dù à quoi exactement?
Je ne sais pas lol, je ne me suis pas assez penchée sur ta structure pour la comprendre complètement.

Je me suis simplement dit que puisque le float left était fautif, mais qu'il en fallait un quand même, il fallait le mettre dans un conteneur Smiley ravi
Sujet clos
Aller à