[HTML/css] Problème de positionnement de footer

Logiciel & apps Programmation
1

Je suis en train de réaliser un site avec une mise en page css, mais voilà je rencontre un problème quant au positionnement de mon footer. Problème qui pourtant m’avait déjà titillé lors de la réalisation d’autres sites, qui une fois de plus me rend :fou: …

Je voudrais que ma page est une hauteur minimale, et que ce footer se positionne dessous, mais si la page est amenée à posséder un contenu plus important que la hauteur minimale que celui-ci descende en fonction du contenu.

Voilà où j’en suis pour le moment:

http://mathieuj.chez.tiscali.fr/sty/

Merci d’avance pour votre aide :slight_smile:

2

Un petit up … :frowning:

3

j’ai jamais réussi à le faire moi :stuck_out_tongue:

4

slt

1/ utilise un overflow pour ta page central
http://www.neokraft.net/articles/overflow-css/
mais apres tout dependra du navigateur
j’ai fait un site recemment aux normes w3c en css/html et j’ai du me resoudre a modifer qq pages pour eviter justement ce problème

2/ tu as une erreur dans ta page : le script est en dehors des balise en bas de page

5

L’overflow je l’ai déjà utilisé mais dans ce cas précis, je ne voudrais pas qu’il y est deux ascenceurs… :frowning:

C’est pourtant bien possible :frowning:

Sinon pour l’erreur de script c’est un script généré par tiscali où pour le moment j’héberge la page (ça ne durera pas).

Merci pour ta réponde :jap:

Mais … je cherche toujours :frowning:

6

Me revoilà sur ce projet et après un après-midi à faire des essais, je n’arrive toujours pas à positionner ce footer comme je le souhaiterais :frowning:

Ai besoin de vos lumières :??:

Voici le code css utilisé:

[cpp]
body {
margin: 0;
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px;
background-color:#676768;
}

#conteneur {
z-index:0;
position: absolute;
width: 776px;
min-height: 100%;
height:100%;
left: 50%;
margin-left: -388px;
background-image: url(…/_images/fondConteneur.gif);
}

#logo{
top:0px;
left:0px
width: 139px;
height:117px;
z-index:0;
position:absolute;
}

#banniere{
position: absolute;
top:0px;
left:139px;
width: 637px;
height:117px;
z-index:0;
}

#slogan{
font-family:Verdana;
font-size:15px;
font-weight:bold;
position: absolute;
top:50px;
left:270px;
}

#onglet{
top:117px;
left:0px;
width:425px;
height:21px;
z-index:0;
position:absolute;
background-image: url(…/_images/onglet.gif);
background-repeat:no-repeat;
}
#contenu{
position:absolute;
background-image: url(…/_images/fondConteneur.gif);
background-repeat:repeat-y;
text-align: justify;
padding:20px;
z-index:1;
top:140px;
width:776px;
height:400px;
left:0px;
}

#footer{
position: absolute;
clear:both;
}
[/cpp]

Et le code html:

[cpp]

<div id="logo">

	<a href="index.php"><img src="_images/logo.gif" class="image" title="Accueil Stynet" alt="Logo Stynet"/>[/url]

</div>

<div id="banniere">

	<img src="_images/banniere.gif"/>
	
</div>

<div id="slogan">

	Conception de solutions Web professionnelles.

</div>

<div id="onglet">

	<div id="menu1"><a href="index.php" class="onglet">Présentation[/url]</div>
	<div id="menu2"><a href="savoirFaire.php" class="onglet">Notre savoir-faire[/url]</div>
	<div id="menu3"><a href="references.php" class="onglet">Nos références[/url]</div>
	<div id="menu4"><a href="contacts.php" class="onglet">Contacts[/url]</div>
	
</div>

# Prima dicte mihi, summa dicende Camena,

spectatum satis et donatum iam rude quaeris,

Maecenas, iterum antiquo me includere ludo?

Non eadem est aetas, non mens. Veianius armis

Herculis ad postem fixis latet abditus agro,

ne populum extrema totiens exoret harena.

Est mihi purgatum crebro qui personet aurem:

'Solue senescentem mature sanus equum, ne

peccet ad extremum ridendus et ilia ducat.’

Nunc itaque et uersus et cetera ludicra pono,

