[CSS] Séparer le footer vers bas...

Version imprimable

Salut à tous :)

J'aimerais bien savoir comment séparer mon footer, c'est à dire le placer en bas de la page même si son dessus est vide...

A l'instant il est collé juste après l'article M-1...

Voici le design en question
http://www.xi-tech.info/mise_en_page/index.php

Codage par HTML :

Code:

1
2
3
4
5
6
7
8
9
10
            <div class="inscripition">
            </div>
                <div class="cardre_principale">
                  <?php include('colonne_gauche_generale.php'); ?>
                  <?php include('cadre_milieu.php'); ?>
                  <?php include('colonne_droite_generale.php'); ?>
                </div>
            <div class="partie_footer">
                Partie footer
            </div>

codage par CSS pour le footer :

Code:

1
2
3
4
5
6
7
8
    /* Partie footer */
 
.partie_footer
    {
    width: 60%;
    margin: auto;
    border: solid 1px #336699;
    }

Merci de vos part !

09/05/2006, 08h19
Swoög

Salut !

alors : fait gaffe, un de tes div est pas refermé ;)

sinon, il y a bien une méthode...

comme tout le reste du contenu à l'air d'être contenu dans un div, tu peux lui mettre un min-height (fonctionne pas sous IE)
ou sinon passer avec un position : fixed (fonctionne pas sous IE non plus, mais facilement contournable : http://web.developpez.com/faq/html/?...ans_javascript
09/05/2006, 09h28
blueice

Tu peux regarder par ici également :

http://www.alistapart.com/articles/footers ;)
09/05/2006, 14h42
masu
en general pour placer mes footer je fait ca
Code:

1 2 3 4 5 6 7 #footer { position: absolute; bottom: 0px; background: #03c; height: 35px; width: 100%; }
ensuite il faut mettre une marge equivalante a la hauteur de ton footer a l'element au dessu de ton footer
09/05/2006, 14h55
S~C

Citation:

Envoyé par Swoög

Salut !

alors : fait gaffe, un de tes div est pas refermé ;)

C'est sur, tout ouvert, tout fermé ! :) (je te le garanties, j'ai compté x ouvert et x fermé)

Ensuite, merci à masu et blueice, je vais me documentrer / tester avec vos réponses et je tiendrai au courant
09/05/2006, 15h09
S~C
blueice aie aie le site est en anglais lol, je vais essayer d'utiliser avec la traduction du Google...

Bref j'ai utilisé la méthode de masu

Voici mon CSS à jour :
Code:

1 2 3 4 5 6 7 8 9 10 /* Partie footer */ .partie_footer { width: 60%; margin: auto; position: absolute; bottom: 0px; border: solid 1px #336699; }
Petit souci à présent c'est que margin: auto; ne fait plus effet...
Comment le rendre centré en largeur ?

Effet pour rester en bas du hauteur est réussi à présent ;)

j'ai pas trouvé pourquoi ca ne se centrai pas mais au passage

Code:

1
2
3
4
5
6
body
    {
    font-family: "Poor Richard", Arial, serif;
    background-color: #FFFFFF;
...
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form >
<div class="identification">   
  <span class="champ_identification">
  <input type="text" />
  </span> 
</div>
<div class="mot_passe">
  <span class="champ_mot_passe">
  <input type="password" />
  </span>
</div>
<div>
  <input type="submit" class="valider" value="&nbsp;"/>
  <input type="submit" class="mot_passe_perdu" value="&nbsp;" />
</div>
</form>

09/05/2006, 16h42
S~C

Effecitvement deux erreur stupide dans mon css, merci ;)

Sinon, l'erreur avec form, je ne vois pas trop... <form > </form> est correct non ?

Au passage si autre que masu saura comment règler pour le centrage, merci de me faire savoir ;)

le probleme est l'imbrication de la balise. le form et des divs se chevauchent c pas bon.
ton code est comme ca

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="identification">
<form >
<span class="champ_identification">
<input type="text" />
</span>
 </div>
