Un bas de page qui ne suit pas la route...

Question

GreggBazin

26 May 2006 à 17:59

Bonjour à tous,

voilà je ne comprends pas trop j'ai un problème de positionnement et ça faisait longtemps que je n'avais pas buté sur ce genre de cas.

en fait la page d'accueil est nickel, mais pour les autres pages quand je met du texte plus long dans la page ou dans ma colonne avec scroll, le bas de page ne suit pas...

voilà 2 impressions d'écrans pour vous faire une idée :

La page OK :
http://img148.imageshack.us/my.php?image=correct7iy.gif

La page explosée :
http://img123.imageshack.us/my.php?image=probleme3ii.gif

Et voilà mon code :
HTML :

<body>
<div id="conteneur">    
        <div id="header">
                <div id="menu">
                <ul>
                        <li class="lien1"><a id="item1" href="#"></a></li>
                        <li class="lien2"><a id="item2" href="#"></a></li>
                        <li class="lien3"><a id="item3" href="#"></a></li>
                        <li class="lien4"><a id="item4" href="#"></a></li>
                        <li class="lien5"><a id="item5" href="#"></a></li>
                        <li class="lien6"><a id="item6" href="#"></a></li>
                </ul>
                </div>
        </div>
        <div id="col_gauche"><?php include("inc/pub.inc"); ?></div>
        <div id="col_milieu">
                <div id="content">
                        <div id="contenu">
                        <?php include("inc/contenu_accueil.inc"); ?>
                        </div>
                        <div id="colonne">
                        <?php include("inc/colonne.inc"); ?>
                        </div>
                </div>
                <div id="baseline"></div>
        </div>
        <div id="col_droite"></div>
        <div id="legende"><img src="images/fleche.gif"> Cliquez sur les photos pour un affichage en grande taille</div>
        <div id="pied"><?php include("inc/pied.inc"); ?></div>
</div>
</body>

Et la partie importante du CSS :


/* __________ BODY __________ */
body {
        margin: 0;
        padding: 0;
        background: #105C5C;
        line-height: 16px;
}

/* __________ CONTAINER __________ */
#conteneur
{
        width: 800px;
        height: 620px;
        margin: 0px;
        text-align: left;
        background-color: #88AFB4;
        border: 1px solid white;
        position:relative;
}

/* __________ HEADER __________ */
#header
{
        width: 800px;
        height: 92px;
        left: 0px;
        background: transparent url(../images/logo.gif) top left no-repeat;
}

/* __________ LOGO __________ */
#logo
{
        width: 210px;
        height: 92px;
        left: 0px;
        background: transparent url(../images/logo.gif) top left no-repeat;
}
#col_gauche
{       
        position:absolute;
        top:92px;
        margin-left:4px;
        margin-top:20px;
        width:209px;
        height: 460px;
/*      border: 1px solid red; */
        background-color: #88AFB4;
        }
#col_milieu
{       
        position:absolute;
        top:92px;
        margin-left:209px;
        width:566px;
        height: 460px;
        background-image: url(../images/fond.gif);
        }

#col_droite
{       
        position:absolute;
        padding-top:40px;
        top:92px;
        margin-left:775px;
        width:25px;
        height: 460px;
        background-color: #88AFB4;
        background: transparent url(../images/colonne_droite.gif) no-repeat;
        }

/* __________ CONTENT __________ */
#content {
        text-align: justify;
        line-height: 15px;
        margin-bottom: -30px;
} 

/* __________ CONTENU __________ */
#contenu 
{       
        top:100px;
        float:left;
        margin-left:0px;
        width:372px;
        color: #105C5C;
        font-size: 12px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        padding: 20px 5px 0px 10px;
        }
/* __________ COLONNE __________ */
#colonne {
        margin-left:400px;
        width: 150px;
        height: 415px;
        background-color: #EBF6F2;
        border: 1px solid #B6E0D0;
        scrollbar-face-color: #258989;
    scrollbar-shadow-color: #3F9797;
    scrollbar-highlight-color: #A5CECE;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
        overflow: auto;
        color: #105C5C;
        font-size: 11px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        padding: 10px 5px 10px 0px;
        }
/* __________ BASELINE __________ */
#baseline
{
        width:591px;
        height:22px;
        position:absolute;
        bottom: 0;
        left : 0px;
        background: transparent url(../images/bas_cadre.gif) no-repeat;
        background-color:#88AFB4;
}

