28173 sujets

CSS et mise en forme, CSS3

Lorsque contenu trop volumineux en hauteur,apparaît bas pied de page.

Bonjour,
Je suis un débutant. Je travaille à la création d'un site internet depuis plusieurs heures déjà.

Mon problème touche la structure de ma page web. J'ai créé plusieurs DIV:

a écrit :

.defile {position: absolute;
height: 20px;
width: 100%;
left: 0px;
top: 0px; }
.logo {position: absolute;
height: 90px;
width: 100%;
left: 0px;
top: 21px;
background-color: #666699;}

.centre {position: absolute;
height: 654px;
width: 100%;
left: 0px;
top: 112px;}

.navigationp {background-color: #9999CC;
position: absolute;
height: 100%;
width: 21%;
left: 0px;
top: 0px;}
.contenu {position: absolute;
height: 100%;
width: 79%;
left: 21%;
top: 0px;
background-color: #CCCCFF;
border-left-width: 1px;}
.pied {background-color: #666699;
position: absolute;
height: 24px;
width: 100%;
left: 0px;
top: 767px;}

<div id="defile" z-index:4 class="defile""> ...</div>
<div id="logo" z-index:1; class="logo"">...</div>
<div id="centre" z-index:2; class="centre"">...
<div id="navigation" z-index:4; class="navigationp""></div>
<div id="contenu" z-index:4; class="contenu""></div>
</div>
<div id="pied" z-index:3 class="pied""> ...</div>


J'ai aussi inséré les lignes suivantes à l'intérieur du <head>, mais je vais avouer que je ne suis pas certain si c'est fait selon les normes.

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

Il y a cette ligne suite à </head> : <body bgcolor="#000000">

Voilà mon problème:

Lorsque le contenu est trop volumineux en hauteur, il s'inscrit en bas de mon pied de page, complètement en dehors de ma structure ... (voir l'image "ScreenShot.jpg"). J'ai fais plusieurs recherches sur internet, sans succès ... . J'avoue avoir de la difficulté à comprendre les notions de positions absolues et relatives ... . Quelqu'un peut-il m'aider ?

Merci grandement
upload/14256-ScreenShot.jpg
Modifié par Emmerlaus (02 Oct 2007 - 03:35)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Modérateur
bonjour

Le positionnement absolu n'est necessaire que pour ton pied de page.

il te faut html et body a une hauteur de 100% et des marges internes et externes a zéro.

un conteneur en min-height:100% en position:relative; (voir faq).

ton pied dans celui-ci en absolue à bottom:0;left:0width:100%;

Dans le conteneur il faut prevoir un "degagement" de la hauteur de ton pied de page.

Ce degagement peut-etre fait sur sur les "2colonnes que tu as comme navigation et contenu (?) en leur appliquant un padding-bottom de la hauteur du pied.

Ne pas fixer ces conteneurs a 100% de hauteur mais chercher du coté des "fausse-colonnes"(faq je crois ou google) pour creer cette impression visuelle.(un fond qui se repete en hauteur dans le conteneur global)

Bonne continuation. Smiley smile
Sujet clos
Aller à