<div class="mot_passe">
<span class="champ_mot_passe">
<input type="password" />
</span>
</div>
 <div>
<input type="submit" class="valider" value="&nbsp;"/>
<input type="submit" class="mot_passe_perdu" value="&nbsp;" />
 </form>
 </div>

09/05/2006, 17h26
S~C

Ha oui, c'est sur...

Je ne faisais pas trop attention...

Merci de me l'avoir corrigé (prévenir surtout :mouarf:)

Je continues à faire des "tests" pour parvenir à centrer mon footer, mais c'est quand même bizarre qu'il ne se pointe pas n'est-ce pas ? du à mon codage ?
10/05/2006, 00h10
masu

je ne voi non plu pas d'ou ca pourrai venir.
j'aurai plutot fait un margin: 0 auto; plutot qu'un margin: auto; mais ca ni change rien.
11/05/2006, 07h13
S~C

Personne ne saurait m'en sortir de cette situation ? :oops:
11/05/2006, 08h53
blueice

A mon humble avis il faudrait reprendre toute la structure de ta page, ce n'est pas optimisé du tout, tu as mis énormément de "div" inutiles.
Du coup le problème vient peut-être de plus haut... et il est difficile de mettre les mains dans le cambouis. On s'y perd.
Au fait pourquoi tu écris "inscripition" "cardre"
11/05/2006, 08h58
S~C

Citation:

Envoyé par blueice

A mon humble avis il faudrait reprendre toute la structure de ta page, ce n'est pas optimisé du tout, tu as mis énormément de "div" inutiles.

aaaaaarrrrrrfffff, non pas ççaaaa....
Quel genre de div inutile, je ne vois pas... 8O8O:?:?

Citation:

Envoyé par blueice

Du coup le problème vient peut-être de plus haut... et il est difficile de mettre les mains dans le cambouis. On s'y perd.
Au fait pourquoi tu écris "inscripition" "cardre"

Une probabilité... Sinon, je ne comprends pas trop de ce que tu veux me dire avec "cardre"...

(au passage j'ai corrigé cardre = cadre)
11/05/2006, 09h16
blueice

Actuellement tu n'aurais besoin que de 4 ou 5 "div".

Un header (pas obligatoire tu pourrais juste avoir une liste pour le menu), trois rubriques, un footer.

Citation:

Une probabilité... Sinon, je ne comprends pas trop de ce que tu veux me dire avec "cardre"...

Je ne saisis pas de quoi tu parles 8O

En faisant une erreur d'orthographe dans ton code, tu risque d'avoir non seulement des erreurs au niveau de l'interprétation mais c'est également déconcertant lorsque l'on plonge le nez dans ton code.
Et ca ne donne pas trop envie... (il ne s'agit que de mon avis)
11/05/2006, 09h28
S~C

Je devrais alors supprimer 3 div de plus...

Je ne vois pas comment je peux affichier comme je voulais...

Bref je ne comprends pas ce que tu essaie de me dire avec cardre, tu voulais me signaler un erreur ortho c'est cela ?
11/05/2006, 09h44
masu

bon, j'ai vu encore un truc mais c'est pas en rapport avec le footer.
Tu utilise le xhtml mais pourtant tes tags meta/input/link sont mal formés

<meta blabla="toto" />
11/05/2006, 10h26
masu
avec un centrage par marge negative ca semble fonctionner.
le truc c'est de positionner l'element avec un left: 50% et de faire une marge droite de -la moitié de la largeur de ta boite.
Code:

1 2 3 4 5 6 7 8 9 .partie_footer { width: 60%; left: 50%; margin-left: -30%; position: absolute; bottom: 0px; border: solid 1px #336699; }
12/05/2006, 04h56
S~C

En effet cela marche...

Je te remercie beaucoup ;)

Je vais le mettre "résolu"... merci de ta part ;)