Page qui bouge

Suivre ce topic
Ce topic est suivi par : Personne...
Ce topic a été résolu
Swarrone

Swarrone Le 7 septembre 2019 à 23:06 (Édité le 8 septembre 2019 à 21:40)

Bonjour,

comme vous pourrez le voir sur le screen ci joint, une page blanche est normal mais dès que je rajoute une seule div ou p ou quoi que se soit, la barre en bas pour bouger de droite a gauche apparaît. Je ne sais pas comment faire pour l'enlever sans rien mettre 

Merci d'avance 

Profil introuvable

Profil introuvable Le 8 septembre 2019 à 21:40

Re:

Alors juste une question : pourquoi au niveau de ".bandeau" tu lui mets une largeur de 1000 pixels ? Je crois que c'est cela qui provoque l'affichage de la barre de défilement.
Sinon ce que tu peux faire aussi c'est d'appuyer sur "F12" de ton clavier et cliquer sur le logo d'une flèche (à côté de l'onglet "Elements") avec le curseur de la souris, l'inspecteur te montrera tous les éléments interpréter par le navigateur avec une zone bleu.
Meilleure réponse
Profil introuvable

Profil introuvable Le 7 septembre 2019 à 23:57

Hello @Swarrone,

Si la barre de défilement s'affiche c'est qu'il y a un problème avec ton code... Peut-tu me/nous le montrer ?
N'oublie pas de mettre tes autres topics en "Résolu" si tu n'as plus besoin d'aide sur ceux-ci.
Swarrone

Swarrone Le 8 septembre 2019 à 10:33 (Édité le 8 septembre 2019 à 10:36)

Profil introuvable

Profil introuvable Le 8 septembre 2019 à 20:10

Re:

OK, peut-tu me/nous montrer le code CSS ?
Swarrone

Swarrone Le 8 septembre 2019 à 20:37

a
{
   color: black;
   text-decoration: none;
   padding: 0 6px;
   transition: opacity .3s;.
   opacity: 0.4;
}
a:hover
{
   opacity: 1;
   color: #FFFFFF;
   transition: 0.4s;
}
.bandeau
{
   width:1000px;
   height:100px;
   background:#226ca8;
   position:relative;
   left:-10px;
   top:-10px;
}
.logo
{
   font-family: OPTICubaLibre;
   font-size: 80px;
   text-decoration: bold;
   position:relative;
   bottom:102px;
   left:15px;
   color: #b30000;
   -webkit-text-stroke: 2px;
   -webkit-text-stroke-color: #000000;
}
.FR
{
   font-family: OPTICubaLibre;
   font-size: 80px;
   text-decoration: bold;
   position:relative;
   bottom:192px;
   left:225px;
   color: #000000;
}
Swarrone

Swarrone Le 8 septembre 2019 à 20:38

voila 
Swarrone

Swarrone Le 8 septembre 2019 à 21:39

Bonjour et merci d'avoir prit le temps de lire mon problème et mes script, j'ai finalement analyser le pb avec la console élément, les deux "test" s'étendaient sur la largeur et seul un `width:500px;` a suffit a régler mon problème 

Bonne soirée et merci encore
Profil introuvable

Profil introuvable Le 8 septembre 2019 à 21:40

Re:

Alors juste une question : pourquoi au niveau de ".bandeau" tu lui mets une largeur de 1000 pixels ? Je crois que c'est cela qui provoque l'affichage de la barre de défilement.
Sinon ce que tu peux faire aussi c'est d'appuyer sur "F12" de ton clavier et cliquer sur le logo d'une flèche (à côté de l'onglet "Elements") avec le curseur de la souris, l'inspecteur te montrera tous les éléments interpréter par le navigateur avec une zone bleu.
Meilleure réponse
Profil introuvable

Profil introuvable Le 8 septembre 2019 à 22:06 (Édité le 8 septembre 2019 à 22:08)

Re:

Oups alors on a répondu en même temps 😅
Bon je m'en doutais que c'était ça qui provoquait l'affichage de la barre de défilement. Pour adapter ton site à tous les écrans, tu dois utiliser la notion du Responsive Design 😉
Tu n'auras plus de problème de ce genre 😉
Après il y a aussi cette soluce en CSS :

overflow-x: hidden;

Qui masque la barre de défilement horizontale, mais tu dois vérifier avant ce qui provoque l'affichage de celle-ci avant d'utiliser ce code 😉

Bonne continuation ! 😉
Swarrone

Swarrone Le 8 septembre 2019 à 22:06

C'est justement ce que j'ai fait et le .bandeau est la barre bleu qui doit traverser toute la page et ou je suis en train de placer les différents boutons .... ^^
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte