28172 sujets

CSS et mise en forme, CSS3

Pb height 100% plus grand que la page (espace vide en trop en bas)

Bonjour à tous,

Je vous écris car je rencontre un problème de mise en page au niveau de mon pied de page sur mon site.

Je débute avec les CSS et j'essaye de comprendre un maximum par moi-même. J'ai reussi à faire pratiquement tout ce que je souhaitais grâce aux nombreuses ressourses qu'on trouve sur alascreation mais là je bloque depuis quelques jours et je dois demander à l'aide Smiley ohwell

Je n'ai reussi à trouver la réponse sur aucun forum parcouru alors je me lance :


Contexte :
Je souhaite que mon pied de page s'adapte à la hauteur de mon contenu (qu'il remonte s'il y a peu de texte, et qu'il descende s'il y en a peu). Le fond de mon pied de page est une image combinée à une couleur de fond (je n'ai pas trouvé d'autres moyen pour faire le rendu souhaité). Le fond de mon pied de page prend toute la largeur de la page contrairement au contenu qui est centré.

J'ai reussi à le faire s'adapter grâce à la propriété height 100% mais du coup mon fond est plus grand que ma fenêtre et j'ai une barre de scroll qui apparait (alors que je n'ai que du vide)

Mon site n'est malheureusement pas en ligne donc je vous ai fait des screens :

Avec peu de contenu
http://img413.imageshack.us/i/peudecontenu.jpg

Avec plus de contenu
http://img819.imageshack.us/i/bcpdecontenu.jpg

Et si je met le height de mon fond de pied de page à 25% par exemple, ça donne ça
http://img194.imageshack.us/i/height25.jpg



Voilà le code correspondant :
CSS :

body {
    background-image:url(../images/main-bg.jpg);
    background-repeat: repeat-x ;
    height: 100%;
    padding: 0;
}
a {
    color: #422c75;
}
a:hover, a:focus {
    color: #f9c580;
}

#global {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#navigation {
    background-image:url(../images/menu-bg.jpg);
    background-repeat: repeat-x ;
    height:37px;
}
#navigation a {
    color: #FFFFFF;
}
#navigation a:hover, #navigation a:focus {
    color: #000000;
    background-image:url(../images/roll-menu.jpg)
}
#navigation ul {
    margin: 0;
    list-style: none;
    text-align: right;
    padding: 0px 0px;
}
#navigation img {
    float: left;
    margin-top:9px;
}
#nav { 
    margin: 0 ; 
    padding: 0 ; 
    list-style: 0 ; 
    }
#nav li { 
    float: right ; 
    width: 147px ; 
    }
#nav li a { 
    display: block ;  
    padding: 13px 0 ; 
    text-align: center ; 
    text-decoration: none;
    } 

#entete .sous-titre {
    float:right;
    font-size:1.2em;
    color: #f9c580;
}
#entete {
    padding: 13px 0px 5px 0px;
}
#entete h1 {
    margin: 0;
}
#entete h1 img {
    float: left;
    margin: 0px 0px 0px 0;
}

#principal {
    color: #000000;
    background-image: url(../images/gauche-bg.jpg);
    background-repeat: repeat-y ;
    padding: 45px 0px 30px 45px;
}
#principal a {
    color: #422c75;
}
#principal a:hover, #principal a:focus {
    color: #f9c580;
}
#principal h1 {
    color: #422c75;
    font-size: 1.2em;
}

#fondpied {
    background-color:#eef2f5;
    background-image: url(../images/pied-bg.jpg);
    background-repeat: repeat-x ;
    height: 100%; (que j'ai passé à 25% pour l'illustration)
}
#pied {
    height: 100%;
    width: 900px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
#copyright {
    background-image: url(../images/gauche-bg.jpg);
    background-repeat: repeat-y ;
    color: #422c75;
    font-size: .85em;
    text-align: left;
    float: left;
    height: 100%;
    padding: 0px 0px 30px 45px;   
}
#footer {
    color: #422c75;
    font-size: .85em;
    text-align: right;
    float: right;
}


HTML

<body>

<div id="global">

    <div id="entete"> <a href="accueil.html"><img alt="" src="images/logo.jpg" /></a>
        <p class="sous-titre">
            <strong>Votre partenaire privilégié dans l'amélioration des performances</strong>
        </p>
    </div>
    
    <div id="navigation">
    <img alt="" src="images/coin-menu.jpg" />
        <ul id="nav">
            <li><a href="qui-sommes-nous.html">QUI SOMMES NOUS ?</a></li>
            <li><a href="expertises.html">NOS EXPERTISES</a></li>
            <li><a href="valeurs.html">NOS VALEURS</a></li>
            <li><a href="references.html">NOS RÉFÉRENCES</a></li>
        </ul>
    </div>
    
  <div id="principal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        
</div>

<div id="fondpied">  
<div id="pied">
              <div id="copyright">
<p>© Copyright
    </p></div><!-- #copyright -->
    <div id="footer">
<p><a href="accueil.html">Accueil</a> | <a href="contact.html">Nous contacter</a> | <a href="mentions.html">Mentions légales</a> | <a href="plan">Plan du site</a></p>
  </div>
</div>
    </div>
</body>
</html>


Voilà j'espère que mes explications sont claires et que mon code ne vous pique pas trop les yeux !
Merci d'avance pour votre aide et patience Smiley biggrin
Modifié par Likou (14 Feb 2011 - 17:41)
Sujet clos
Aller à