[Résolu] placement du footer

Bonjour,

Je met permets de solliciter votre aide pour un petit soucis que je rencontre avec le placement du footer-nav.

Je m'explique, avec une taille d'écran de min 1400 pixels, aucun probleme il s'aligne au centre... Mais une fois que cette résolution diminue, le footer-nav se déplace en fonction de la distance qu'il y a à gauche et se décale donc du corps.
C'est logique me direz-vous, mais je ne trouve pas le moyen pour qu'il saligne par rapport au corps..

#footer{
	background:url(images/footer-bg.jpg) no-repeat 50% 0;
	width:100%;
	overflow:hidden;
	padding:381px 0 0;
	margin:-351px 0 0;
}

.foot-nav{

	background:url(images/foot-nav-hold.png)  no-repeat;
	width:600px;
	height:45px;
	float:left;
	overflow:hidden;
	font-size: 0.9em;
	text-transform:uppercase;
	color:#444242;
	list-style:none;
	padding:15px 0 0 220px;
	margin: 0 23px 15px 430px;

}

J'ai placé ce div à la fin car sinon j'ai quelques bugs avec le footer

	
	 </div>
  </div>
</div>
</div>
        <!-- footer part -->
       
	<div id="footer">
		<div class="foot-nav"><strong>Copyright © 2010 </strong>        </div>
    </div>

</body>
</html>

Voici ce que cela donne en image :

Résolution au delà de 1400 de large :

http://nsa12.casimages.com/img/2010/02/08/mini_10020807303624726.jpg

Résolution en deçà de 1400 de large :

http://nsa13.casimages.com/img/2010/02/08/mini_100208073123451551.jpg


Voila, merci d'avance
Modifié par Jerome-k (19 Feb 2010 - 13:42)

Bonjour et merci pour ta réponse.

J'ai défini margin car sinon le footer ne se place pas à l'endroit voulu..

En fait, je crois avoir une piste de réponse...

Tu as définit la largeur de ton #footer à 100%. De fait, définir ta margin à auto ne sert à rien puisque ton bloc prend déjà tout l'espace disponible dans la page.

De fait, si tu définis la largeur de ton #footer à une largeur fixe* et que tu y applique une margin auto, ton footer devrait alors être centré.



* (avec les CSS c'est facile à modifier si jamais tu décide d'agrandir ton footer par la suite, alors aucun problème de ce côté)

Encore re-merci de l'intervention

#footer{
	background:url(images/footer-bg.jpg) no-repeat 50% 0;
	width:1150px;
	overflow:hidden;
	padding:381px 0 0;
	margin:-351px 0 0;
}

.foot-nav{

	background:url(images/foot-nav-hold.png) no-repeat;
	width:600px;
	height:45px;
	float:left;
	overflow:hidden;
	font-size: 0.9em;
	text-transform:uppercase;
	color:#444242;
	list-style:none;
	padding:15px 0 0 220px;
	margin:auto;
}

Dans ce cas, le footer et le footer-nav reste figé à la même place, de ce fait ils ne suivent pas le mouvement du corps...

Je ne me suis peut-être pas bien exprimé, c'est le footer-nav qui me pose problème, le footer lui est bien placé...

Je pourrai l'intégrer dans l'image du fond mais malheureusement j'ai besoin de texte pour faire un lien

Bon, le plus facile quand on arrive sur un pépin est de tout remettre à zéro pour recommencer. Dans ton cas, tu as plusieurs attributs de positionnement utilisé et plusieurs entrent en conflit avec les solutions que tu tente d'apporter.

J'ai repris ton exemple et l'ai simplifié un max, normalement sous cette forme tout est centré peu importe la largeur de ta page:

(j'ai d'ailleurs enlevé le float:left de .foot-nav qui posait problème de positionnement)

#footer{ 
    width:100%; 
    padding:0; 
    margin:0;
} 
 
.foot-nav{ 
    width:600px; 
    height:45px; 
    padding: 0; 
    margin: auto; 
    text-align: center;
} 

