28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je viens de découvrir un problème de scrollbar horizontal et un énorme espace blanc à droite sur un site que je n'avais pas avec IE6 (et qui n'existe pas sur FF).

http://www.cfdt-fotophone.com

Si vous savez d'où ça vient, parce que je panique Oo'

Merci d'avance !
Modifié par sanosuke85 (07 Feb 2007 - 10:16)
Je reviens à vous afin de savoir si personne ne connaîtrait une explication à cela... Je n'ai rien trouvé sur le web avoisinnant cette question.. Je pensais un soucis générique mais j'ai peur de me tromper...

PS : sur le lien donné en haut j'ai pour l'instant mis au body un overflow:hidden; étant donné que l'overflow ne se fait que dans une div... Mais ça ne résoud pas mon problème dans l'administration par exemple.

Merci d'avance !
Bonjour,

Désolé mais ton lien est mort et quand on parvient enfin sur le site, je ne vois pas de problème puisqu'apparemment tu l'as réglé ! Smiley biggol Smiley biggol Smiley biggol
Bonsoir, j'ai rectifié le lien Smiley cligne

Pour ce qui est du site, oui et non : j'ai laissé overflow:hidden sur le site visible donc oui.

Mais non car dans l'administration (non accessible Smiley cligne ) je me retrouve à nouveau avec la barre horizontale présente. Si je laisse overflow:hidden sur body, sur IE ça la vire, mais sous FF ça vire aussi la barre de droite... Donc ce n'est pas la bonne solution Smiley decu
Re,

AMHA, il faudrait remettre un peu d'ordre dans ton code c'est à dire correctement l'indenter, utiliser des id pour les blocs uniques et des class pour des blocs multiples sur la même page. Ensuite utiliser les doubles quotes pour nommer tes class (sinon le jour où tu utilises un poil de php, tu sera perdu!). Utilises aussi les balises adéquates (non <p> au lieu de div par exemple le footer ni de div vide pour sortir de float, hr c'est plus sympa)

Un fois que tu auras fais cela tu t'apercevras entre autre que ton bloc contenu ne contient pas le contenu mais ton bloc photos.

Au niveau squelette compte tenu de ta mise en page :
bloc contenu
bloc header/ fin header
bloc photo (float:left)/ fin photo
bloc menu (float: right)/ fin menu
bloc centre (overflow: auto et hight fixe)/ fin centre
bloc footer (clear: both)/ fin footer
fin contenu

Le problème c'est que tu as 2 scroll verticaux (pas glop), alors là 2 solutions ou tu passes ta page en height 100% et la faut revoir toute la mise en page pour qu'aucun bloc ne dépasse la hauteur (gauche et droite)
ou tu supprimes l'overflow: auto et le height fixe sur ton bloc centre et tu le laisses pousser ton footer avec eventuellement un retour top entre chaque new, là tu conserves ta mise en page. Cette solution est la plus robuste et la moins contraignante pour ton code.

Ouf, voilou
Merci pour tous ces éléments d'information !

Je voudrais savoir si tu peux préciser ce que tu appelles indenter (est-ce décaller ?).

EDIT : trouvé Smiley cligne mise en page des éléments en block et en ligne du code source et du document en lui-même ^^

Sinon effectivement il serait bon que je remette en place le code de façon "propre". J'ulisais le validateur d'accessibilité pour la norme W3... Que fut ma surprise lorsque j'allais sur un véritable validateur Smiley cligne Bref y'a du boulot. Donc pour toi ma scroll barre horizontale viendrait de tout cela ?

Je dois finir un contrat. Je me mettrai ensuite sur la remise en page de tout cela ! Merci pour tes conseils Smiley cligne
Modifié par sanosuke85 (07 Feb 2007 - 09:45)
Bon et bien j'ai trouvé la solution.

J'ai repris mon code. Mes bannières possèdent des <div> en float. Finalement, c'est cela qui a généré l'écart à droite. J'ai donc viré les float, mis les éléments en display:block avec les alignements adéquats, et voilà Smiley cligne