28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problèmes de dimensions avec position:fixed

Bonjour,

j'ai un élément footer qui inclue un 
<nav>
avec un 
<ul>
en pied de page. Quand je positionne mon <nav> avec l'attribut 
{position:fixed; bottom :0;  right:0;}
je suis confronté à un problème.


Mon élément nav inclut un background-color en rgba. Il prends tout l'espace du footer cad width:100% et dès que j'applique {position:fixed}, il déborde du footer sur la droite d'environ 40px. Mes margin et padding sont à zéro.

Je suis de niveau débutant, aidez moi svp.

Merci
Avec le position fixed, ton élément nav prend sa source à la racine du document, en bas à droite de ta fenêtre, peu importe son conteneur.

Pour positionner ton nav par rapport au footer, tu devrais utiliser une position absolute sur le nav et une position relative sur le footer.
Merci pour vos réponses. Je joins le lien Jsfiddle: https://jsfiddle.net/tankarasu/0b78chv1/11/

En fait GaelGerard, je souhaiterais avoir un footer de la largeur du blocpage ou du body, qui se retracte et appariait au survol de la souris (ou d'un clic pour activer/désactiver l’état du footer).

le contenu sera très long et c'est pour sa que j'aimerai pouvoir y accéder d'une manière pratique.
Modérateur
D'apres ton jsfiddle il te manque un left ou un right à 0 sur navfooter pour qu'ils prennent toute la taille de l'écran.

Si tu veux que ton footer fasse la meme taille que blocpage par exemple, il faut lui donner la meme largeur à savoir 90% :
 #blocpage {
    background: #d0ebd3;
    width: 90%;
    margin: auto;
    box-shadow: 0 5px 10px black;
}

Et pour le centrer soit mettre left à 5% soit mettre left ET right à 0 plus un margin auto.

Donc 
.navfooter {
	position:fixed;
  	bottom:0;
	width:90%;
  	left: 0;
  	right:0;
  	margin:auto;
    	padding:0;
	z-index:10;
	background-color:rgba(0,0,0,0.9);
}


Il reste un petit décalage du au margin 8px de ton body. 
margin:0 px;

il y a un espace entre le 0 et le px ca fait planter la ligne.
_laurent a écrit :
D'apres ton jsfiddle il te manque un left ou un right à 0 sur navfooter pour qu'ils prennent toute la taille de l'écran.

Si tu veux que ton footer fasse la meme taille que blocpage par exemple, il faut lui donner la meme largeur à savoir 90% :
 #blocpage {
    background: #d0ebd3;
    width: 90%;
    margin: auto;
    box-shadow: 0 5px 10px black;
}

Et pour le centrer soit mettre left à 5% soit mettre left ET right à 0 plus un margin auto.

Donc 
.navfooter {
	position:fixed;
  	bottom:0;
	width:90%;
  	left: 0;
  	right:0;
  	margin:auto;
    	padding:0;
	z-index:10;
	background-color:rgba(0,0,0,0.9);
}


Il reste un petit décalage du au margin 8px de ton body. 
margin:0 px;

il y a un espace entre le 0 et le px ca fait planter la ligne.


je te remercie Laurent, j'ai fait les modifications et sa marche, merci aux autres aussi, c'est très gentil.
Modifié par tankarasu (18 May 2019 - 18:45)
Meilleure solution
Sujet clos
Aller à