quid uerum atque decens, curo et rogo et omnis in hoc sum;

condo et compono quae mox depromere possim.

Ac ne forte roges quo me duce, quo Lare tuter;

nullius addictus iurare in uerba magistri,

quo me cumque rapit tempestas, deferor hospes.

Nunc agilis fio et mersor ciuilibus undis,

uirtutis uerae custos rigidusque satelles;

nunc in Aristippi furtim praecepta relabor

et mihi res, non me rebus subiungere conor.

Vt nox longa quibus mentitur amica, diesque

longa uidetur opus debentibus, ut piger annus

pupillis quos dura premit custodia matrum,

sic mihi tarda fluunt ingrataque tempora quae spem

consiliumque morantur agendi nauiter id quod

aeque pauperibus prodest, lucupletibus aeque,

aeque neglectum pueris senibusque nocebit.

Restat ut his ego me ipse regam solerque elementis.

Non possis oculo quantum contendere Lynceus,

non tamen idcirco contemnas lippus inungui;

nec, quia desperes inuicti membra Glyconis,

nodosa corpus nolis prohibere cheragra.

Est quadam prodire tenus, si non datur ultra.

Feruet auaritia miseroque cupidine pectus:

sunt uerba et uoces quibus hunc lenire dolorem

possis et magnam morbi deponere partem.

Laudis amore tumes: sunt certa piacula quae te

ter pure lecto poterunt recreare libello.

Inuidus, iracundus, iners, uinosus, amator,

nemo adeo ferus est, ut non mitescere possit,

si modo culturae patientem commodet aurem.

Virtus est uitium fugere et sapientia prima

stultitia caruisse. Vides, quae maxima credis

esse mala, exiguum censum turpemque repulsam,

quanto deuites animi capitisque labore;

impiger extremos curris mercator ad Indos,

per mare pauperiem fugiens, per saxa, per ignes;

ne cures ea quae stulte miraris et optas,

[/cpp]

Ca serait gentil de m’aider car là je ne sais plus du tout comment faire … :frowning:

Merci d’avance :jap:

7

Up :sweat:

8

Peut-être en retirant toutes les directives CSS sur le #footer et pour la hauteur minimale (disons Ypx), tu peut toujours mettre un div invisible de hauteur Y dans #contenu ?

9

Oui mais quand il y aura beaucoup de contenu, la hauteur du contenu va faire taille du contenu + hauteur de la div invisible … ce qui va créer un espace blanc en bas de page.

Je peux bien évidemment trouver un compromis de taille pour cette div invisible selon une résolution … mais bon c’est pas le top :frowning:

Ce que j’aimerais faire c’est que la div hauteur(div hauteur minimale) se trouve en fond de la div text(contenu à insérer dans la page), et que la div contenu s’adapte à ce contenu …

Mai je n’arrive pas à superposer les div hauteur et text sans perdre la fonctionnalité suivante: la div contenu s’adapte au contenu)…

Pour superposer les div, je les mets en absolute… donc le contenu ne s’adapte plus …

Je vois pas trop comment faire :frowning:

10

Et si fais un sous

dans #contenu qui contiendrais le texte de la page et le
invisible et en mettant un float sur le
invisible.
11

Si je retire les propriétés css pour le footer, j’ai un décallage de celui-ci vers l haut sous IE :frowning:

Sinon j’avais déjà essayé de mettre le

invisible en float, ça donne le code suivant mais le résultat escompté n’est pas au rendez-vous :frowning:

Voilà le new code:

[cpp]
body {
margin: 0;
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page */
font-size: 12px;
/background-color:#FFF2DD;/
background-color:#6D614F;
}

#conteneur {
z-index:0;
position: absolute;
width: 776px;
height: 150px;
left: 50%;
margin-left: -388px;
background-image: url(…/_images/fondConteneur.gif);
}

#logo{
top:0px;
left:0px
width: 139px;
height:117px;
z-index:0;
position:absolute;
}

#banniere{
position: absolute;
top:0px;
left:139px;
width: 637px;
height:117px;
z-index:0;
}

#contenu{
position:absolute;
background-image: url(…/_images/fondConteneur.gif);
background-repeat:repeat-y;
border-top: 2px solid #FF9A00;
text-align: justify;
z-index:1;
top:117px;
width:776px;
left:0px;
}

