Controles de positionnement, lequel choisir ?

Parmi tous ces contrôles : ( bottom, clear, display, float, position, vertical-align) lequel peut-il me permettre de mettre tout simplement mon footer en dessous de mon contenu ?

En sachant que mon contenu est un bloc conteneur de 6 autres éléments, et qu'apparement, cela perturbe le tout.

Puisque en fait, les deux blocs sont "frères", et qu'ils devraient s'afficher l'un en dessous de l'autre, puisque le footer arrive après le contenu dans le flux.

Je parviens tout de même à le positionnerr en plaçant un contrôle "top" en position "absolute", mais cela les empêche de "flotter" ensemble lorsque le conteneur change de hauteur d'une page à l'autre.

Ah oui, j'ai essayé tous les contrôles avant de mettre ce post, sans succés... Help !

/* CSS Document */
body {
margin : 0; 
padding : 0; 
background-attachment: fixed; 
} 
.conteneur {
position : relative; 
width : 700px; 
height : 60px; 
left : 50%; 
top : 0px; 
margin-left : -345px; 
background-color : transparent; 
} 
.boitehaut {
poosition:absolute;
height : 140px; 
width : 685px; 
margin:0;
padding:0; 
border : 0 none inherit; 
background-image : url(images-css/barre.gif); 
background-color : transparent; 
} 
ul {
list-style-type : none; 
float : right; 
width : 100%; 
margin:0;
padding:0;
} 
.menu li {
float : right; 
margin-top : 121px;
margin-right:13px;
} 
.menu a {
width : 70px; 
height : 1px; 
margin:0; 
padding:0; 
display : block; 
text-align : center; 
border : 0 none inherit; 
text-decoration : none; 
background : transparent; 
} 
.menu a:link {
background : transparent; 
border : 0 none inherit; 
font-size : 10px; 
text-decoration : none; 
color : #FBDFE9;
}
.menu a:visited {
background : transparent; 
border : 0 none inherit; 
font-size : 10px; 
text-decoration : none; 
color : #DBCCD2;
}
.menu a:hover {
background : transparent; 
border : 0 none inherit; 
font-size : 10px; 
font-weight:bold;
color : red; 
text-decoration : none;  
} 
.menu a:active {
background : transparent; 
border : 0 none inherit; 
font-size : 10px; 
background-color : transparent; 
text-decoration : none;
color : red; 
} 
.bandeau {
position : absolute; 
width : 670px; 
height : 29px; 
margin-left:14px;
background-image : url(images-css/bandeau2.gif); 
} 
div#cadre {
position:absolute;
width : 452px; 
padding-top : 60px; 
background : url(images-css/haut.gif) no-repeat 0% 0%; 
margin: 45px 0px 0px 150px;  
} 
div#bloccadre {
background : url(images-css/bas2.gif) no-repeat 0% 100%; 
margin:0;
padding: 0px 0px 15px 0px; 
} 
div#bloccadre p {
margin : 0 80px 10px 30px;
border : 0 none inherit; 
} 
.titre {
float:left; 
height : 10px; 
width :290px; 
border : 0 none inherit; 
background : transparent;
margin:-42px 0px 0px 0px; 
padding:0px 0px 0px 40px;
font-size:18px;
color:#F1D5E3;
}
.boiteblanche1 {
position :absolute; 
top : 190px; 
left : 12px; 
height : 195px; 
width : 125px; 
border : 0 none inherit; 
background-image : url(images-css/boite-blanche2.gif);
margin:0; 
padding:0;
} 
.boiteblanche2 {
position : absolute; 
top : 410px; 
left : 12px; 
height : 283px; 
width : 125px; 
border : 0 none inherit; 
background-image : url(images-css/boite-blanche3.gif);
margin:0; 
padding:0; 
} 
.boiteblanche3 {
position : absolute; 
top : 190px; 
left : 562px; 
height : 370px; 
width : 125px; 
border : 0 none inherit; 
background-image : url(images-css/boite-blanche4.gif); 
margin:0; 
padding:0; 
} 
.boiteblanche4 {
position : absolute; 
top : 590px; 
left : 562px; 
height : 78px; 
width : 125px; 
border : 0 none inherit; 
background-image : url(images-css/boite-blanche1.gif); 
margin:0; 
padding:0; 
} 
.signature {
position:absolute;
width : 669px; 
height : 42px;
top:790px;
left:50%;
background-image : url(images-css/bandeau.gif); 
margin:0px 0px 0px -345px; 
padding:0px 0px 0px 0px;
border : 0 none inherit;
} 

Oula... ya moyen d'avoir la page en question en ligne ^^" ?
Si ton pied de page est en dehors de tout avec un clear: both; ça marche pas ?

