Bonjour,
Tout d'abord je poste le contenu de mon fichier index.php ainsi que mon css pour vous expliquer mon problème
Voici ce que cela donne sur Firefox, Chrome ou IE (le résultat est identique) :
http://hpics.li/21b6500
J'ai mis un lien vers un hébergeur d'image car la fonction "Joindre une image" me retourne une erreur à chaque fois que j'essaye
.
Pour en revenir à mon problème : étant donné que mon contenu est en min-height:100% et qu'il prend donc toute la hauteur de la page j'ai suivi cette astuce pour placer mon footer en bas de page : http://www.alsacreations.com/astuce/lire/22-comment-positionner-un-texte-ou-un-bloc-au-bas-dun-conteneur.html
Hors j'ai toujours une barre de scroll vertical et je ne comprends pas pourquoi . Pourtant j'ai regardé avec l'outil de développement de Chrome et il n'y a pas de margin ou autre qui vient "pousser" mon footer.
Je ne sais vraiment pas ce qui cause ce problème, si quelqu'un a une idée je suis preneur.
Bonne reprise de semaine,
JW
Modifié par John Wayne (16 Dec 2012 - 19:34)
Tout d'abord je poste le contenu de mon fichier index.php ainsi que mon css pour vous expliquer mon problème
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/global.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/functions.js" type="text/javascript"></script>
</head>
<body>
<div id="conteneur">
<div id="logo">
<img alt="logo" src="images/logo2.png">
</div>
<!-- HEADER -->
<div id="header">
<?php include('/includes/header.inc.php'); ?>
</div>
<div id="sousMenu">
<?php include('/includes/sousMenu.inc.php'); ?>
</div>
<!-- END HEADER -->
<!-- CONTENU -->
<div id="contenu">
<h1>ICI LE TITRE DE L'ARTICLE</h1>
<p>
The tag is used to group inline-elements in a document.The tag
provides no visual change by itself.<br> When the text is hooked
in a element you can add styles to the content, or manipulate the
content with for example JavaScript. <br>The tag is used to group
inline-elements in a document.The tag provides no visual change by
itself.<br> When the text is hooked in a element you can add
styles to the content, or manipulate the content with for example
JavaScript. <br>The tag is used to group inline-elements in a
document.The tag provides no visual change by itself.<br> the
text is hooked in a element you can add styles to the content, or
manipulate the content with for example JavaScript. e text is
hooked in a element you can add styles to the content, or
manipulate the content with for example JavaScript.
</p>
</div>
<div id="footer">
<?php include('/includes/footer.inc.php'); ?>
</div>
</div>
</body>
</html>
html {
margin: 0;
padding: 0;
background: url("../images/BG.JPG") no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover;
-webkit-background-size: cover; /* version standardis�e */
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
height: 100%;
}
#conteneur
{
min-height:100%;
position: relative;
}
/***************************************************************/
/******************************************** Logo
/***************************************************************/
#logo{
position: absolute;
top: -38px;
left: 14%;
}
/***************************************************************/
/******************************************** Header
/***************************************************************/
#header {
background-color: #52321a;
margin-left: 17%;
width: 70%;
margin-top: 3%;
/* Arrondi */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
#header nav ul {
list-style-type: none;
text-align: right;
padding-bottom: 10px;
padding-top: 10px;
}
#header nav li {
display: inline-block;
padding-right: 20px;
}
#header nav a {
text-decoration: none;
color: #FFFFFF;
font: 15px/15px 'sansationbold', verdana, arial, helvetica, sans-serif,
sans;
}
/***************************************************************/
/******************************************** Contenu
/***************************************************************/
#contenu {
background-color: #FFFFFF;
opacity: 0.9;
margin-top: 12%;
width: 72%;
margin-left: 15%;
}
#contenu h1 {
text-align: center;
color: #916837;
font: 40px/40px 'sansationbold', verdana, arial, helvetica, sans-serif,
sans;
size: 1.3em;
}
/***************************************************************/
/******************************************** Footer
/***************************************************************/
#footer {
width: 100%;
position: absolute;
bottom: 0;
background-color: #52321a;
border-top: #7b4821 solid 6px;
}
#footer p {
color: #FFFFFF;
size: 14px;
text-align: center;
padding-bottom: 10px;
font: 12px/12px 'sansationbold', verdana, arial, helvetica, sans-serif,
sans;
}Voici ce que cela donne sur Firefox, Chrome ou IE (le résultat est identique) :
http://hpics.li/21b6500
J'ai mis un lien vers un hébergeur d'image car la fonction "Joindre une image" me retourne une erreur à chaque fois que j'essaye
.Pour en revenir à mon problème : étant donné que mon contenu est en min-height:100% et qu'il prend donc toute la hauteur de la page j'ai suivi cette astuce pour placer mon footer en bas de page : http://www.alsacreations.com/astuce/lire/22-comment-positionner-un-texte-ou-un-bloc-au-bas-dun-conteneur.html
Hors j'ai toujours une barre de scroll vertical et je ne comprends pas pourquoi
. Pourtant j'ai regardé avec l'outil de développement de Chrome et il n'y a pas de margin ou autre qui vient "pousser" mon footer. Je ne sais vraiment pas ce qui cause ce problème, si quelqu'un a une idée je suis preneur.
Bonne reprise de semaine,
JW
Modifié par John Wayne (16 Dec 2012 - 19:34)
