Sortir du flux pour positionner mon div en haut

Signaler
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010
-
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010
-
bonjour,


voila j'ai un code qui me permet d'avoir toujours mon footer en bas de ma page quelque soit le contenu.
cela fonctionne tres bien.


voici ma page :
<html>
<head>
<style>
* {
 margin: 0;
}
html, body {
 height: 100%;
}
.contener {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -120px;
 border:1px red solid;
 width:520px
}
.fond {
 
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto 0px;
 border:1px black solid;
 background:#CC66CC;
 width:500px;
}
.footer {
 height: 120px;
 border:1px green solid;
 width:500px
}
.pousse {
 height: 120px;
 border:1px yellow solid;
}
</style>
</head>



 
 

  

   contenu

   contenu

   contenu

   contenu

   contenu

   contenu

   contenu

   contenu

   

  

 

 

  

   Copyright (c) 2008

  

 

<!--

-- >

</html>


mais je voudrais ajouter à ma page un div qui fasse toute la hauteur de ma page qui soit sous tous les div "contener" et "footer" (le tout etant centré) pour faire un fond (j'ai deja un fond sur le "contener")


je ne sais pas trop comment m'y prendre. jai essayé de placer des floats un peu partout et de le positionner a différents endroits dans ma page mais je n'arrive jamais a avoir ce que je veux




merci de votre aide
attentio

11 réponses

Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Bonjour,

tu peux mettre un fond sur la balise body sans passer par un DIV

Nickadele
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Bonjour,

Je en suis pas sure d'avoir bien compris mais ton div en gros correspondrait au body? il contiendrai toute ta page.
Si c'est ça il faut que tu fasses tes changements sur le body dans le css. Si c'est pas ça ben j'ai pas compris...




Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Bon ça me rassure nickadele a compris comme moi.




Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

beh non, parce que mon fond doit etre centré. et si je le mets sur le body avec un center dans le background-position alors il se décale sous firerfox si la fenêtre etre plus petite que la largeur de mon contener

merci de votre aide
attentio
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
Centré par rapport à quoi?




Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

et que je mets :

 background-color:#CCCCCC;
 background-image:url(bg_contenu.jpg);
 background-position:center;
 background-repeat:repeat-y;

sur la balise body

que mon image bg_contenu.jpg fait 500px de large

mon contener est centré dans la page

la background du body va resté centré par rapport par rapport à la taille de la fenetre et ne va pas rester bloqué (sous firefox) alors que si je le mets dans une div qui fait 500 de large alors le background se calera bien par rapport au di v contenu.

merci infiniment de votre aide
Messages postés
943
Date d'inscription
mardi 14 novembre 2006
Statut
Membre
Dernière intervention
7 août 2009
3
et si tu limite le body a 500px?




Si quelqu'un vous dit : "Je me tue à vous le répéter", laissez-le mourir. (Jacques Prévert)
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Pourquoi ne pas mettre ton background sur la première balise :
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

oups mon code l'était pas bon...
j'ai essayer de mettre mon bg comme m'avais dit nickadede


mais ca ne fonction pas, si je mets une largeur ( pour integrer mon bg centré) sur  

alors ca me pete toute ma stucture...

vou pouvez le tester et voir exactement ce que ca donne en copiant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
 margin: 0;
}
html, body {
 height: 100%;
 background-image:url(http://pravdaplanet.net/disco/im/PRAVDA-ALOUEST-500px-RVB.jpg);
 background-position:center;
 background-repeat:repeat-y;
}
.contener {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -120px;
 border:1px red solid;
 width:520px
}


.footer {
 height: 120px;
 border:1px green solid;
 width:500px
}
.pousse {
 height: 120px;
 border:1px yellow solid;
}
</style>
</head>

  contenu

  contenu

  contenu

  contenu

  contenu

  contenu

  contenu

  contenu

  

 



 

  Copyright (c) 2008

 

</html>

merci infiniment de votre aide
Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

Difficile de t'aider avec ce code j'ai 2 affichages totalement différent dans IE7 et FX.
Lequel est le bon ?
T'aurais pas une image de ce que tu souhaites avoir en résultat finale ?

Nickadele
Messages postés
167
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
24 mai 2010

oups ! encore desolé je n'ai pas reverifié en postant.
La bonne version est celle sous IE.
en faite, il faut enlevé  les balises
...
pour que le resultat soit le même

ça complique encore plus la tache

je vais jamais m'en sortir !

merci de votre aide

attentio