28221 sujets

CSS et mise en forme, CSS3

[Résolu]Problème float et min-height sous Internet Explorer

Bonjour,

J'ai fait une mise en page CSS qui fonctionne bien sous Firefox 1.0 , mais sous Explorer, ça ne va pas du tout... les divs ne se placent pas là où il faut...

Peut-être que les min-height ne fonctionnent pas sous explorer???
Le div right se place sous le left au lieu d'être à sa droite...comment résoudre ce problème?

Merci d'avance pour votre aide!

Voici un lien vers la page:
http://www.ameline.levillage.org/test/design.htm

et le code css:
/* basic elements */
*{
margin:0;
padding:0;
}

body {
	font: 10pt/16pt georgia; 
	color: black; 
	background: #6AA2E7 url(images/bg.gif) repeat-x; 
	margin: 0px; 
	}

#container {
	padding: 0px 0px 0px 0px;  
	margin: 5px 50px; 	
	position:absolute;
        left: 50%; 
	width: 700px;
	margin-left: -350px;
}

#top{
background:  url(images/top.gif) no-repeat top left;
height:71px;
}

#left{
float: left;
background: blue url(images/bandeau.gif) repeat-y top left;
min-height:400px;
width:84px;
}
#backleft{
background: url(images/left.gif) no-repeat top left;
width:84px;
height:44px;
}
#right{
background-color:#FFFFFF;
margin-left:84px;
width:616px;
min-height:400px;
}
#backright{
width:122px;
height:44px;
background: #fff url(images/right.gif) no-repeat top left;
}

#bottom{
background-image:url(images/bottom_ameline3.png);
clear: both;  margin: 0; padding: 0; height: 61px;
}


Le code XHTML...
<body onload="window.defaultStatus='Calendriers Ameline';" id="ameline">
<div id="container">
	<div id="top">
	</div>
	<div id="left">
		<div id="backleft">
		</div>
		blibli
	</div>
	<div id="right">
		<div id="backright">
		</div>
	</div>
	<div id="bottom">
		
	</div>
</div>

Modifié le 28 Nov 2004 - 17:05
Salut neodurden et bienvenue sur le Forum Alsacréations !

Comme c'est ton premier post, je t'invite à passer au Bar du forum pour Le post des présentations.

Serait-il possible d'éditer ton sujet et changer le titre pour quelque chose de plus évocateur comme par exemple : problème float et min-height ?

Pour ton problème, #top n'a pas de largeur (je mettrais 700px).

Tu peux essayer d'appliquer un float sur ton #right :

#right { 
   float: right; 
   background-color: #FFFFFF; 
   width: 616px; 
   min-height: 400px; 
}

Si tu te débrouilles en anglais, voici un article qui vise à résoudre le problème : min-height: fixed;
Et un autre pour le problème avec float : How To Clear Floats Without Structural Markup

Et pour contourner le problème avec min-height :
http://www.alistapart.com/articles/fauxcolumns/
http://wellstyled.com/css-2col-fluid-layout.html

J'espère que tu y trouveras ton profit !

Sinon, n'hésites pas à poser d'autres questions ! Smiley lol
Modifié le 27 Nov 2004 - 06:13
Merci pour votre aide !

J'ai réussi à résoudre le problème...
J'ai rajouté un div centre qui contient les divs left et right. J'aurais bien aimé éviter de mettre des divs "inutiles"... mais l'important c'est que ça marche...

Pour le min-height j'ai utilisé l'astuce suivante :
#left{
float: left;
width:84px;
height:400px;
min-height:400px;
}

En mettant min-height après height, le min-height est pris en compte par Firefox mais Internet Explorer l'ignore et prend en compte height:400px
(j'ai trouvé cette astuce dans les commentaires du lien que tu as donné
http://www.alsacreations.com/blog/index.php?2004/08/17/54-min-height-sur-internet-explorer

Pour voir le résultat :
http://www.ameline.levillage.org/test2/design.htm
Modifié le 27 Nov 2004 - 14:20
Administrateur
#left{
float: left;
width:84px;
height:400px;
min-height:400px;
}

