28111 sujets

CSS et mise en forme, CSS3

[Résolu] Supprimer marge blanche

Bonjour,
J'ai un petit problème de marge sur mon article version mobile.
En effet, je voudrais qu'il prenne toute la largeur de la page mais le #bloc_page{width: 90%} l'en empêche. J'ai mis à mon article un width: 100vw; pour qu'il prenne la largeur de la page mais il dépasse de la page et la marge gauche reste.
Impossible de le caler avec un right: 0; ou un left: 0;
Je ne sais pas qu'elle valeur mettre dans margin-left pour palier à ce problème.
Pour l'instant, il a ce code inutile : margin-left: calc((100% * 10%/9%) / -20%);
La largeur 100% est égale à 90% de la largeur réelle que je multiplie par 10/9 pour qu'il fasse la largeur réelle, le tout divisé par -20, ce qui donne une marge réelle de -5% normalement, mais le margin-left est comme inexistant.
Margin: 0; et Padding: 0; ne change rien.
Voulez-vous des codes ?
Merci de votre aide !
Modérateur
Bonjour,

S'il s'agit de https://iconic-i-clash.com/ tu as 2 (au moins) problèmes :

1) Par défaut, la balise <body> peut avoir un margin et un padding (ça dépend des navigateurs éventuellement). Il faut mettre margin:0 et padding:0 sur la balise body.

2) Ton <h1> contient
<h1><strong>Nous&nbsp;sommes&nbsp;des&nbsp;GEEKS&nbsp;!</strong></h1>

Or il n'y a pas assez de place pour afficher cette chaine de caractères sur les écrans étroits, et les &nbsp; empêchent les retours à la ligne.

De plus, d'une manière générale, tu ne devrais pas utiliser &nbsp; pour empêcher un retour à la ligne. Tu devrais utiliser l'instruction css white-space:nowrap. Par exemple :
h1 { white-space:nowrap;}

Mais comme dit plus haut, c'est une mauvaise idée pour les écrans étroits.

En résumé, supprime les margin et padding sur le<body>, et retire les &nbsp; dans le <h1> et teste si c'est bien ça.

EDIT: tu as aussi un max-width:90% qui traine dans le style de #banniere_image (max-width est prioritaire sur width)

Amicalement,
Modifié par parsimonhi (27 Feb 2021 - 08:22)
Meilleure solution
Ok, merci beaucoup, mon problème est réglé pour mon article !
Cependant, ma version mobile est moche car il n'y a plus aucune marge à cause de mon width auto et si je fais width 95%, mon article se redécale.
Sait-tu comment appliquer un width 95% sur tout sauf l'article ?
Merci
Modérateur
Bonsoir.

le plus simple est probablement d'enlever tous tes width , au moins ceux de 90 a 100% et de faire un reset sur tout les margin et padding.

Une fois cela fait, tu peut soit mettre un margin, soit un padding horizontal sur le parent principal de la zone que tu veut décoller des bords. Ce sera plus simple à effectuer et aligneras tout ses enfant en même temps. par exemple section {padding:0 2.5%} hx,p, ul,li , ... ont tous des margin ou padding par défaut. un reset global est plus facile à gérer que d'ajouter un width/margin/padding approximatif ici ou là Smiley smile

Cdt
Modifié par gcyrillus (28 Feb 2021 - 21:09)
Ok, merci beaucoup, c'est très intelligent comme technique et elle marche.
Grâce à vos réponses, j'y vois beaucoup plus claire.
Vous êtes également hyper sympa de me répondre, vous m'avez résolu un sérieux problème.
Bonne fin de soirée !
Sujet clos
Aller à