résolu : html et css

lagrenouille · 18-03-2022 11:58:14

salut
je continue mes pages html sur mon serveur

j'arrive pas à maîtriser un petit "problème" avec les footer de mon site,
celui de l'accueill se mets bien en bas de page
voir en vert ici : https://funambule.org/
.
code css =

  .footer{

  clear: both;

  height: 140px;

  padding: 1em 0 0; 

  margin:1em 0 0 0;

  background: #2F4F4F;

  color: white;

        max-width: 1400px;

        margin: 0 auto;

}

.
celui de cette page qui est un autre index.html, pour la visite du site, footer en vert, c'est un autre css qui est appelé, il est bien en bas de page, voir cette page,
https://funambule.org/chezlagrenouille-site/
.
code =

.footer{

        clear: both;

        height: 120px;

        padding: 2em 0 0; 

        margin:auto;

        background: darkslategray;

        width: 100%;

        max-width: 1400px;

        color: white;

        text-align: center;

        position: bottom: 0;

        }

mais impossible pour une autre page, de l'avoir en bas de page de mon navigateur
https://funambule.org/chezlagrenouille- … liers.html

le footer se mets bien juste en dessous du menu, (probablement le bas de la page html, mais pas en bas de page du navigateur, il fait appel au même css que le précédent. peut-être je demande l'impossible ? d'où ma question...

l'outil de développement web permet de voir les codes, j'ai viré le footer en attendant
.
je me sers de cette extension pour déboguer

WAVE Evaluation Tool qui est bien pratique

Dernière modification par lagrenouille (19-03-2022 16:12:26)

zaphir · 18-03-2022 14:16:05

Salut,

J'ai l'impression que tu as oublié de l'ajouter dans ta page html en question:
https://funambule.org/chezlagrenouille- … liers.html

Dans les autres pages il est bien présent mais pas celle-ci.

lagrenouille · 18-03-2022 15:11:09

c'est dans les css, et pas dans la page html qui ne contient que l'appel au css
dans la page html on y mets:
<div class="footer">
contenu divers texte ou image
</div>
j'ai dis dans le précédent post pourquoi je l'ai viré en attente de solution..

zaphir · 18-03-2022 17:54:45

Pour moi le css ne sert qu'à définir le style du contenu defini dans le html, donc sans une "div footer" dans le html, la page de style css n'y changera rien, mais peut-être que je n'ai rien compris à ta question .

Tient c'est bizarre tu viens de le rajouter ...

lagrenouille · 18-03-2022 17:57:56

ah ah, non, je l'ai viré de nouveau, cette page m'emmerde un peu, je crois que c'est le fait qu'il y a un menu à gauche
bref j'ai mis une image, et là le footer se retrouve bien en bas, je l'ai donc re-viré, vu que j'ai plein de pages à faire, je reproduirai pour voir

@zaphir
Il faudrait lire ce que j'écris avant de répondre, ce serait sympa
il y a le html d'un coté et les css de l'autre
on fait appel aux css, dans le head, de cette manière:
<link rel="stylesheet" href="layout.css" type="text/css" />

le css est bon
c'est uniquement dans cette page que ça merdouille....et maintenant que j'ai mis une image, si je mets le footer, il se positionne bien en bas..
sans l'image il est pas en bas, c'est la seule chose qui m'amène à poser la question...

Dernière modification par lagrenouille (18-03-2022 19:44:14)

Antidentity · 19-03-2022 08:42:44

Bonjour ! Je ne suis pas sûr d'avoir compris ta demande. Tu souhaiterais que le footer soit figé tout en bas de la page ou qu'il soit positionné après tous les éléments de la page ?
De ce que j'ai testé, le footer tel que paramétré ici se positionne après tous les éléments, que ce soit la page d'accueil, d'index ou, si on rajouter le <div class="footer">, après les éléments (lorsqu'encodé juste avant le </ body>.
Tu voudrais qu'il soit fixe en bas de page ?

zaphir · 19-03-2022 14:35:33

lagrenouille a écrit :

@zaphir
Il faudrait lire ce que j'écris avant de répondre, ce serait sympa

Ai-je été désobligeant dans mes réponses ?
Pas à ma connaissance, sois gentil d'en faire de même en évitant de faire comme si je te faisais perdre ton temps.

lagrenouille a écrit :

il y a le html d'un coté et les css de l'autre
on fait appel aux css, dans le head, de cette manière:
<link rel="stylesheet" href="layout.css" type="text/css" />

Je connais la relation entre le HTLM et le CSS inutile de faire comme si donnais un cours à chacune de tes réponses alors même que tu demandes de l'aide.

lagrenouille a écrit :

le css est bon

...

gtalbot · 19-03-2022 15:27:30

lagrenouille a écrit :

https://funambule.org/

.footer{
clear: both;
height: 140px;
padding: 1em 0 0;
margin:1em 0 0 0;
background: #2F4F4F;
color: white;
max-width: 1400px;
margin: 0 auto;
}

Les marges sont redéfinies à l'intérieur du même sélecteur.
Ce n'est pas une erreur mais c'est certainement une
déclaration inutile. La première déclaration va être
ignorée parce que redéfinie par la deuxième.

lagrenouille a écrit :

.
celui de cette page qui est un autre index.html, pour la visite du site, footer en vert, c'est un autre css qui est appelé, il est bien en bas de page, voir cette page,
https://funambule.org/chezlagrenouille-site/
.
.footer{
clear: both;
height: 120px;
padding: 2em 0 0;
margin:auto;
background: darkslategray;
width: 100%;
max-width: 1400px;
color: white;
text-align: center;
position: bottom: 0;
}

Normalement, un élément bloc utilise toute la largeur qui lui est disponible de son élément parent.
Donc, il me semble inutile de déclarer

        width: 100%;

        max-width: 1400px;

Deuxièmement, la déclaration 'position: bottom: 0;' est erronée et va être ignorée.

lagrenouille a écrit :

mais impossible pour une autre page, de l'avoir en bas de page de mon navigateur
https://funambule.org/chezlagrenouille- … liers.html

le footer se mets bien juste en dessous du menu, (probablement le bas de la page html, mais pas en bas de page du navigateur, il fait appel au même css que le précédent. peut-être je demande l'impossible ? d'où ma question...

Il n'y a pas d'élément .footer dans la page ateliers.html.

La première chose que je te recommande c'est de valider le codage HTML et de valider le codage CSS.

Ensuite, de créer une page, une seule, sur laquelle tu souhaites avoir de l'aide. Les 3 pages
que tu mentionnes sont différentes et les codes HTML et CSS ne sont pas exempts d'erreurs.
Finalement, de réduire (minimiser) le code de la page qui pose problème.

Je vois plusieurs autres problèmes avec ton code: sur-déclarations, abus
d'éléments <br>, pages non échelonnables ("scalable" en anglais), etc..

Gérard

gtalbot · 19-03-2022 15:53:42

Antidentity a écrit :

Bonjour ! Je ne suis pas sûr d'avoir compris ta demande. Tu souhaiterais que le footer soit figé tout en bas de la page ou qu'il soit positionné après tous les éléments de la page ?

Excellente question. Je pense que lagrenouille veut que
l'élément .footer soit seulement et simplement situé
après tous les éléments de la page.

Gérard

lagrenouille · 19-03-2022 16:13:14

salut à tous
le débat est clos, merci

Debian-facile

#1 18-03-2022 11:58:14

résolu : html et css

#2 18-03-2022 14:16:05

Re : résolu : html et css

#3 18-03-2022 15:11:09

Re : résolu : html et css

#4 18-03-2022 17:54:45

Re : résolu : html et css

#5 18-03-2022 17:57:56

Re : résolu : html et css

#6 19-03-2022 08:42:44

Re : résolu : html et css

#7 19-03-2022 14:35:33

Re : résolu : html et css

#8 19-03-2022 15:27:30

Re : résolu : html et css

#9 19-03-2022 15:53:42

Re : résolu : html et css

#10 19-03-2022 16:13:14

Re : résolu : html et css

Pied de page des forums