#legende
{
        width:775px;
        height:20px;
        position:absolute;
        top: 550px;
        left : 0px;
        text-align:right;
        font-size: 12px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        color:#FFFFFF;
}

/* __________ PIED __________ */
#pied
{
        width:800px;
        height:30px;
        position: absolute;
        bottom: 0;
        margin:0;
        left: 0px;
        background: url(../images/pied.gif) no-repeat;
        background-color:#00879A;
        color:#FFFFFF;
        padding-top:5px;
}

J'n'aime pas envoyé de telles longueurs de code mais là je bloque Smiley bawling

Merci d'avance pour votre aide Smiley ravi

Modifié par GreggBazin (26 May 2006 - 18:14)

Raphael

Administrateur

26 May 2006 à 18:08

Hello,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Problèmes de positionnement".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

GreggBazin

26 May 2006 à 18:13

Aïe !!! En effet... pourtant j'imagine qu'il doit bien s'agir d'un problème de positionnement de mes calques... je vais voir comment tourner ceci autremement !

J'suis pourtant un habitué mais merci à toi du conseil...

skylv

26 May 2006 à 19:03

J ai rencontré le même problème...
essaye çà * __________ CONTAINER __________ */

#conteneur
{
width: 800px;
height: 100%;
margin: 0px;
text-align: left;
background-color: #88AFB4;
border: 1px solid white;
position:relative;
}
Edit ^^
Tu construit un tableau pour ta partie centrale juste pour ce morceau.. le tableau s'agrandira et entrainera le reste de ta page.
Le code du dessus peut marché sous Ie mais tu auras des décalages sous mozilla, testé à l'instant pour mon site.
Modifié par skylv (26 May 2006 - 19:59)

fvsch

26 May 2006 à 23:48

Alors, grosso modo, il te faut :
– un conteneur global avec une hauteur minimale de 100% ;
– un pied de page en positionnement absolu, positionné à bottom: 0;.

Pour que ces deux choses marchent, il y a pas mal de subtilités.

Pour le premier point, une hauteur à 100% n'est possible que si le bloc parent a déjà une hauteur fixe. Ce qui demande, dans le cas d'un conteneur global avec une hauteur de 100%, que les éléments html et body aient tous les deux une hauteur de 100%. Deuxième subtilité : lorsque le contenu dépasse la hauteur d'un écran, ce conteneur global doit pouvoir s'allonger. Il ne faut donc pas fixer la hauteur avec la propriété height, mais avec min-height. Subtilité dans la subtilité : Internet Explorer ne supporte pas min-height, mais interprète height comme min-height. Bref, il faut faire quelque chose comme ça :

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
#conteneur {
	min-height: 100%;
	_height: 100%; /* On utilise un hack pour IE Win,
	mais une feuille de style spécifique liée via un
	commentaire conditionnel serait plus propre */
}

Pour le deuxième point, ça devrait être plus simple. On fera juste attention à ménager un espace vide, via un padding par exemple (mais pas directement sur div#conteneur, sinon le bloc fera 100% de la hauteur de page + le padding).

GreggBazin

29 May 2006 à 09:14

Wahouuuu, ça marche... presque Smiley langue

merci pour cette aide !

Effectivement maintenant mon pied de page est bien calé en bas mais le contenu du pavé du milieu continue à passer en dessous de mon pied de page (???).

Voici la page et le CSS :
http://www.creation-website.net/charte.php
http://www.creation-website.net/css/eurodio.css

Est-ce le deuxième point avec l'histoire du padding que j'ai mal géré ???

Merci à vous pour votre aide !!!
Modifié par GreggBazin (06 Jun 2006 - 20:01)

GreggBazin

29 May 2006 à 14:02

Juste pour rendre ceci plus aisé pour mes sauveurs, voilà mon problème en plus simple :

Voilà j'ai tout simplement 3 DIVs alignés et lorsque le contenu du 2ème est trop long, le DIV n°2 passe sous le 3ème alors que je préfèrerai que le 3ème se décale vers le bas...

En image ça donne ceci :
http://www.creation-website.net/test/test.htm
http://www.creation-website.net/test/test.css

Je voudrais que mon DIV vert se déclae vers le bas et reste sous le rouge !

Merci d'avance pour votre aide

@++

gcyrillus

Modérateur

29 May 2006 à 14:26

bonjour,

le conteneur doit-etre en position:relative pour que ça marche Smiley smile

.

comme dans l'exemple plus haut Smiley smile

++

Sujet clos

CSS et mise en forme, CSS3

Un bas de page qui ne suit pas la route...