#hauteur {
float:left;
height:500px;
visibility:hidden;
}

#texte{

top:0px;
left:0px;
padding:50px;
z-index:2;

}

#footer{
position: absolute;
clear:both;
z-index:2;
}
[/cpp]

[cpp]

# Prima dicte mihi, summa dicende Camena,

# spectatum satis et donatum iam rude quaeris,

# Maecenas, iterum antiquo me includere ludo?

# Non eadem est aetas, non mens. Veianius armis

# Herculis ad postem fixis latet abditus agro,

# ne populum extrema totiens exoret harena.

# Est mihi purgatum crebro qui personet aurem:

# 'Solue senescentem mature sanus equum, ne

# peccet ad extremum ridendus et ilia ducat.’

# Nunc itaque et uersus et cetera ludicra pono,

# quid uerum atque decens, curo et rogo et omnis in hoc sum;

# condo et compono quae mox depromere possim.

# Ac ne forte roges quo me duce, quo Lare tuter;

# nullius addictus iurare in uerba magistri,

# quo me cumque rapit tempestas, deferor hospes.

# Nunc agilis fio et mersor ciuilibus undis,

# uirtutis uerae custos rigidusque satelles;

# nunc in Aristippi furtim praecepta relabor

# et mihi res, non me rebus subiungere conor.

# Vt nox longa quibus mentitur amica, diesque

# longa uidetur opus debentibus, ut piger annus

# pupillis quos dura premit custodia matrum,

# sic mihi tarda fluunt ingrataque tempora quae spem

# consiliumque morantur agendi nauiter id quod

# aeque pauperibus prodest, lucupletibus aeque,

# aeque neglectum pueris senibusque nocebit.

# Restat ut his ego me ipse regam solerque elementis.

# Non possis oculo quantum contendere Lynceus,

# non tamen idcirco contemnas lippus inungui;

# nec, quia desperes inuicti membra Glyconis,

# nodosa corpus nolis prohibere cheragra.

# Est quadam prodire tenus, si non datur ultra.

# Feruet auaritia miseroque cupidine pectus:

# sunt uerba et uoces quibus hunc lenire dolorem

# possis et magnam morbi deponere partem.

<div id="footer">

	<img src="_images/footer.gif"/>
	
</div>
[/cpp]

:fou: Commence à déprimer :S :sweat:

12

tu peut virer les z-index deja
ca sert pas a grand chose
un tres bon site de reference sur le css :

pour le positionnement je n’utilise jamais les zindex

13

Bah c’était plus pour essayer de bien voir où se positionnaient les éléments… j’ai jamais ouvert Dreamweaver où tout logiciel similaire … :non:

Mais bon, les z-index n’ont rien à voir avec mon :sweat: problème

14

pour voir ou il se positionne je met un backbround:#ff6600; ou autre couleur pour voir il se situe a l’ecran :slight_smile:

bon j’ai un peu te temps la
je vais regarde ton code
je te tiens au courant

15

C’était mis aussi :slight_smile: … j’avais viré les background-color mais pas les z-index … :slight_smile:

Ai toujours pas trouvé la solution :slight_smile:

16

deja tu as oublie un ; dans logo

#logo{

top:0px;

left:0px; //ici tu as oublie un ;

width: 139px;

height:117px;

z-index:0;

position:absolute;

}

17

Merci pour cette petite omission :jap:

18

Ben en fait il faut que le contenu fasse une taille minimale… tout le problème est là … ensuite on est partit sur l’utilisattion de deux sous div: une pour le texte et une invisible pour que la div parent fasse toujours une taille minimale même si le texte est moindre :slight_smile:

Mais bon comme ça je n’y arrive pas mieux :frowning:

19

ok je comprend ce que tu veut faire
un bloc ayant une hauteur de 500 px par ex minimum
si le text depasse cette hauteur alors on augmente la hauteur en gardant le footer bien dessous
et si le texte revient en dessous de 500 alors le cadre reste a 500 et le footer reprend sa position initiale
je n’avais pas compris dans ce sens alors je vais regarde ce que je peut trouver dans mes script qui ressemble a cela

20

Oui c’est exactement ça :oui:

Merci de ton aide :jap: :slight_smile: :slight_smile: