28172 sujets

CSS et mise en forme, CSS3

Flottant fixés n'apparaissent pas sour IE7

Bonjour à tous,
en voici une que j'ai encore jamais vu !

Un casse-tête pour les fana du CSS ? LOL

Trois div flottantes dans un body centré, jusque là tout va bien.
Mes deux blocs extérieurs sont fixed (et je précise d'avance que je ne veux pas autre chose lol).
Résultat impeccable sous firefox 2 et 3, sous safari, sous Opera.

IE7 n'affiche que le bloc central !

Et si je retire le "composant" fantôme (un hr cfr plus bas) qui intègre le tout dans la div (sans lequel ça ne fonctionne pas sous safari !), IE7 m'affiche le bloc de gauche à droite et pas le bloc de droite (mais toujours le bloc du milieu !)

J'ai joué à rajouter des éléments pour donner des hasLayout rien n'y fait !
(Je précise que j'ai un css spécial pour IE6 et inférieur donc vous tracassez pas avec ceux là).

Si qq'un pouvait me mettre sur la piste car là je sèche !!!

Stéphane

code :


#global 
	{
	
  width:800px;
  margin:0 auto;
  position: relative;
  height: 100%;
	}

#menu {
  /*bloc gauche*/
  position:fixed;
  float: left;
  width:200px;
	font:normal 11px/15px arial;
	color:#999;
	background:#fff url(../images/template_1/lines2.gif) repeat-y top center;
	color:#666;
	}
#inside_part
	{
	text-align:left;
	background:transparent url(../images/template_1/inside_part_up.png) no-repeat top left;
  
	width:498px;
	font:normal 13px/18px arial;
	color:#333;
  margin-left: 205px;

      float: left;
   
	}
#tools {
	position:fixed;
  display: inline-block;    
  float: left;
  margin-left: 707px;
	top: 13px;
	width:200px;
	font:normal 11px/15px arial;
	color:#999;
	background:#fff url(../images/template_1/lines2.gif) repeat-y top center;
	color:#666;
}  
.spacer
{
  height: 1%;
  overflow: auto;
  visibility: hidden;
  clear: both;
}


<body>
<div id="global">
    
    <div id="menu">
    </div> 
     
    <div id="inside_part">
    </div>
       
    <div id="tools">
    </div>  
    <hr class="spacer"/>
</div>

</body>
Salut,

Position: fixed et float, je ne sais pas si c'est franchement compatible Smiley cligne , il me semble que ce serait réservé au positionnement absolute non?

voir là
Modifié par ghost (19 Aug 2008 - 20:25)
Salut ghost,

rien n'indique que c'est pas compatbile !
Ni interdit !

Mais ici je le répète, seul IE7 réagit mal...
Si ce n'était pas compatible, pourquoi 4 browser (sur Pc et sur Mac) le font correctement ? Sacré coïncidence ;p

Si je veux afficher tout ça correctement, vu les différences de comportement de ces 4 browser, je vais m'amuser pour mettre les divs en ligne comme ça !!

Personne n'a jamais essayé ça ?
Stéphane
Bonjour,

a écrit :
rien n'indique que c'est pas compatible !


La preuve que si Smiley cligne

Comme ghost, te l'as conseillé réviser les différents positionnement serait peut-être pas mal.

Donc reprendre le code virer tous les flottants, le hr (pas de flottant donc pas besoin de hr) et positionner correctement les blocs en fixed.

Sinon, le seul positionnement possible avec les flottants c'est le relatif (merci Laurent-Denis Smiley cligne )
Modifié par knarf (20 Aug 2008 - 11:50)
Euh excuses-moi mais ta preuve elle est où ? Depuis quand IE sert de preuve LOL


a écrit :
Sinon, le seul positionnement possible avec les flottants c'est le relatif (merci Laurent-Denis cligne )


tu peux citer tes sources ???


Une fois positionnés les éléments sont fixes.
Pourquoi ça ne marcherait pas ?
D'ailleurs ça marche dans TOUS les browsers que j'ai sous la main sauf IE7

Pourquoi du flottant ?

Le positionnement en flottant est très pratique pour mettre des blocs côte à côte ce que j'ai utilisé ici (comme précisé dans ce site et dans le bouquin CSS2 pratique du web) parce qu'il retire les éléments du flux courant (mais restent dépendants) et les positionne !
Dans le même livre il est écrit p119 que le positionnement en relatif l'auteur l'utilise rarement (il n'en trouve l'utilité que dans deux cas qu'il cite).
p120 il cite qu'en positionnement absolu c'est déconseillé parce qu'un site doit rester compréhensible même si le css est désactivé.

Sinon ceci ne fait pas avancer le shmilblick , arrêtez de me demander de changer, au vu des lignes sus citées ma solution n'est pas mauvaise ...
Si il n'y a aucune solution à mon problème, j'atomise IE sinon oui je me doute que je devrais changer mes positionnement en perdant certains avantages de cette solution ce que je ne désire pas.


Mais merci quand même ! Smiley biggrin
Tef a écrit :
Euh excuses-moi mais ta preuve elle est où ?

Dans la spécification CSS 2.1:
a écrit :
float
This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

Par ailleurs, le positionnement fixe est défini comme un cas particulier de positionnement absolu, donc on peut supposer que cette restriction s'applique également aux éléments en position: fixed.

Et, pour information, le positionnement absolu ou fixe annule le positionnement flottant dans Firefox ou Opera (pas testé ailleurs), comme on peut s'en convaincre avec l'exemple suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css">
		div {
			width: 500px;
			margin: 50px auto;
			padding: 5px;
			background: #faa;
		}
		p {
			position: absolute;
			float: right;
			margin: 0 0 0 150px;
			padding: 20px;
			border: 5px solid #afa;
		}
		span {
			position: fixed;
			float: right;
			margin: 0;
			padding: 20px;
			border: 5px solid #aaf;
		}
		strong {
			position: relative;
			left: 200px;
			float: right;
			margin: 0;
			padding: 20px;
			border: 5px solid #88f;
		}
		i {
			display: block;
			padding: 200px 20px;
			font-size: 3em;
			color: #fcc;
		}
	</style>
</head>

<body>

<div>
	<p>Test 1</p>
	<span>Test 2</span>
	<strong>Test 3</strong>
	<i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</i>
</div>

</body>
</html>

Le float: right est tout simplement ignoré pour deux des boites (positionnées en absolu et en fixe), tandis que seule la boite positionné en relatif conserve le positionnement flottant.

Donc oui, si tu as des blocs positionnés en absolu ou relatif tu peux virer le positionnement flottant pour ces blocs, qui ne sera pas pris en compte et qui risque de t'embrouiller plus qu'autre chose. Smiley cligne
Pourquoi veux tu absolument faire flotter tes éléments alors qu'en utilisant juste le positionnement fixe, cela fonctionne bien?

EDIT :

Les réponses se sont croisées mais c'est quand même mieux quand c'est Florent qui explique Smiley cligne
Modifié par knarf (20 Aug 2008 - 13:47)
le coup du on peut supposer ... hum.

Comme je l'ai dit ça marche sur plein de browser FF 2 et 3 (win et mac) safari(win et mac), Opera (win).
Je cherche JUSTE à le faire fonctionner sous IE7, si vous n'avez pas la solution, on peut troller comme ça pendant des jours ... ce qui n'apporte rien !

Je suis le premier à admettre que c'est un cas limite et que "normalement" ça ne devrait pas fonctionner.
De plus je n'utilise le float que pour mettres les blocs l'un à côté de l'autre.
Ce qui n'est nullement le cas dans ton exemple !
le float s'applique vu que ça se positionne (y compris le bloc du milieu dans IE7) et qd j'applique un fond de couleur sur mon global ça semble ok l'espace est là pour les deux autres blocs.

J'ai déjà expliqué plus bas pourquoi je voulais garder les float et n'utilisait pas le positionnement absolut.

Encore merci à tous
Ce que je trouve étonnant dans cet exemple (pas celui de Florent V. mais le premier) c'est que les 'float:left' ne servent à rien, sauf peut-être à embrouiller Internet Explorer.
Si on supprime les float:left, que l'on rajoute 'top:0' et 'left:0' dans les propriétés de '#menu' et que l'on remplace 'margin-left:707px' par 'left:707px' dans les propriétés de '#tools', le résultat devrait être celui escompté sur Firefox, Opera, Safari ou Internet Explorer 7.
Modifié par Shunkin (20 Aug 2008 - 16:31)
Non,
top et left s'appliqueront à la page hors le bloc global est CENTRE par rapport à la page, donc mes boîtes fixed seront positionnées par rapport à la page et lors d'un redimensionnement de la page ils seront fixes par rapport à celle-ci donc mon bloc central va se ballader seul perdu au milieu !
Ca va être moche ...

Si je retire les trois float, IE ne sait plus où mettre les blocs (logique il aucune info de positionnement), donc j'ai mon bloc central sur lequel vient le bloc de gauche le tout centré et le bloc de droit lui à la bonne place (allez comprendre c'est déjà moins logique!)

Et bien évidemment positionnement absolu n'est pas fixe ça ne me va pas. Donc retour case départ !
Tef a écrit :
Non,
top et left s'appliqueront à la page hors le bloc global est CENTRE par rapport à la page, donc mes boîtes fixed seront positionnées par rapport à la page et lors d'un redimensionnement de la page ils seront fixes par rapport à celle-ci donc mon bloc central va se ballader seul perdu au milieu !
Faux... top et left feront référence au premier ancêtre positionné. Tu devrais tout de même prendre le temps de relire le tuto sur le positionnement CSS. Smiley smile

Même si je te sens un tantinet réfractaire à cette idée ! Smiley lol
Dans ton fameux tutoriel que j'ai lu :

a écrit :
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).


hors dans mon cas, le parent est non positionné (car centré avec la méthode margin 0 auto) donc le bloc fils se réfère à la page ...

....
Tef a écrit :

hors dans mon cas, le parent est non positionné (car centré avec la méthode margin 0 auto) donc le bloc fils se réfère à la page ...
Si tu parles de #global il possède la propriété position: relative; et il est donc positionné... CQFD Smiley murf !

