Pb de mise en page avec les float

Je tente de faire cette page depuis plusieurs jours, en vain... Sous firefox c ok mais sous ie c'est l'horreur. Le menu flash du haut ne se positionne pas comme il faut. Je ne trouve pas la solution. J'ai bidouillé des trucs mais je pense que c pas le top... aidez moi s'il vous plait ;o)
voici les liens
http://www.faustinebrunet.com/ben/index4.htm (la page qui ne marche pas)
http://www.faustinebrunet.com/ben/benaccueil.css

tine,

Ton souci semble très intimement lié au positionnement absolu/relatif, domaine dans lequel IE a de nombreuses tares (comme souvent, avec ce navigateur).

Pour remédier à ceci, dois positionner ton bloc de Flash en flottant, en forçant les autres contenus à s'insérer en-dessous de lui.
Tu as juste besoin de modifier UNE règle CSS, celle sur ton bloc Flash :

#menuhaut {
	width : 246px;
	height : 139px;
/*	margin-left : 560px;*/
	float: right;  /* on fait flotter le bloc sur la droite de son conteneur */
	clear: both; /* les autres contenus seront affichés en dessous à partir de la gauche */
}

J'ai fait l'essai, le bloc se positionne comme il faut sur Safari/Firefox et IE.

Voilà !
Modifié par Ladytron (04 May 2006 - 11:36)

merci beaucoup, mais le pb persiste sous firefox pc. le menu flash est trop bas...

Hello tine, bienvenue sur Alsa

Pas le temps tout de suite, mais je regarde ce que ça donne ce soir.

Alors voilà, je te propose, sans être 100% sûr que ça marche, de faire quelque chose comme ça :

body {
	background : #CEF69C;
	text-align : center;
 }

#cadreaccueil {
	position: relative; /* IMPORTANT pour que le bloc serve de référent aux éléments enfants en position absolue */
 	width : 805px;
	height : 203px;
	margin : 0 auto;
	padding-top: 400px;
	text-align:left;
	background-repeat: no-repeat;
	background-image: url(images/accueil.jpg);
}

#logohaut {
	position: absolute;
	left: 0; top: 0;
	width : 202px;
	padding-top : 15px;
	padding-left : 15px;
}

#menuhaut {
	position: absolute;
	right: 0; top: 0;
	width : 246px;
	height : 139px;
}

#contenublanc  /* à virer du code */
{
	width : 600px;
	height : 280px;
	display: none;
}

Note: tout le bas de la feuille de style n'est pas là, mais c'est moins important. Il faut juste faire attention à ne pas laisser la partie pour #menuhaut, que j'ai remonté.

Le principe s'appuie sur le positionnement absolu de blocs à l'intérieur d'un conteneur en positionnement relatif. Le fait de mettre le conteneur en positionnement relatif, même sans le décaler d'un seul pixel (ce qui est l'utilité première du positionnement relatif normalement), force le navigateur à calculer la position et les dimmensions exacte du bloc, ce qui permet au bloc de jouer le rôle de référent pour le positionnement absolu.

Cf http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html
(À noter que j'ai des petits bugs sur cette page de test avec IE6, donc je suis pas sûr à 100% que ça passe bien si tu utilises cette solution…)

Merci florent ça marche bien sur firefox mac et safari, sous ie mac le menu est un tout petit peu trop bas mais bon, ça ira. Je n'ai pas encore testé sous pc...
Donc si j'ai bien compris il n'est pas possible de réaliser cette page avec exclusivement des éléments flottants. Car en fait, on m'a dit que le positionnement absolu était à éviter car lorsque le site a un contenu qui change regulierement, on doit avoir des blocs qui s'adaptent à la longueur des textes. (Dans notre cas de figure ce n'est pas si grave car tu as laissé la div ou se trouve le texte en float) C'est pour cela que je me prenais la tête à essayer de tout mettre en relatif. Pour ce qui est de l'interieur du site, tout est en relatif pour le coup, et je crois (je touche du bois) que ça marche sur tous les navigateurs !

Si quelqu'un a donc une autre possibilité tout en relatif, qu'il n'hésite pas à le déposer ! Sinon, cela signifie-t-il qu'il est préférable de mettre des éléments tels images fixes ou menus flash en absolu, comme nous l'avons fait ?
merci !

"Sinon, cela signifie-t-il qu'il est préférable de mettre des éléments tels images fixes ou menus flash en absolu, comme nous l'avons fait ?"

Pas nécessairement. Le souci du positionnement absolu est que les navigateurs ne savent pas tous le rendre correctement.
MSIE, par exemple, ne comprend pas la valeur fixed, qui est pourtant bien utile

Il doit y avoir une solution en positionnement relatif (flottant) à ton problème.
Modifié par Ladytron (05 May 2006 - 11:29)

Ladytron a écrit :
Il doit y avoir une solution en positionnement relatif (flottant) à ton problème.

La solution que j'ai donnée était un peu une solution de facilité. D'ailleurs, je viens de la tester, et ça a l'air de marcher avec IE6, mais le bloc aligné à droite est décalé d'un pixel. C'est pas flagrant, mais c'est déjà ça…

Normalement, c'est tout à fait possible avec des flottants. Mais là, le positionnement flottant n'était pas une obligation, donc bon, autant aller au plus simple.

Pour ce qui est d'éviter le positionnement absolu : un bloc en positionnement absolu s'alongera normalement si son contenu (en texte par exemple) augmente, à moins de lui avoir donné une hauteur fixe. Par contre, les autres éléments de la page ne tiennent plus compte du bloc en positionnement absolu, et quand le bloc en absolu s'allonge, il ne repousse pas vers le bas les autres blocs.
Dans le cas d'éléments comme un logo ou un élément flash, le problème ne se pose pas. Mais effectivement, on évitera le positionnement absolu pour des blocs censés accueillir un contenu important.

Au passage, je reviens là-dessus :

Ladytron a écrit :
une solution en positionnement relatif (flottant)

Houlà houlà, il y a des confusions ici !

Le positionnement :
Il peut être statique (static), relatif (relative) ou absolu (absolute). Par défaut, un élément est en positionnement statique. Comme c'est la valeur par défaut, on écrit rarement position: static;, mais on pourrait. Le positionnement relatif fonctionne comme le positionnement statique, c'est à dire que l'élément prend une place dans la page en fonction de son emplacement dans le code… par contre, on peut le décaler à partir de cette position. Le positionnement absolu, enfin, permet de donner la position exacte d'un élément dans son bloc parent de référence. Si aucun des blocs parents de l'élément n'est référent (c'est à dire qu'ils sont tous en positionnement statique, par défaut), c'est l'élément html qui sert de référent.

Le comportement flottant :
Le comportement flottant ou non flottant d'un bloc est indépendant de son positionnement. Ce sont d'ailleurs deux propriétés CSS différentes. Le éléments flottants "flottent" par dessus les autres éléments, qui se disposent alors sous eux comme s'ils n'étaient pas là… à l'exception des éléments en ligne et en particulier du texte, qui est repoussé. Le positionnement flottant permet aussi de dire à un élément de se placer le plus à gauche ou le plus à droite possible à l'intérieur de son élément parent. Les éléments flottants ne peuvent pas se chevaucher entre eux.