Le clear: both; s'utilisera avec les flottant au dessus, si tu utilises le positionement absolu, tu n'arrivera à rien entre éléments frères, le positionement absolu fait sortir du flux.

Parcours un peu le forum, ça a été maintes fois discuté.

La page est visible ici : http://djano.free.fr/sitetourneegenerale/accueil.htm

Le bloc conteneur n'est pas en absolute, mais en "relative"...
Et j'ai essayé en mettant le bloc signature en relative aussi.

Euh comme je ne vois pas le pb sur ta page je suppose que je n'ai pas compris ta question. Que veux tu faire au juste ?

Djano a écrit :
Le bloc conteneur n'est pas en absolute, mais en "relative"...
Et j'ai essayé en mettant le bloc signature en relative aussi.

Pourquoi en relative ?
Quel est l'objectif et l'intérêt ?

La méthode de Littlesam fonctionne, à condition que les blocs soient en flottant.
Sinon, il suffit de laisser toutes les balises simplement dans le flux : ainsi ton footer s'affichera par défaut en dessous du reste.

Sur Mediabox, ils définissent relative comme "en fonction des autres éléments" c'est pour ça que j'ai essayé avec relative... En fait, je ne comprend pas trop la différence théorique avec float.

Je vais essayer avec le conteneur et le footer en float.

Merci de vos réponses.

Djano a écrit :
Sur Mediabox, ils définissent relative comme "en fonction des autres éléments"

Oui, mon tuto doit être un peu vieux sur MB.

Les différents positionnements sont tous très différents les uns des autres.
C'est difficile de tout t'expliquer en 2 mots, surtout que ces méthodes sont très bien détaillées sur Openweb ou Alsacréations.

Les notions de flux sont fondamentales et te permettront de comprendre l'ensemble des différents positionnements.

Pour finir, voici un billet qui se nomme Quel positionnement choisir ?

Bonne chance, tu as toutes les cartes en mains... il suffit de prendre le temps

Merci de tes encouragements, Raphael.

En fait, (tout ça c'est de ta faute) je suis parti en position absolute pour mon conteneur en suivant ton tuto pour centrer les boites en fonction de la taille de la fenêtre :ici

Et en le remettant en float, cette fonction (géniale) disparait... Me voilà donc dans de beaux draps, j'ai retenté de tout remettre en flottant, mais rien n'y fait. Et le site devait être opérationnel pour le début d'année;

Je vais donc laisser le footer en absolute pour le moment, et je recommencerai tout depuis le début en 2005, après avoir déssaoulé !

Bonne année à tous et MERCI pour ce site et ce forum idéaux.

Bonjour
( après avoir lu un billet sur les postionement et des tutos )
J'ai une question et pensant qu'elle tient au sujet ...
Je vous voudrais savoir comment se positionne un float par rapport aux autres éléments, parents, frère, etc ...

On dit que les flottants sortent du flux mais, ils suivent un "nouveau" flux de flottants ?
Un flottant s'il se positionne par rapport à un frère, lequel ??? celui au dessus dans mon code ?

Merci

xeter a écrit :

On dit que les flottants sortent du flux mais, ils suivent un "nouveau" flux de flottants ?

Openweb a écrit :
Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.

Il n'est pas totalement faux de dire qu'un flottant entre dans un "nouveau flux de flottant". En effet:
- il est d'abord placé dans le flux normal, c'est à dire obligatoirement après l'élément de même niveau (flottant ou non flottant) qui le précède. Précédé par un élément en flux normal, un flottant sera donc placé "en-dessous". Précédé par un élément lui-même flottant, il sera placé "en-dessous" ou "à côté" selon les règles ci-dessous.
- Puis notre élément flottant est comme "déplacé" le plus à droite ou le plus gauche possible dans son conteneur (voilà où commencerait ce "flux des flottants").
- Et enfin, il interagit avec l'élément de même niveau qui le suit d'une manière différente d'un élément en flux normal : il tolère sa présence "à côté de lui" dans la mesure où les contraintes de largeur le permettent. Il rejette "en-dessous" de lui un élément doté de la propriété "clear"... (Ce qui constitue la seconde partie de ce "flux des flottants")
- Ajoutons-y un comportement spécifique (et problématique) dans la détermination de ses dimensions et dans sa contribution au calcul des dimensions de son conteneur.

Un élément flottant a donc un comportement toujours lié au flux (puisqu'il interagit avec les éléments de même niveau qui le précèdent et qui le suivent). C'est en cela qu'il diffère fondamentalement d'un élément en position absolue, lequel est totalement retiré du flux et n'interagit plus avec aucun autre élément que son propre conteneur positionné.
Mais ce comportement des flottants n'est pas celui du flux normal. On peut donc, en effet, parler d'une sorte de flux particulier... Bien vu, Xeter
Modifié le 01 Jan 2005 - 10:09