Cette méthode ne va pas fonctionner puisque "height" sera aussi pris en compte par Firefox, c'est à dire que tu lui indiqueras :
- mon élément doit faire une hauteur minimale de 400px et doit faire une hauteur de 400px.

En clair, si le contenu dépasse cette hauteur imposée (height), il y'aura conflit.

Il vaut mieux suivre les diverses solutions proposées sur les commentaires du billet.
En effet, ça ne fonctionne pas bien...dès qu'il y a du contenu dans les deux colonnes, ça ne fonctionne plus...

j'ai essayé quelques trucs qui sont sur cette page:

http://wellstyled.com/css-2col-fluid-layout.html

mais il n'y a rien à faire, sous Internet explorer, le div de droite se positionne toujours sous celui de gauche...alors que sous Firefox c'est nickel...

http://www.ameline.levillage.org/test3/design.htm

J'aimerais bien comprendre la subtilité qui m'échappe... Smiley confused

Nouvelle feuille de style :
/* basic elements */
*{
margin:0;
padding:0;
}

body {
	font: 10pt/16pt georgia; 
	color: black; 
	background: #6AA2E7 url(images/bg.gif) repeat-x; 
	margin: 0px; 
	}
#container {
	padding: 0px 0px 0px 0px;  
	margin: 5px 50px; 	
	position:absolute;
        left: 50%; 
	width: 700px;
	margin-left: -350px;
}

#top{
background:  url(images/top.gif) no-repeat top left;
height:71px;
width:700px;
}

#centre {
background-color:#9999CC;
width:700px;
background: blue url(images/line2.gif) repeat-y top left;
}

#left{
float: left;
width:84px;
}
#backleft{
background: url(images/left.gif) no-repeat top left;
width:84px;
height:44px;
}
#right{
margin:0 0 0 84px;
width:616px;
}
#backright{
width:122px;
height:44px;
background: #fff url(images/right.gif) no-repeat top left;
}
#bottom{
background-image:url(images/bottom_ameline3.png);
clear: both;  margin: 0; padding: 0; height: 61px;
}

hr.cleaner {
	clear:both;
	height:1px;
	margin: -1px 0 0 0; padding:0;
	border:none;
	visibility: hidden;
}


Nouveau XHTML:
<body onload="window.defaultStatus='Calendriers Ameline';" id="ameline">
<div id="container">
	<div id="top">
	</div>
	<div id="centre">
		<div id="left">
			<div id="backleft">
			
			</div>
		</div>
		<div id="right">
			<div id="backright">
			</div>
		</div>
		 <hr class="cleaner" />
	</div>
	 
	<div id="bottom">
		
	</div>
</div>

Modifié le 27 Nov 2004 - 15:32
As-tu essayé ma suggestion ?
Stephan a écrit :


Tu peux essayer d'appliquer un float sur ton #right :

#right { 
   float: right; 
}

Pour remplacer min-height sous IE, j'utilise ce hack:


height: auto !important;
height: 300px;
min-height: 300px;
Je commence à penser que Internet Explorer c'est vraiment n'importe quoi Smiley fache Smiley fache Smiley fache Je m'arrache les cheveux !!!!

Il est incapable de comprendre float:left... apparemment il ne sort pas ma div "left" du flux...alors que firefox le fait très bien...

Pour preuve le lien suivant:
http://www.ameline.levillage.org/test4/design.htm
Quelqu'un a une idée du pourquoi du comment?

Aussi pour résoudre le problème du div de droite qui allait sous le div de gauche dans Internet Explorer, j'ai été obligé de réduire sa largeur...

Merci l'aide précieuse que vous m'avez apporté jusque là!
Modifié le 28 Nov 2004 - 04:02
Ok ! Nous allons faire un grand ménage ! Smiley cool

Tout d'abbord, tu as ...

#left { 
   float: left; 
   width: 84px; 
   border: 0; 
}

