28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de positionnement second background

Bonjour à tous,

Je viens demander un petit peu d'aide Smiley ravi
Je vais d'abord m'expliquer un peu :
J'ai créer un "conteneur" contenant un "header", "menu", "contenu", "pied_haut" et "pied_bas".
J'ai positionné ce conteneur en position "absolute" et fait les réglages pour que le conteneur reste centré (d'après un tutoriel) jusque la tout va bien.
Après en "background" je voulais deux images de fond, une situé tout en haut, l'autre tout en bas. Mais le problème c'est que mon image de bas se situe en bas de ma fenêtre d'exploration mais pas en pas de ma page.Alors que je voudrai la voir en bas fixé quelque soit la taille de la page.

schéma explicatif de ce que j'aimerai : http://img4.hostingpics.net/thumbs/mini_683793probleme.jpg

schéma de ce que je vois : http://img4.hostingpics.net/thumbs/mini_425921probleme2.jpg

Je tiens à garder un positionnement absolute de mon conteneur pour la suite du site.

}
   
html {
    width:100%;
	height:100%;
	background-image: url(images/fond.gif);
	background-repeat: repeat-y;
	background-position: center 0px;
}

body {
	width:100%;
	height:100%;
	background-image: url(images/body_haut.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	
}
  
.body1 {
	width: 100%;
	height:100%;
	background-image: url(images/body_bas.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#conteneur {
	width: 942px;
	margin-left: -471px;
	margin-top: 0px;
	padding: 0px;
	visibility: visible;
	z-index: 6;
	position: absolute;
	left: 50%;
}

#header {
	background-image: url(images/header.jpg);
	background-repeat: no-repeat;
	height: 383px;
	width: 942px;
	background-position: center;
}
#menu {

	height: 44px;
	width: 942px;
	background-image: url(menu/menu_1.gif);
	background-repeat: repeat-x;
}

#contenu {
	width: 942px;
}

.contenu {
	background-image: url(images/contenu.gif);
	background-repeat: repeat-y;
}

#pied_haut {
	height: 176px;
	width: 942px;
	background-image: url(images/pied_haut.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

#pied_bas {
	height: 58px;
	width: 942px;
	background-image: url(images/pied_bas.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
}





<body>
  <div class="body1">
  <div class="body2">
    <div id="conteneur">
      <div id="header"></div>
      <div id="menu">
	   <div class="menu">
	   </div><!-- div class menu -->
      </div><!-- div id menu -->
      <div id="contenu">
       <div class="contenu">
         <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
       </div><!-- div class contenu --></div>
      <div id="pied_haut"></div>
      <div id="pied_bas"></div>
     </div><!-- div id contenu --> 
    </div><!-- div id conteneur -->
  </div><!-- div class body2 -->
  </div><!-- div class body1 -->
</body>



J'espère que quelqu'un pourra m'éclairer
et merci si vous avez eu le courage de me lire jusqu'ici Smiley ravi
Modifié par sonatainkemi (22 Mar 2011 - 18:23)
Bonsoir,

je peux me tromper... mais pour centrer ton conteneur, puisqu'il a une taille définie, un simple " margin : 0 auto; " suffirait... l'absolute, le left et le margin-left négatif n'ont, je pense, vraiment aucune utilité si ce n'est rajouter du CSS... ou alors je ne vois pas du tout...

Sinon pour tes images, essayes de placer ton images qui est sur " body2 " sur le body tout court avec un " background-position : left bottom; "
n3k0 a écrit :
Bonsoir,

je peux me tromper... mais pour centrer ton conteneur, puisqu'il a une taille définie, un simple &quot; margin : 0 auto; &quot; suffirait... l'absolute, le left et le margin-left négatif n'ont, je pense, vraiment aucune utilité si ce n'est rajouter du CSS... ou alors je ne vois pas du tout...

Sinon pour tes images, essayes de placer ton images qui est sur &quot; body2 &quot; sur le body tout court avec un &quot; background-position : left bottom; &quot;


bonsoir n3k0,
merci pour ta réponse,
Effectivement je n'ai pas besoin de "l'absolute" pour le centrer, mais c'est parce que plus tard j'aurai besoin de tracer des div pour des éléments PA dans le conteneur, il faut donc que mon conteneur soit en position "absolute" pour éviter tout décalage, mais du coup les backgrounds ne suivent plus Smiley confus

Et malheureusement le "background-position : left bottom;" ne résoud rien Smiley decu
bonjour,

le positionement absolute non maitrisé est le mal Smiley smile , mais parfois bien utile, dans ton croquis je ne vois son utilité que pour les deux pieds.

Il y a plusieurs aspect dans ta page :
- image de fond multiples.(background->sur 1 element ou plusieurs)
- hauteur de 100% mini (cascade : height-> height-> min-height)
- pied en bas escamotable (relative->absolute )
- centrage du contenu (margin: 0 auto ? )



background multiple pourrait etre utilisé (ou sur html +body + body1 par exemple).

margin: auto; et min-height pour le conteneur principal

pieds en absolute dans le conteneur principal en position relative .

regarde d'un coté les technique pour calé un pied en bas de page.
(l'heritage en cascade des style n'est pas automatique pour toute les regle css : height doit etre definie pour passer une valeur a son enfant, voir aussi le rapport/utilité de position:relative du parent et absolute pour l'enfant)

Ce qui te rend la tache difficile c'est que tu veuilles positionné ton pied en bas d'écran si la page n'a pas ou peu de contenu.(c'est ce que je crois comprendre)

Si ce cas de figure est courant sur l'ensemble des pages du site, ça peut-être comprehensible, mais si ton site est bien rempli et que la majorité de tes pages oblige un scroll horizontal, tu n'as aucune raison valable d'imposé ce comportement car jamais ou rarement mis en application.

cordialement
Problème résolu,

Un grand merci à toi gc-nomade
Le rapport/utilité de position:relative du parent et absolute pour l'enfant m'a beaucoup aidé.
Et comme tu me l'a conseillé je suis repassé en position relative pour le conteneur.
Tous ca est un peu compliqué parce que je suis débutant et que j'essaye de comprendre comment tout cela fonctionne.
Mais tes pistes mon beaucoup aidé, encore merci.
Sujet clos
Aller à