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

**S~C** · 09/05/2006, 03h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci de vos part !

**Swoög** · 09/05/2006, 08h19

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

**blueice** · 09/05/2006, 09h28

Tu peux regarder par ici également :

http://www.alistapart.com/articles/footers

**masu** · 09/05/2006, 14h42

en general pour placer mes footer je fait ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**S~C** · 09/05/2006, 14h55

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

**S~C** · 09/05/2006, 15h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**masu** · 09/05/2006, 16h27

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**S~C** · 09/05/2006, 16h42

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

**masu** · 09/05/2006, 17h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**S~C** · 09/05/2006, 17h26

Ha oui, c'est sur...

Je ne faisais pas trop attention...

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

)

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 ?

**masu** · 10/05/2006, 00h10

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.

**S~C** · 11/05/2006, 07h13

Personne ne saurait m'en sortir de cette situation ?

**blueice** · 11/05/2006, 08h53

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"

**S~C** · 11/05/2006, 08h58

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...

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)

**blueice** · 11/05/2006, 09h16

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.

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

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)

**S~C** · 11/05/2006, 09h28

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 ?

**masu** · 11/05/2006, 09h44

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" />

**masu** · 11/05/2006, 10h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    }

**S~C** · 12/05/2006, 04h56

En effet cela marche...

Je te remercie beaucoup

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

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

CSS

Discussions similaires

Partager

Partager