28220 sujets

CSS et mise en forme, CSS3

Alignement de bloc [Resolu]

Bonjour,

Je débute avec le CSS et j'ai un petit souci avec l'alignement de bloc.
Voici mon code CSS:


#pied
{
	background-image:url(images/pied.jpg);
	width: 760px;
	height: 149px;
}

#blocGauche
{
	margin-left: 3px;
	width: 230px; /*Largeur du bloc*/
	float: left; /*Evite q'un espace ce crée entre entete et centre*/
}

#accesClient
{
	width: 160px;
	margin-left: 20px;
	float: left;
}

#accesClientTitre
{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	padding-top: 20px;
}


et mon code HTML:


<div id="pied">

	<div id="blocGauche">
	</div>
	
	<div id="accesClient">
		<div id="accesClientTitre">
			ACCES CLIENT
		</div>
		<form name="form1" method="post" action="">
			<input type="text" name="textfield">
		</form>
		
	</div>
	
</div>


Le code tel qu'il se présente ici fonctionne parfaitement sur IE mais sur Netscape, mon bloc #accesClientTitre se trouve complètement à gauche sur le bloc #blocGauche. Pour avoir un affichage normal, je dois mettre du texte dans #blocGauche.


<div id="pied">

	<div id="blocGauche">
                   dfdfdsfsdfsdfds
	</div>
	
	<div id="accesClient">
             ................


Qui peut m'éclairer sur ce problème ?

Merci d'avance.
Modifié par SoGood (03 Sep 2005 - 12:10)
Les pros te l'expliqueront sans doute mieux, il semble que les blocs, pour certains navigateurs ne "prennent corps" qu'en ayant au moins un contenu, ne serait-ce qu'un espace insécable...
Si tu peux régler le problème en insérant un &nbsp; tant mieux... mais pour l'explication... à voir si quelqu'un peut l'avoir. Raphaël ? Olivier ? Stephan ? Laurent ? z'êtes là ?
Modifié par cktoon (03 Sep 2005 - 00:08)
Bonjour,

En l'absence de contenu, ce bloc doit avoir une hauteur explicite (propriété height) pour pouvoir être restitué.

Cela dit, pour devancer un second problème: IE Win génère un bug de marge dans cet exemple, en doublant la marge gauche du bloc en question. Voir http://www.positioniseverything.net/explorer/doubled-margin.html

D'une manière générale: ne pas apprendre CSS en se basant sur les comportements dans IE6 Windows:
- ses implémentations sont défectueuses
- IE7 devrait corriger au moins une partie des erreurs et rejoindre les navigateurs conformes (Firefox, Opera, safari, ...), mais posera très probablement de nouveaux problèmes de compatibilité des codes développés dans IE6
Sujet clos
Aller à