... et tu mets le mot anticonstitutionnellement, donc on voit qu'il pousse sur le #right.

Si tu ajoutes : 

#left { 
   float: left; 
   width: 84px; 
   border: 0; 
   [#blue]overflow: hidden;[/#] 
}

... ça règle le problème en partie mais ce n'est pas concluant.

Pourquoi vouloir forcer un contenu dans un espace de 84px ? Smiley confuse

Anyway. Smiley lol

On utilise pas des <div> vides simplement pour présenter un background. Smiley nono
C'est une vision "tabulaire" de ce qu'est le design CSS. Inutile de poursuivre dans cette direction.

Alors bye bye <div>'s ! Smiley tusors 


[#red]<div id="backleft">
</div>[/#]

et

[#red]<div id="backleft">
</div>[/#]

[b]bye bye ![/b]

Et tu appliques ton background aux <div> qui ont du contenu, avec un padding-top: 48px; (la hauteur du background).


#left { 
   float: left; 
   background: url(images/left.gif) no-repeat top left; 
   width:  84px; 
   border: 0; 
   padding-top: 48px; 
   overflow: hidden; 
}

#right { 
   background: #00FF33 url(images/right.gif) no-repeat top left; 
   width: 500px; 
   padding-top: 48px; 
   margin: 0 0 0 84px; 
}

Donc retour à la case départ, mais avec des codes en moins ! Smiley nuts

Nouveau Nouveau XHTML:
<body onload="window.defaultStatus='Calendriers Ameline';" id="ameline">
<div id="container">
	<div id="top">
	</div>
	<div id="centre">
		<div id="left">
		</div>
		<div id="right">
		</div>
		<hr class="cleaner" />
	</div>
	<div id="bottom">	
	</div>
</div>

Maintenant, on a un #centre de 700px, un #left de 84px et un #right de 500px, alors il reste une marge de 116px à droite (non-définie).

|--------------------------- 700px ----------------------------|
|---- 84px ----|------------ 500px ------------|---- 116px ----|

Il semble que IE ne gère pas bien cet espace (116px). Smiley idee2
Alors enlève le width: 500px; et remplace par un margin-right: 116px; 


#right { 
   background: #00FF33 url(images/right.gif) no-repeat top left; 
   padding-top: 48px; 
   margin: 0 116px 0 84px; 
}

Voilà ! C'est réparé ! Smiley youpi

Et maintenant, que comptes-tu faire avec les <div> vides suivant ?


<div id="top">
</div>

<div id="bottom">
</div>

Tu pourrais les insérer dans ton #centre et appliquer les règles du #container à ce dernier. Tu sauverais un autre <div> !

Nouveau Nouveau Nouveau XHTML:

<body onload="window.defaultStatus='Calendriers Ameline';" id="ameline">
<div id="centre">
	<div id="top">
	</div>
		<div id="left">
		</div>
		<div id="right">
		</div>
		<hr class="cleaner" />
	<div id="bottom">	
	</div>
</div>

Si ton problème est réglé, un tag [Résolu] serait bienvenu dans ton sujet.

<edit>
Ah ! J'oubliais !
Tu peux enlever le overflow: hidden; ...
... ou le laisser. C'est comme tu veux !
</edit>
Modifié le 28 Nov 2004 - 07:06
Merci beaucoup pour ton aide Stephan!

J'ai fait un petit ménage de Div inutiles grâce à tes conseils Smiley smile

Malheureusement, mon problème n'est pas entièrement réglé... En fait je ne veux pas avoir d'espace à droite de la div "right", mais diminuer la taille du div "right" est le seul moyen que j'ai trouvé pour ne pas que la div "right se place sous la div "left" (sous Internet Explorer seulement car sous Firefox c'est ok)


En diminuant la taille de la div "right", celle-ci se place bien à droite de la div "left, mais c'est la div "left" qui influe sur sa position horizontale. Pourtant la div "left" étant en float, elle ne devrait pas influer sur la position de la div "right"...même si il y a un grand texte dedans. (à moins que je ne comprenne pas comment fonctionne float...)

