28111 sujets

CSS et mise en forme, CSS3

[Résolu] Je ne comprends pas la présence d'un scroll horizontal sur mo

Bonjour,

Après plusieurs heures d'essais infructueux (en cherchant dans tous mes CSS, en faisant des tests avec l'éditeur CSS de Firefox) je n'arrive toujours pas à comprendre pourquoi j'ai un scrolling horizontal qui m'amène hors de ma page...

Le site : www.jfpmicrotechnic.com

Quand je modifie sur Firefox le style
#main #fond{ width: ;
en réduisant width à 200px par exemple, le scroll disparaît ;
mais quand je fais la modif sur mon CSS ça ne change rien du tout sur Chrome ou sur Firefox ! (ou plutôt si, ça me flingue la mise en page sur Android et sur Safari...mais le scroll est toujours là).

Verriez-vous une explication, et éventuellement une solution à ce phénomène paranormal ? Smiley confus

Cordialement,
Damy
Modérateur
Bonjour,


Et bien déjà, rien que 
#head #wafer {
    width: 1173px;
    margin: 0 245px auto;
}

donne une largeur minimum de 1418px. Et j'imagine que c'est des trucs similaires sur d'autres bloc plus bas. Donc si l'écran est plus petit > scroll.

Évite de spécifier des largeurs comme ça sur tes blocs de contenus. Et si tu veux juste limiter leur taill donne leur un max-width ils ne s'étendront pas au delà.

Bonne journée
Bonjour.

Pourquoi ? C'est assez simple. Le contenu de la page est trop grande pour l'écran.

J'ai regardé pour le haut de la mise en page :
le div#wafer a une largeur de 1173px. Là-dessus, vous rajoutez une margin-left de 245px et le contenu est encore décalé puisque vous avez mis en plus un décalage vers la droite de 150px à background-position.

Pour le bas, même topo :
votre div#fond a pour largeur 1173px et il est décalé vers la droite de 245px, le div#textbg a pour largeur 890px et il est décalé de 395px...

J'enlève tout ça et je n'ai plus de scroll...

(Au passage, vous avez beaucoup d'éléments positionnés. Cela crée des complications.)

Smiley smile
Meilleure solution
Merci beaucoup pour vous réponses rapides et complètes !

Je me doutais bien que c'était en rapport avec les tailles d'éléments : j'avais d'ailleurs testé en supprimant les width:1173px mais ça ne faisait que bouleverser le positionnement sur android et safari sans supprimer la scrollbar horizontale.

Par contre je n'avais pas pensé à supprimer le margin-left et le background-position... Je teste ça en fin d'après-midi et vous fais le retour.

Bonne journée.

(pour ce qui est des éléments positionnés je ne savais pas trop comment faire autrement pour que les menus soient bien placés par rapport au bloc principal, je suppose qu'il existe effectivement des méthodes plus.. décentes Smiley smile
Modérateur
JENCAL a écrit :
Au passage, ton site n'est pas responsive.

Bah oui, si il l'était il n'aurait pas de problème de scroll horizontale du coup Smiley lol
_laurent a écrit :
Bah oui, si il l'était il n'aurait pas de problème de scroll horizontale du coup Smiley lol

Tous les jours, je vois des sites "reponsives" dotés de barres horizontales. Et pas des petits machins, MDN et compagnie, Alsacréations aussi (quoi que dans la toute dernière mouture je n'ai pas vérifié). L'origine en est souvent un contenu - imprévu par les dev' - qui dépasse, souvent un mot long dans un titre, encore plus fréquemment un lien trop long, quelquefois aussi les tableaux...
Modérateur
Un site responsive qui ne s'adapte pas bien à l'écran ? intéressant comme concept Smiley lol

Pour moi ça revient à dire qu'il n'est pas responsive (il a été loupé quoi). C'est pas parceque c'est un gros site comme MDN qu'il est plus légitime qu'un autre à être responsive alors qu'il se foire... "C'est une chambre toute bleue. Bon sauf ce mur qui est rouge. Mais bon c'est la chambre du président donc elle est toute bleue."
Mais bon question de point de vue j'imagine, c'est l'intention (du responsive) qui compte !
Je doit être un peu trop rigide Smiley ravi

Bonne journée et @Damy91 pour le positionnement oui il doit y avoir d'autres méthodes, fait en un sujet spécifique Smiley smile
Bon après des heures d'un nettoyage intensif, la scrollbar a enfin disparue !

Pour cela j'ai supprimé :

- tous les paramètres width: de mes conteneurs.
Je n'ai laissé que celui du Carrousel pour éviter que toute la mise en forme parte en cacahuète à l'intérieur des slides. (Je suppose donc que -pour faire suite au débat sur le responsive- ça réduit à néant toute possibilité que le site soit responsive).

- le background-position

- toutes les marges que j'ai remplacées margin-left: auto; margin-right: auto; ou par background-position:center; pour centrer les contenus. Je ne sais pas si c'est très orthodoxe comme méthode.

Il me reste la problématique du positionnement des menus, je vais créer un nouveau sujet comme suggéré.

Merci pour votre aide, ça m'a grandement aidé à avancer ! Smiley smile

Damy

PS: je ne note pas tout de suite le sujet comme résolu, au cas où vous verriez des améliorations ou des précisions à apporter à mes modif
Damy91 a écrit :

Pour cela j'ai supprimé :
- tous les paramètres width: de mes conteneurs.
Je n'ai laissé que celui du Carrousel pour éviter que toute la mise en forme parte en cacahuète à l'intérieur des slides. (Je suppose donc que -pour faire suite au débat sur le responsive- ça réduit à néant toute possibilité que le site soit responsive).

On peut très bien faire un carrousel responsive, voir http://osirisnet.net/centrale.htm
C'est un carrousel avec transition par fondu enchaîné sur temporisation automatique, mais on peut faire la même chose avec un autre mécanisme de transition.
Je reviens après quelques temps d'absence.
Merci PapyJP pour cette précision, et merci à tous pour vos réponses !
Au plaisir,
Damy
Sujet clos
Aller à