28172 sujets

CSS et mise en forme, CSS3

Design XHTML/CSS complet avec 2 colonnes (alsa création)

Bonjour,

Je tente de réaliser le design suivant de Alsa Création :

www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur.html

J'y arrivais très bien jusqu’à que je ne comprenne pas une chose. Dans l'étape 2, l'étape du positionnement, je réalise l'intégration correctement. Cependant, le footer ne se met pas en bas du div centre, malgré le même codage. J'utilise en effet le padding-bottom: 50 px sur le div centre mais malgré cela, si je réduis la page il vient se placer en plein dans le contenu du centre.

Le code HTML, vous l'aurez sur le lien, mais voici le code CSS : 


html, body{
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
}
div#center{
	padding-bottom: 50px;
}


div#footer{
	position: absolute;
	width: 750px;
	bottom: 0;
	left: 10px;
}


Une petit remarque lorsque je retire body dans :


html, body{
	height: 100%;
	margin: 0;
	padding: 0;
}


Cela fonctionne correctement.

Quelqu'un aurait une explication ? il est vrai que j'aime bien comprendre les phénomènes HTML; CSS.
Modifié par mln95400 (08 Jun 2012 - 11:37)
Oui bien sur, je voulais pas le mettre car ils est assez long. Il est disponible sur le lien que j'ai mis. Sinon le voila : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>
    </head>
    <body>
        <div id="header">
            <h1>2cols4u</h1>
        </div>
        <div id="center">
            <div id="content">
                <h2>Etape 1 : le code XHTML</h2>
                <p>Vous trouverez ci-dessous le code de la page HTML que vous êtes en train de lire. Et oui, malgré l'absence de feuille de style, la page est déjà lisible ! Les liens fonctionnent, les titres sont mis en évidence, les listes structurées, etc.</p>
                <p>La page est divisée horizontalement en trois parties distinctes :</p>
                <ol>
                    <li>l'en-tête (identifié par "<em>header</em>"), destiné à accueillir la bannière et éventuellement une devise ou slogan.</li>
                    <li>la partie centrale ("<em>center</em>", bien vu !) contiendra les deux colonnes qui nous intéressent. Elle comprend donc elle-même 2 zones distinctes (les divisions <em>sidebar</em> et <em>content</em>).</li>
                    <li>le pied de page ("<em>footer</em>") comprend diverses informations que l'on souhaite afficher discrètement sur toutes les pages, en général des mentions de copyright ou les coordonnées & références de la société ...</li>
                </ol>	
            </div><!-- #content -->
            <div id="sidebar">

                <h2>Navigation</h2>
                <ul id="menu">
                    <li><a href="#" title="Introduction">Introduction</a></li>
                    <li><a href="#" title="Première étape : le code (X)HTML">Etape 1</a></li>
                    <li><a href="#" title="Deuxième étape : le positionnement">Etape 2</a></li>
                    <li><a href="#" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>
                    <li><a href="#" title="Quatrième étape : le menu">Etape 4</a></li>
                    <li><a href="#" title="Cinquième étape : titres & liens">Etape 5</a></li>
                    <li><a href="#" title="Sixième étape : ajustements pour IE">Etape 6</a></li>
                </ul>

                <h2>Brèves</h2>
                <p>Pourquoi j'aime les standards du W3C ? Pour <a href="http://openweb.eu.org/articles/pourquoi_standards/" title="Openweb : Pourquoi les standards du W3C">ça</a></p>
                <h2>Liens</h2>

                <ul>
                    <li><a href="http://www.alsacreations.com" title="AlsacréationS apprendre XHTML, les CSS et les standards W3C de la conception Web">Alsacréations</a></li>
                </ul>
            </div> <!-- #sidebar -->
        </div><!-- #center -->

        <div id="footer">
            <p>Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.</p>
        </div><!-- #footer -->
    </body>

</html>
Bonjour,

Sans le code CSS complet, il est difficile d'être sûr, mais ça sent le clear oublié dans le footer.
Sujet clos
Aller à