Il serait peut-être temps de faire quelques tests (peut-être en tenant compte de tout ce qui t'a été dit) AVANT de dire que ça ne marche pas ? Smiley biggol
Je viens de trouver tout à fait par hasard une solution qui fonctionne pour IE7.
Il faut faire une css spéciale pour IE7 à appeler avec un commentaire conditionnel et y mettre :

#menu {margin-left:-707px;}
#tools {margin-left:0px;}

Aucune idée du pourquoi du comment. Enfin si, une autre façon pour IE de traiter la combinaison fixed+float pas forcément moins bonne que Firefox ou Opera.
Modifié par Shunkin (20 Aug 2008 - 17:48)
Heyoan a écrit :
Si tu parles de #global il possède la propriété position: relative; et il est donc positionné... CQFD Smiley murf !
Heyoan a écrit :
Faux... top et left feront référence au premier ancêtre positionné. Tu devrais tout de même prendre le temps de relire le tuto sur le positionnement CSS. Smiley smile

Heu... je te retourne la remarque, car:
- pour les éléments en position: fixed, les propriétés top, left, etc. prennent pour référent l'extérieur de la zone de padding du plus proche ancêtre positionné (en absolu, fixe ou relatif, mais pas en "static", qui est la valeur par défaut);
- pour les éléments en position: fixed, ces propriétés prennent pour référent la zone de visualisation du navigateur, dans tous les cas.

C'est une petite subtilité qui peut surprendre (et qui rend l'utilisation du positionnement fixe pas très efficace en pratique...).
Une idée à tester plus avant (marche avec Firefox et Opera, pas testé ailleurs):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test page</title>
	<style type="text/css" media="screen">
	html {height: 100%;}
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#global {
		width: 780px;
		margin: 0 auto;
		position: relative;
		min-height: 100%;
		background: #ddd;
	}
	#menu {
		position: fixed;
		top: 0;
		left: 50%;
		width: 200px;
		margin-left: -390px;
		background: #88f;
	}
	#inside_part {
		margin: 0 205px;
		padding: 1px 0;
		background: #bbb;
		font-size: 2em;
		color: white;
	}
	#tools {
		position: fixed;
		top: 0;
		right: 50%;
		width: 200px;
		margin-right: -390px;
		background: #f88;
	}
	</style>
</head>

<body>

<div id="global">
	<div id="menu">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
		<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
	</div><!-- #menu -->
	<div id="inside_part">
		<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
		<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.</p>
		<p>Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p>
		<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.</p>
	</div><!-- #inside_part -->
	<div id="tools">
		<p>Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue.</p>
		<p>Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p>
	</div><!-- #tools -->
</div><!-- #global -->

</body>
</html>
Florent V. a écrit :

Heu... je te retourne la remarque, car:
- pour les éléments en position: fixed, les propriétés top, left, etc. prennent pour référent l'extérieur de la zone de padding du plus proche ancêtre positionné (en absolu, fixe ou relatif, mais pas en "static", qui est la valeur par défaut);
- pour les éléments en position: fixed, ces propriétés prennent pour référent la zone de visualisation du navigateur, dans tous les cas.

C'est une petite subtilité qui peut surprendre (et qui rend l'utilisation du positionnement fixe pas très efficace en pratique...).
Oups ! La boulette Smiley kc !

Effectivement je m'en sers pourtant sur mon site mais sans spécifier de top ou left Smiley langue .


Edit: après relecture (assidue) je me rends compte que ce point est bien précisé dans le tuto Maîtriser le positionnement CSS dans toutes les situations mais pas dans celui auquel je me réfère habituellement Comment positionner les éléments en CSS. On pourrait peut-être rajouter une petite phrase ?

Edit 2: ton test fonctionne également avec IE7.
Modifié par Heyoan (20 Aug 2008 - 19:25)
J'avais également essayé rapidement en jouant sur le padding du bloc central

#global {
	
           width:800px;
           margin:0 auto;
           position: relative;
           height: 100%;
           background:yellow;
          }

#menu {

           position:fixed;
           width:200px;
           height:100px;
           font:normal 11px/15px arial;
           color:#999;
           background:#f0f0f0;
           color:#666;
                  }
	
#inside_part {  

            text-align:left;
            padding: 0 207px;
            color:#333;
  
                  }
	
#tools {
	position:fixed;
        margin-left: 600px;
	top: 13px;
	width:200px;
	color:#999;
	background:#fff
        color:#666;
           }

Modifié par knarf (20 Aug 2008 - 20:25)
Salut,
Florent V. a écrit :
- pour les éléments en position: fixed, les propriétés top, left, etc. prennent pour référent l'extérieur de la zone de padding du plus proche ancêtre positionné (en absolu, fixe ou relatif, mais pas en "static", qui est la valeur par défaut);
- pour les éléments en position: fixed, ces propriétés prennent pour référent la zone de visualisation du navigateur, dans tous les cas.

Heu ... donc les éléments en position: fixed ont un comportement différent des éléments en position: fixed ? Smiley biggol
Sujet clos
Aller à