(Après la question qui subsiste est de savoir si tout s'aligne avec tes images)

J'avais deja essayé mais dans ce cas mon footer ne s'affiche pas, je dois avoir un conflit avec le code plus haut, sinon le foot-nav lui se place correctement...

#footer{  
	background:url(images/footer-bg.png) no-repeat;
    width:100%;  
    padding:0;  
    margin:0; 
}  
  
.foot-nav{  
	background:url(images/foot-nav-hold.png)  no-repeat;
    width:600px;  
    height:45px;  
    padding: 0;  
    margin: auto;  
    text-align: center; 
} 

Si ton div précédent est en float et qu'il couvre ton footer (raison pour laquelle tu l'aurais lui même mis en float), le code pour règler le problème est le suivant:

#footer {
clear: both;
}

Justement, pour éviter au max les problèmes de ce genre, je l'ai sorti de toutes les divs...

Mais ta précédente remarque était juste, j'ai supprimé un float d'un élément de mon menu de droite et c'est rentré dans l'ordre...

Un tout grand merci pour ton aide, tu m'as sorti d'un gros pétrin!!

Excellente soirée à toi

Ah, parfait! Bonne chance pour la suite!

Re-bonjour,

Merci Vaxilart, à toi aussi bonne continuation,...

En fait, je me permets de reposter a la suite de mon précédent topic afin de ne pas encombrer le forum...

Mon problèmes est le suivant, je code un design perso... C'est encore très brouillon, mais j'ai un problème avec le fond. J'aimerai que mon header continue sur le coté, c'est pourquoi j'ai fait des morceaux qui se juxtaposent. Sur ma résolution de 1440x900 ca passe très bien, mais une fois qu'on change de résolution, le header se centre et donc il y a un décalage avec le fond... Hors j'aimerai que celui-ci bouge avec le header... Pas moyen de trouver...

Voici le début : http://www.coiffure-styling.com/nature/idea.htm

Comme vous pourrez le constater, lorsque vous réduisez la fenetre de votre navigateur, le fond ne s'accorde plus...

Le CSS se présente comme suit :

html{background-image:url(Simages/html.gif); 
background-color:#002738}
body{
	background:url(images/body.jpg) repeat-x;
	min-width:900px;
	font:13px Arial, Hevetica, sans-serif;
	margin:0;
	position:relative;
	padding:-230px;
	margin:0;
}

Merci d'avance

Par défaut, ton fond se colle en haut à droite. Pour que l'effet se tienne, il faut que lorsque tu rapetisse le navigateur, le fond de body reste centrer (comme ça ton navigateur bouffe le fond par les deux côtés et non seulement de la gauche.)

En pratique:

html{background-image:url(Simages/html.gif) top center;  

Ainsi, ton image de fond sera centré et suivra l'image de ton div.

Salut,

j'avoue ne pas avoir lu les posts précédents mais ce n'est pas :

Vaxilart a écrit :

html{background-image:url(Simages/html.gif) top center;  

... c'est :

html { background: url(Simages/html.gif) top center; }

Modifié par Heyoan (09 Feb 2010 - 21:04)

En effet! Merci du retour, je n'avais pas regardé le nom de l'attribut pensant bêtement que c'était simplement background

Merci encore pour ton aide Vaxilart... Mon problème était grottesque

Malheureusement, je rattrape le même problème qu'avant avec le texte "copyright 2010" , il ne se déplace pas avec le corps lorsque l'on réduit la fenêtre...

Pire encore, sous IE c'est le footer entier qui ne s'affiche pas au bon endroit et qui change de place quand on réduit la fenêtre...

Ce problème m'exaspère vraiment, j'ai essayé comme je pouvais mais rien à faire, je n'arrive pas à corriger le problème...

Re-voici le lien : http://www.coiffure-styling.com/nature/idea.htm

Je ne sais pas si pour celles et ceux qui souhaite m'aider si ils préfèrent voir le code directement du site ou si je dois tout copier coller ici...

Merci d'avance

Je ne sais pas si tu connais Firebug, ça risque de t'être très utile. En inspectant les balises, tu trouveras rapidement le problème.

Sur le cas de ton footer, la réponse est la même que celles que je t'ai donné précédemment... Les modifications, si elles ont été faites, n'ont pas été prises en compte par le site en ligne.

En gros, si nous reprenons les principes du centrage:
1- Ton élément doit avoir une largeur définie.
2- Le but du centrage étant de permettre à un élément de se retrouver au centre peu importe la résolution, tu ne peux évidemment pas centrer ton élément en lui donnant des margin ou des padding fixes.
3- En gros, tu as deux options habituelles: les "margin: auto;" pour un bloc et un "text-align: center;" pour le contenu.

Concernant ton cas de footer, tu n'as qu'à rappliquer le code que je te donnais plus haut le concernant.

Au juste, tu code à la main ou avec un éditer WYSIWYG?

(Et le design, tu l'as fait toi même?)

Décidément, si tu serais de ma région, j't'aurai payé un verre... Encore merci de m'aider...

Je possède firebug... Mais même avec je trouve pas toujours

Pour les modifications, tu parles du clear:both?... J'ai essayé tout ce que tu m'as dit, mais rien a faire...

J'ai mis a jour, seul le problème du copyright est réglé mais j'ai toujours le problème avec l'alignement du fond (body) et le footer... j'arrive à l'aligner avec les padding et margin dans FF mais quand je regarde apres dans IE il y a un tjs un décalage... http://www.coiffure-styling.com/nature/idea.htm

En plus , chose que je comprend encore moins, c'est que quand je test en local, le footer se place bien et quand je met sur le ftp, ca ne m'affiche pas du tout pareil...

J'utilise notepad ++ et oui le design est de moi, enfin c'est du painting et un peu de photomanip... Comme tu as pu le constater j'suis novice en codage, j'essaye d'apprendre par ci par la mais y a tjs beaucoup de choses qui m'échappent
Modifié par Jerome-k (11 Feb 2010 - 08:18)

Ton graphisme est magnifique.

(En effet, super design!)

Présentement, quand je regarde ton site avec FF et IE, tout est bien aligné sans problème... Tu as retiré les sections posant problèmes ou tu as réussi à arranger le tout?


En gros, le principe est que tu ne peux pas centrer un bloc en utilisant le padding et le margin définie car ces valeurs sont relatives à la résolution de l'écran. Alors, la solution la plus simple pour centrer un bloc sur toutes les résolutions est de lui donner une taille définie inférieure à 100% (dans ton cas, ce sera de lui donner la taille de l'image en background que tu souhaite y intégrer) et de lui donner des margin left et right automatiques. Ce faisant, tu dois évidemment mettre les paddings et les autres margins verticaux avec une valeur de 0px, autrement tu fausseras le centrage du bloc.

Ensuite, si tu fais ça, et que tu as un problème de centrage encore, revient avec ton code et on pourra étudier des solutions en positionnement relative ou absolute.

Merci jb_gfx ca me touche beaucoup.

Valixart : Merci
Alors, j'ai en effet changé l'image de mon fond car je n'arrivais absolument pas à accorder le fond du body et le fond de footer... Quoique je fasse il y avait toujours un décalage vertical soit sur IE soit sur FF. L'image est agrandie horizontalement et le chargement perd en ergonomie, mais je n'ai pas trouvé mieux.

Pour le footer-nav par contre, je crois avoir bien saisi la bête logique J'ai adapté ce que tu m'avais expliqué sur ce design et sur le premier également.

Maintenant tout va "presque" bien, j'ai téléchargé IE 8 hier (pour ne pas voir une version trop récente) et résultat, le reflet du soleil en flash ne marche pas et sur mon autre design idem avec une anim de papillon.

De plus, l'espace au dessus du titre "Lorem Ipsum dolor sit amet" diffère selon FF et IE8... Je ne comprends pas pourquoi

Enfin bon, ce sont des broutilles (mais ca me gratte de ne pas comprendre ), mes problèmes conséquents ont été résolu grâce à toi et je t'en remercie encore!

Bonne continuation
Modifié par Jerome-k (11 Feb 2010 - 22:37)