Footer a bonne hauteur
Fermé
Freemuse
-
26 oct. 2013 à 18:31
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 29 oct. 2013 à 22:58
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 29 oct. 2013 à 22:58
12 réponses
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
27 oct. 2013 à 13:42
27 oct. 2013 à 13:42
Bonjour
mets ton footer en position relative
la position absolute sort l'élément du flux
mets ton footer en position relative
la position absolute sort l'élément du flux
Bonjour,
Merci de ton aide animostab. Malheureusement lorsque je mets mon footer en position relative, celui-ci ne se positionne plus sous mon conteneur mais en dessous de mon header.
Je précise aussi que mon conteneur et mon menu sont en position absolute.
Merci de votre aide.
Merci de ton aide animostab. Malheureusement lorsque je mets mon footer en position relative, celui-ci ne se positionne plus sous mon conteneur mais en dessous de mon header.
Je précise aussi que mon conteneur et mon menu sont en position absolute.
Merci de votre aide.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
28 oct. 2013 à 13:47
28 oct. 2013 à 13:47
Re bonjour
ton conteneur doit être mis en relative
en fait les éléments en relative sont placés les uns en dessous des autres dans l'ordre du code (flux)
la position absolute et fixed sort les éléments du flux (donc hors de l'ordre du code)
ton conteneur doit être mis en relative
en fait les éléments en relative sont placés les uns en dessous des autres dans l'ordre du code (flux)
la position absolute et fixed sort les éléments du flux (donc hors de l'ordre du code)
Je capitule !!!
Malheureusement mon niveau ne me permet pas de trouver la solution. J'opte pour la solution de faciliter en vous laissant le code html et css de mon index.
http://meslin-batiment.com/new/html.txt
http://meslin-batiment.com/new/css.txt
Ma div "pied" se situe sous ma barre de menu et le footer, vous l'apercevez : c'est la bande rouge qui se place devant le carousel.
Seul ma barre de navigation "nav" reste en poistion "absolute", tous les autres div sont en position "relative">> Je ne trouve pas la solution pour que la div "pied" et le "footer" se mettent en dessous de mon conteneur.
Merci d'avance pour votre aide.
Malheureusement mon niveau ne me permet pas de trouver la solution. J'opte pour la solution de faciliter en vous laissant le code html et css de mon index.
http://meslin-batiment.com/new/html.txt
http://meslin-batiment.com/new/css.txt
Ma div "pied" se situe sous ma barre de menu et le footer, vous l'apercevez : c'est la bande rouge qui se place devant le carousel.
Seul ma barre de navigation "nav" reste en poistion "absolute", tous les autres div sont en position "relative">> Je ne trouve pas la solution pour que la div "pied" et le "footer" se mettent en dessous de mon conteneur.
Merci d'avance pour votre aide.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
29 oct. 2013 à 13:29
29 oct. 2013 à 13:29
dans #bloc_page
mets
height:auto;
dans #pied
tu as oublié le point virgule après display:block
rajoute le
mets
height:auto;
dans #pied
tu as oublié le point virgule après display:block
rajoute le
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci beaucoup animostab, je touche presque au but mais...
j'ai encore besoin de toi !
Ma div "pied" ne se positionne pas totalement en bas de mon conteneur et il n'est pas tout a fait centré.
http://www.meslin-batiment.com/new/index.php
http://www.meslin-batiment.com/new/css.txt
http://www.meslin-batiment.com/new/html.txt
Merci encore de ton aide précieuse.
j'ai encore besoin de toi !
Ma div "pied" ne se positionne pas totalement en bas de mon conteneur et il n'est pas tout a fait centré.
http://www.meslin-batiment.com/new/index.php
http://www.meslin-batiment.com/new/css.txt
http://www.meslin-batiment.com/new/html.txt
Merci encore de ton aide précieuse.
Re bonjour,
J'ai enfin réussie a placer correctement mon footer au niveau de la hauteur mais impossible de le centrer malgrè un margin:0 auto;
Une idée ?
Merci d'avance.
Le site : http://meslin-batiment.com/new/index.php
CSS : http://meslin-batiment.com/new/css.txt
HTML : http://meslin-batiment.com/new/html.txt
J'ai enfin réussie a placer correctement mon footer au niveau de la hauteur mais impossible de le centrer malgrè un margin:0 auto;
Une idée ?
Merci d'avance.
Le site : http://meslin-batiment.com/new/index.php
CSS : http://meslin-batiment.com/new/css.txt
HTML : http://meslin-batiment.com/new/html.txt
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 29/10/2013 à 22:22
Modifié par animostab le 29/10/2013 à 22:22
Bon tu vas y arriver
A la place de ca
footer p, footer ul{
color: #fff;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
margin:0 20px 0 20px;
padding:0 10px 0 10px;
display: inline-block;
vertical-align: top;
}
mets ca
footer p, footer ul, footer h1 {
color: #fff;
text-align:center;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
width:445px;
padding:0 10px 0 10px;
display: inline-block;
vertical-align: top;
}
ou ca
footer p, footer ul, footer h1 {
color: #fff;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
width:245px; /**a varier pour position selon ton désir**/
margin:0 100px 0 100px; /**a varier pour position selon ton désir**/
display: inline-block;
vertical-align: top;
/****width + les margin gauche et droite doivent être toujours égal à 445px soit la moitié de 990px (width du bottom)***/
}
Un petit merci vaut mieux qu'une grande ignorance
A la place de ca
footer p, footer ul{
color: #fff;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
margin:0 20px 0 20px;
padding:0 10px 0 10px;
display: inline-block;
vertical-align: top;
}
mets ca
footer p, footer ul, footer h1 {
color: #fff;
text-align:center;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
width:445px;
padding:0 10px 0 10px;
display: inline-block;
vertical-align: top;
}
ou ca
footer p, footer ul, footer h1 {
color: #fff;
}
#bottom{
margin:0px auto;
width:990px;
}
#coordonnees, #partenaires{
width:245px; /**a varier pour position selon ton désir**/
margin:0 100px 0 100px; /**a varier pour position selon ton désir**/
display: inline-block;
vertical-align: top;
/****width + les margin gauche et droite doivent être toujours égal à 445px soit la moitié de 990px (width du bottom)***/
}
Un petit merci vaut mieux qu'une grande ignorance
Encore merci animostab, mais malheureusement mon pied de page reste légèrement décalé !
Pour qu'il soit aligné, je suis obligé de mettre un margin left:9px; mais je me retrouve avec un espace blanc sur le côté gauche.
C'est la galère !
Pour qu'il soit aligné, je suis obligé de mettre un margin left:9px; mais je me retrouve avec un espace blanc sur le côté gauche.
C'est la galère !
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 29/10/2013 à 22:37
Modifié par animostab le 29/10/2013 à 22:37
bon retire le margin-left a #pied
la solution se trouve dans les margin et le width de #coordonnees, #partenaires
mets le code que j'ai écris en entier et pas seulement une partie
c'est a dire modifie ca
#coordonnees, #partenaires{
width:245px; /**a varier pour position selon ton désir**/
margin:0 100px 0 100px; /**a varier pour position selon ton désir**/
display: inline-block;
vertical-align: top;
/****width + les margin gauche et droite doivent être toujours égal à 445px soit la moitié de 990px (width du bottom)***/
}
Un petit merci vaut mieux qu'une grande ignorance
la solution se trouve dans les margin et le width de #coordonnees, #partenaires
mets le code que j'ai écris en entier et pas seulement une partie
c'est a dire modifie ca
#coordonnees, #partenaires{
width:245px; /**a varier pour position selon ton désir**/
margin:0 100px 0 100px; /**a varier pour position selon ton désir**/
display: inline-block;
vertical-align: top;
/****width + les margin gauche et droite doivent être toujours égal à 445px soit la moitié de 990px (width du bottom)***/
}
Un petit merci vaut mieux qu'une grande ignorance
Malheureusement toujours pas !
Tant pis pour ce soir, je vais réessayer a tête reposée demain.
Merci beaucoup pour ton aide.
Tant pis pour ce soir, je vais réessayer a tête reposée demain.
Merci beaucoup pour ton aide.
J'ai trouvé une solution mais qui n'est peut-être pas faîtes 'dans les règles de l'art' !
J'ai joué sur l'image de base png en décalant le pied de 9px.
J'ai joué sur l'image de base png en décalant le pied de 9px.
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
29 oct. 2013 à 22:46
29 oct. 2013 à 22:46
bon fait ca dans #coordonnees, #partenaires
width:245px;
margin:0 0 0 200px;
la ca devrait aller
width:245px;
margin:0 0 0 200px;
la ca devrait aller
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
29 oct. 2013 à 22:58
29 oct. 2013 à 22:58
le mieux pour résoudre toi meme le positionnement c'est
1 identifier l'élément qui pose le problème
2 aller voir dans le css le code qui correspond a cet élément
3 rectifier les width margin padding
le mieux c'est de mettre a tes div un border avec une couleur definie pour chaque div qui te permet de voir son positionnement et après quand c'est bon tu enlève le border
ex
border:1px solid red; dans le css de la div
Il faut mieux aussi avoir le navigateur mozilla firefox et tu y ajoute le addon (module complémentaire) webdeveloper qui te permet de verifier une page web (code css javascript class id etc ... grace à une barre webdeveloper)
1 identifier l'élément qui pose le problème
2 aller voir dans le css le code qui correspond a cet élément
3 rectifier les width margin padding
le mieux c'est de mettre a tes div un border avec une couleur definie pour chaque div qui te permet de voir son positionnement et après quand c'est bon tu enlève le border
ex
border:1px solid red; dans le css de la div
Il faut mieux aussi avoir le navigateur mozilla firefox et tu y ajoute le addon (module complémentaire) webdeveloper qui te permet de verifier une page web (code css javascript class id etc ... grace à une barre webdeveloper)
