[Résolu] Positionnement fixé et largeur des boites

Si j'ai bien compris ce que tu veux, rajoute :

#bandeau1 { overflow: hidden; }

Ca va faire que ton bandeau va s'adapter en hauteur.
Cela permet (lorsque tu n'a pas de hauteur fixe) que ton block s'adapte aux élements floattants qu'il contient.

Merci MoOx...

mais la question que je me pose ne concerne pas les hauteurs, mais les largeurs. Et ce qui me chagrine c'est ce qui se passe sur le bandeau 2, pas sur le 1 :

- Pourquoi dans le 2° bandeau (celui du bas qui a comme seule différence d'être "fixé") la largeur restante n'est pas remplie par le texte et son fond, à droite de l'icône, comme elle l'est en haut pour le bandeau 1 ?

- Comment faire que le bandeau fixé (le 2° en bas) donne le même affichage que le 1° en haut ?

Rappel, c'est visible à :

http://bertier.nuxit.net/EssaisCSS/Pages/positionFixeEtLarg.html

Merci à ceux qui regarderont et qui auraient une idée du "pourquoi" et du "comment" ci-dessus.

Je reviens sur ma question car je vois que les lecteurs (assez nombreux) ne réagissent pas beaucoup. Peut-être me suis-je mal (ou trop ?) expliqué. Alors je résume :

Pourquoi le positionnement fixe (par rapport à la fenêtre, mais pas par rapport au document) change-t-il la détermination par défaut des largeurs d'affichage de manière à peu près identique dans tous les navigateurs essayés ?

Merci à ceux pour qui ma question présenterait un intérêt et qui se sentiraient disposé à me donner des éléments.

Il faut que tu spécifies la largeur de ton bandeau2 :

#bandeau2 {
	background-color: #CCFFCC;
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;
}

Modifié par mistike (05 Dec 2009 - 14:39)

Merci à Mistike,

la solution est si simple et évidente que j'aurais dû la trouver tout seul ! Reste juste la question plus très importante : pourquoi est-ce différent suivant le positionnement fixé ou non ?

En tout cas, c'est résolu. Merci encore. Est-ce à moi, comme initiateur du sujet, de fixer le statut à "résolu" ?
Modifié par MarcBertier (05 Dec 2009 - 22:52)

bonsoir,

Le positionnement en "fixed" , positionne effectivement selon les coordonnées (top, left,bottom,right) de la fenêtre (c'est son usage) , que le conteneur parent soit declaré en positionnement fixe , absolu ou relatif . L'element est extrait du flux et ne se dimensionne qu'en fonction de son contenu par defaut.
c'est un peu comme un "post-it" sur l'ecran .
Il devient la reference(coordonnées d'affichage) pour ces enfants (sauf ceux en en position :fixed;).
Le z-index est applicable et il devient le point 0 pour les enfants de ce conteneur .
Les coordonnées de positionnement permettent de le dimensionné en hauteur et ou largeur (vrai en mode standard pour IE7/8)..min-width / min-height ou max-width/max-height peuvent maintenir ce conteneur dans des proportions minimales et maximales .
Ne fonctionne pas dans IE6 .

Pour les differences d'affichage d'un navigateur a l'autre :
il s'agit probablement des marges internes et externes (de html et body par exemple) , différentes , et prise ou non en compte .
Il peut aussi y avoir des différences du au fusion de marges , mais la j'y crois moins , opera peut-être ? .
Un type de rendu standard (doctype valide au tout debut du document) a aussi une importance capital dans IE par exemple .

.


le positionnement absolu , extrait du flux et repositionne tout comme le positionement fixed , prend par defaut la fenetre comme références (en fait html) si aucune largeur ou hauteur ne sont definies explicitement , il reste agraphé au document et se deplace avec celui-ci .
Les coordonnées de positionnement permettent de le dimensionné en hauteur et ou largeur (vrai en mode standard pour IE7/8) .min-width / min-height ou max-width/max-height peuvent maintenir ce conteneur dans des proportions minimales et maximales .
si l'un des parents est positionné en relatif ou fixe , ce parent devient sa reference pour ses coordonnées d'affichages.
Il devient la reference( coordonnées d'affichage) pour ces enfants (sauf ceux en en position :fixed;).
une hauteur ou largeur exprimé pour le parent ne se transmet qu'aux enfants directs , ces valeurs peuvent être modifiée de façon semi-dynamique par min/max-width ou min/max-height , mais ne doivent etre considéré comme des valeurs heritables/utilisables que pour les enfants direct . (il est preferable de redefinir hauteurs(en % par exemple) et redéfinir les valeurs max-min a chaque niveau inferieur.
Le z-index est applicable et il devient le point 0 pour les enfants de ce conteneur .

Le positionnement relatif , conserve l'élément dans le flux , l'espace qu'il occupe est réservé mais peut-etre déplacé visuellement (top, left,bottom,right) .
Les coordonnées de positionnement ne permettent que de déplacé visuellement l'élément.
Il devient le référent de positionnement pour les éléments enfants qui seront placé en absolu et n'a aucun effet sur les éléments enfants en positionnement fixe.
Le z-index est applicable et il devient le point 0 pour les enfants de ce conteneur .
Quelques effets secondaires peuvent être gênants d'un navigateur a l'autre , reflow , cloisement , ... , ces effets peuvent aussi être curatif a certains défaut d'affichage : reflow forcé.

Le positionnement static est la valeur par défaut d'un element dans le flux et ne permet pas de modifier le z-index qui reste a zero par defaut .

Le flottement d'un element extrait celui-ci en partie du flux sans modifier sa valeur de positionement .

Les formulaires , flash ou autres contenus non html importés , sont souvent difficile a replacé en arriere plan (z-index) voir impossible dans cerains navigateurs .

Se baser sur des position:absolute/fixed; pour construire une page peut vite s'avérer un mauvais choix pour le débutant . (fixed non reconnue par IE6 , écran et résolutions différentes , etc ... )

GC

(j'espere ne pas avoir étè trop confus )