Positionnement Problème

J'ai ce problème qui ne me permet pas de positionner absolument un pied de page. Je la place et il apparaît avec comme marge 5px dans IE beaucoup de marge dans Firefox et Chrome parfaitement ... Je ne sais vraiment pas pourquoi cela arrive ... voici le HTML:Positionnement Problème

<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p> 
      </div><!-- /info --> 
      </div><!-- /info-design --> 
     </div><!-- /content --> 
     <div id="info-footer"></div><!-- /info-footer --> 
     <div id="footer"> 

     </div><!-- /footer --> 
    </div><!-- /wrapper -->

Et la CSS:

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;} 

#content{margin:0 auto;width:1000px;} 

#info-design{ 
    -moz-border-radius: 0 0 5px 5px; 
    -webkit-border-radius: 0 0 5px 5px; 
    -opera-border-radius: 0 0 5px 5px; 
    -khtml-border-radius: 0 0 5px 5px; 
    filter:alpha(opacity=80); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    opacity: .8; 
    -moz-opacity: .8; 
    -khtml-opacity: .8; 
    background:#FFF; 
    border:1px double #000; 
    margin:0 0 10px 0; 
    position:absolute; 
    padding:10px 3px 3px 10px; 
    width:985px; 
    z-index:100; 
} 

#info{z-index:101;} 

#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;} 

#footer{ 
    background:url('../img/cesped.jpg') repeat-x center bottom; 
    height:176px; 
    position:absolute; 
    width:100%; 
    z-index:98; 
    bottom:0px; 
}

Je veux que l'image "cesped.jpg" apparaisse juste en bas: 0px; mais ça ne va pas rester là =/ai-je manqué quelque chose ou ajouté quelque chose que je ne devrais pas avoir?

Modifier

Je veux essentiellement de faire le pied de page soit au bas du « contenu » div mais il ne peut pas être placé dans ce div parce qu'il est une largeur fixe et je veux que ce image pour aller répéter-x à l'ensemble du navigateur (d'où il est placé après le contenu et avant wrapper qui a une largeur = "100%", j'ai essayé de faire la position de l'emballage absolu et relatif mais il ne se placera pas ... et je l'ai essayé d'être poussé "naturellement" mais ça ne va pas ...

Voici comment c'est look Hould comme (et ressemble en Chrome): alt text

puis voici IE et Firefox:

alt text

Edit 2

Je trouve la question, pour une raison quelconque, mon #wrapper ne s'étend pas pour couvrir toute la hauteur du navigateur, mais seulement une fraction de celui-ci, quelqu'un serait-il savoir ce que je suis disparu? J'ai ajouté:

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;} 

#content{margin:0 auto;width:1000px;}

Source

2009-07-06 Tsundoku

Vous voulez placer le pied de page par rapport à ... quoi? Je suppose que "au fond absolu de <div id="wrapper">"? Ensuite, vous devez faire votre emballage soit position: relative; ou position: absolute;. Éléments absolument positionnés orient themselves on the closest parent qui a une position relative, fixed ou absolute. De votre CSS qui semblerait être le rien mais le <html> ou <body>.

En outre, vos éléments info-footer et footer sont positionnés tout en bas les uns sur les autres. Est-ce l'effet désiré?

Peut-être pourriez-vous poster une maquette de ce à quoi vous voulez ressembler, et à quoi il ressemble maintenant?

Est-il vraiment nécessaire de faire comme cela, au lieu de simplement faire en sorte que le contenu pousse le pied de page «naturellement»?

EDIT: Je ne sais pas si je comprends bien, mais qu'en est-repeating simplement l'image de fond le long du fond de <body>?

body { background: url(image.jpg) repeat-x center bottom; }

Source

2009-07-06 04:24:02 deceze

En réponse à modifier 2: position:absolute prend des éléments hors du flux de documents, ainsi leurs hauteurs ne seront pas appliquées sur leurs parents (ou, le parent ne se développera pas pour les accueillir). C'est pourquoi l'ajout d'une hauteur fonctionnera; mais, si vos Éléments absolument placés finissent par être plus hauts que la hauteur que vous avez fixée, la même chose arrivera.

Dans ce qui précède, il semble que div#info-design n'a pas besoin d'être positionné absolument du tout (d'après ce que je peux dire). Vous pouvez supprimer cette déclaration, lui donner un margin-bottom égal à la hauteur de div#footer et obtenir le même effet sans compter sur le réglage d'une hauteur arbitraire sur div#wrapper.

Source

2009-07-07 14:19:44 ajm

Est-ce que l'ajout de margin-bottom: 50px à votre #wrapper fonctionne?

Source

2009-07-07 14:28:04 sakabako

Répondre

Questions connexes