28220 sujets

CSS et mise en forme, CSS3

Pied de page en bas quand même si contenu trop court

Bonjour

J'ai un fichier xhtml de ce type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <title>POuet</title>
  <style type="text/css" media="screen">@import url(style.css);</style>
</head>

<body> 
    <ul id="navigation">
	    <li id="lien_accueil"><a href="#" class="active">Accueil</a></li>
	    <li id="lien_moi"><a href="#">Moi</a></li>
	    <li id="lien_carnet"><a href="#">Mon carnet web</a></li>
	    <li id="lien_portfolio"><a href="#">Mon porfolio</a></li>
	</ul>

    <div id="apropos">
        <h1>Pouet Pouet</h1>
	     <p>Site personnel de moi.</p>
    </div>

    <div id="conteneur">
        <div id="moi">
            <h2>Le webmasteur</h2>
	        <p>Ce site est avant tout un site personnel, qui me permet d'exposer mes diverses réalisations.</p>
        </div>

        <div id="carnet">
            <h2>Carnet</h2>
            <p>Mon carnet web est l'endroit où je vous tiens au courant de mes dernières créations, découvertes, etc.</p>
        </div>	
	
        <div id="portfolio">
            <h2>Portfolio</h2>
            <p>Mon portfolio est la vitrine de mes réalisations que ce soit des articles, des sites webs ou des scripts.</p>
        </div>
    </div>      
      
    <div id="pied">
	    <p>Site valide <a href="http://validator.w3.org/check?uri=referer"><acronym title="eXtended HyperText Markup Language">XHTML</acronym></a> et <a href="#/"><acronym title="Cascading StyleSheet">CSS</acronym></a>.</p>
    </div>      
</body>
</html>


Et voici la feuille CSS:
/* ### General ### */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 10pt Verdana, Arial, sans-serif;
    text-align: center;
    quotes: '\0000ab\0000a0' '\0000a0\0000bb' '\00201c\0000a0' '\0000a0\00201d';
}

/* ### #navigation ### */
#navigation {
    margin: 0;
    text-align: center;
    padding: 6px;
    height: 21px;
}
#navigation li {
    list-style-type: none
    margin: 0;
    margin-left: 25px;
    display: inline;
    font: 10pt;
}
#navigation li a {
    color: #FFF;
    text-decoration: none;
    padding: 11px;
}

/* ### #apropos ### */
#apropos {
    margin: auto;
    width: 450px;
    margin-top: 30px;
    text-align: right;
    padding: 10px;
}
#apropos h1 {
    font-size: 14pt;
    margin: 0.5em;
    text-transform: capitalize;
}
#apropos p {
    margin: 0.3em;
    text-transform: uppercase;
}

/* ### #conteneur ### */
#conteneur {
    width: 760px;
    margin: auto;
    text-align: center;
}
#conteneur h2 {
    font-size: 12pt;
    margin-top: 0;
}

/* ### Contenu ### */
#moi, #carnet, #portfolio {
    height: 100%;
    width: 150px;
    margin: 36px;
    float: left;
    text-align: left;
    padding: 1em;
}

/* ### #pied ### */
#pied {
    clear: both;
    margin: 0;
    text-align: center;
    padding: 0.5em;
    height: 21px;
    color: #FFF;
}
#pied p {
    margin: 0;
}


Quand il y a beaucoup de texte la page est plus grande que la fenêtre du navigateur (il y a des ascenceurs) et le pied de page ets bien en bas.

Mais quand il y a peu de texte (comme ici) le pied de page est en dessous des colonnes mais pas contre le bas de la fenêtre Smiley confus
J'ai fait une recherche mais généralement personne n'a le même layout que moi Smiley ohwell

Voilà ce que ça me donne avec peu de texte Smiley sweatdrop :
[IMG]http://img266.echo.cx/img266/9233/erreurdesign.png[/IMG]

Merci
Sujet clos
Aller à