Et même quand il n'y a rien dans le div left, il y a un écart d'environ 3 pixels entre le div left et right...

En bref 3 problèmes différents s'accumulent sous IE (qui sont sans doute très liés):
- La div right se place sous la div left--> pour résoudre ce pb, je diminue la taille de la div right de 3 pixels au moins.
- lorsque un long texte est dans la div left, cela pousse anormalement la div right vers la droite
- même lorsqu'il n'y a rien dans la div left, il y a un espace inexpliqué entre la div "left" et "right" d'environ 3 pixels (avec toutes les margin,padding et border à 0)Ce cas est ici:
http://www.ameline.levillage.org/test5/design2.htm

Je voudrais faire ça:
|---- 84px ----|------------------ 616px ----------------------|
Mais ça fait ça:
|--84px---|-3px-|---------------613px ------------------------|

Les 3 pixels étant d'origine inconnue.
Modifié le 28 Nov 2004 - 15:23
Pas d'espace ? Tu remplaces 116px par 0 ! 

#right { 
   background: #00FF33 url(images/right.gif) no-repeat top left; 
   padding-top: 48px; 
   margin: 0 0 0 84px; 
}


C'est juste une question de logique !

Avant : 
|--------------------------- 700px ----------------------------------|
|---- 84px ----|------------ 500px ------------|---- non-définie ----|

Après : 
|--------------------------- 700px ----------------------------------|
|---- 84px ----|------------ non-définie ------------|---- 116px ----|

Maintenant : 
|--------------------------- 700px ----------------------------------|
|---- 84px ----|------------ non-définie --------------------------|0|

Je pensais avoir été clair ! Tu as lu le post ou simplement copiés les codes ? Smiley fache
Modifié le 28 Nov 2004 - 16:48
Je t'assure que j'ai lu et relu ton message Smiley smile

Voilà ce que j'avais mis dans le right (toujours à ce lien:http://www.ameline.levillage.org/test5/design2.htm )
#right{
background: #00FF33 url(images/right.gif) no-repeat top left;
background-color:#00FF33;
width:613px;
padding: 48px 0 0 0;
margin: 0 0 0 84px;
border:0;
border-color:#00CCFF;
}

En sachant que si je met 616px comme width, le div right se place sous le div left (Sous IE, pas sous Firefox)
Tu as la solution sous les yeux. J'ai dit PAS de width: 500px; pour ton #right. Ça veux aussi dire PAS de width: whatever; mais margin-right: value; !

Relis et si tu ne comprends pas, relis encore !
Modifié le 28 Nov 2004 - 17:10
Ah ok!!!

Désolé, je suis dur de la feuille Smiley confus Smiley confus Smiley confus Smiley confused
Merci pour ta persévérance!

J'ai quand même du mal à comprendre qu'on ne puisse pas indiquer 616px pour le right, puisque en théorie ça devrait fonctionner -> 84+616=700... D'ailleurs sous firefox ça fonctionne bien...

pour ceux qui auraient des pbs comme moi, voici la solution :
http://www.ameline.levillage.org/test6/design2.htm
Modifié le 28 Nov 2004 - 17:05
Ici, inutile de spécifier deux fois la même chose.

#right{
background: [#red]#00FF33[/#] url(images/right.gif) no-repeat top left;
background-color:[#red]#00FF33;[/#]
}

Et ici, un border: 0; sera toujours invisible peu importe qu'il soit aqua ou autre.

#right{
[#red]border:0;[/#]
[#red]border-color:#00CCFF;[/#]
}
neodurden a écrit :

J'ai quand même du mal à comprendre qu'on ne puisse pas indiquer 616px pour le right, puisque en théorie ça devrait fonctionner -> 84+616=700... D'ailleurs sous firefox ça fonctionne bien...


Mais c'est ça, Internet Exploder ! Smiley lol
Sujet clos
Aller à