-
Message publié le vendredi 10 septembre 2010 - 14h24 par quentinberthelot.
-
Bonjour,
Je suis nouveau sur le forum puisque je me retrouve bloqué dans la création de mon site perso.
J'ai choisi de faire un site basé sur des galeries d'images qui défilent horizontalement, ces multiples galeries doivent défiler verticalement.
J'ai deux problèmes :
— le scroll horizontal de la 1ère galerie est bloqué, je n'ai pas trouvé pourquoi, alors que les deux autres fonctionnent correctement.
— le scroll horizontal de la page est censé ne pas fonctionner, sous Safari, il est masqué et n'agit pas, sous Firefox, il est masqué mais agit quand même.
Je sollicite votre aide pour mettre en lumière mes erreurs, afin que je puisse les corriger et comprendre pourquoi je les ai faite!
Je peux vous fournir le code source html et la feuille css (par message privé ? je ne sais pas comment ça fonctionne ici).
Merci d'avance pour votre futur réponse.
Quentin
-
Message publié le vendredi 10 septembre 2010 - 14h46 par boulaneige. 
Le mauvais goût a son droit autant que le bon goût [Friedrich Nietzsche] - http://www.boulaneige.com
-
Salut et bienvenu,
L'idéal est de mettre une page en ligne ainsi les intervenants peuvent voir toutes les données environnantes au problème et utiliser des outils pour "manipuler" et scruter le code.
-
Message publié le vendredi 10 septembre 2010 - 15h57 par quentinberthelot.
-
-
Message publié le vendredi 10 septembre 2010 - 23h22 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
alors, perso, j'ai ::
(Windob)
FF 3.6.9 :
_ comportement normal des scroll Horizontaux par galeries
_ pas de scroll vertical pour les galeries
_ pas de scroll horizontal pour le site
_ menu Haut en positon fixed (fixe dans le navigateur, toujours affiché)
SAFARI 5.0.1 :
_ comportement normal des scroll Horizontaux par galeries SAUF sur celle du Haut !... apparente, mais bloquée !
_ pas de scroll vertical pour les galeries
_ pas de scroll horizontal pour le site
_ menu Haut en positon fixed (fixe dans le navigateur, toujours affiché)
CHROME 6.0.472.55 :
Idem à Safari
OPERA 9.64
_ comportement normal des scroll Horizontaux par galeries
_ pas de scroll vertical pour les galeries
_ SCROLL horizontal pour le site
_ menu Haut en positon fixed (fixe dans le navigateur, toujours affiché)
IE 8.0.6001. .... :
_ comportement normal des scroll Horizontaux par galeries
_ SCROLL vertical pour les galeries
_ pas de scroll horizontal pour le site
_ menu Haut en positon absolute (fixe dans la page et non dans le navigateur) et problème d'alignement horizontal !
Simulation IE 7.0 depuis iE8
Idem à IE 8.0
reprenons dans l'ordre ::
Scroll horizontal inaccessible sur WebKit (chrome et safari) il semble que ce soit du à la div#header-column qui contient des éléments (tous ceux de gauche) en position absolute à une hauteur qui contraint cette div s'agrandir de manière à pouvoir les contenir. la div prend donc plus de place que prévu et passe au dessus des autres éléments.
Il serait préférable de réorganiser ton HTML pour éviter cette superposition, si cela n'est pas possible, regardes du coté de l'attribut CSS z-index il te permettra d'ordonner l'empilage des éléments HTML (dans l'axe z ;).
OverFlow ...
Opéra ne gere pas overflow-x et overflow-y donc soit tu laisse comme ça, soit tu le désactives complètement (overflow:hidden) et garde le scroll à la souris ... :s risqué !..
SOIT, tu te pose la bonne question :: pourquoi y a t-il un scroll alors que ma page ne dépasse pas de la fenêtre ?
en virant les attribut width:100% des deux divs principales (une Div à nativement cette propriété) et en plaçant width: 1050px; sur notre div#zone-work, on se rend compte que le scroll n'agit plus !...
on peux donc remettre nos paramètres pas deffaut sur le Body ! ;)
IE :: Pffff ....
Pour IE, la place restante (une fois la barre de scroll horizontale affichée) est trop courte, donc il ajoute une barre verticale, aisément désactivable avec overflow-x:scroll;overflow-y:hidden; ou en af=grandissant la fenêtre ^^ ...
IE gère mal la position Fixed, et vu le bazar qu'il y a dans l'arborescence HTML, ... c'est pas fait pour lui faciliter la vie ^^
Voila, pour ce que j'en ai vu ;)
Pour faire ceci, et comme là si justement décris boulaneige (pour triturer le code et faire des tests) tu peux utiliser les outils d'qnalise et modification du code source disponible avec l'ensemble de ces navigateurs :
IE => F12
FF => FireBug
CHROME + SAFARI => outils de développement (ou console)
Opéra Outils de développeur (opéra DragonFly)
(NB :: non, boulaneige, je n'ai pas fait exprès de mettre opéra après chrome, ... et oui, je sais que ça va te faire plaisir !)
@+&BonCode;)
-
Message publié le samedi 11 septembre 2010 - 13h47 par quentinberthelot.
-
Wouaw, je suis impressionné par la qualité de ta réponse et de ton analyse ! Merci beaucoup pour le temps que tu as du consacrer à mon problème !
Alors voilà, j'ai bien lu ton post, et j'ai par la suite décidé de réorganiser du mieux que je peux (c'est mon premier site codé entièrement par mes propres soins) mon code HTML, et j'ai également "empilé" mes div grâce au z-index. Malheureusement, le problème présent sur la première galerie reste en place sous Safari (pas sous FF) et cela malgré le fait que j'ai redimensionné de manière convenable mes div. Je ne comprends pas pourquoi ça marche sous Firefox et pas sous Safari...
Et d'après toi, mon site foire totalement sous IE... super :/
Enfin merci encore pour ta réponse, je vais continuer à essayer de résoudre le problème de scroll de la première galerie.
-
Message publié le lundi 13 septembre 2010 - 18h41 par quentinberthelot.
-
Bonjour,
Je me permets de faire un petit up, j'ai malheureusement toujours le même problème et après plusieurs tests de restructuration du code, je ne m'en sors toujours pas...
J'ai également utilisé la commande @font-face afin d'accéder à un choix typographique nouveau, j'ai choisi d'utiliser la Liberation Sans (disponible font-face kit ici :
http://www.fontsquirrel.com/fontface/generator ) et je me retrouve désormais à des problèmes de compatibilité : la typo s'affiche correctement sous Safari, mais passe en Times sous Firefox... Je crois avoir pourtant respecter toutes les recommandations pour gérer ces soucis de compatibilité, mais il n'y a rien à y faire...
Voilà, si je peux une fois de plus bénéficier de vos lumières, je suis preneur :)
Aplus
-
Message publié le lundi 13 septembre 2010 - 21h03 par quentinberthelot.
-
Après des heures d'acharnement, j'ai réglé les deux problèmes !
z-index pour le premier, ça m'a finalement sauvé :)
et pour le problème font-face, j'ai tout simplement fait des compromis !
Merci tout de même
-
Message publié le lundi 13 septembre 2010 - 21h55 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
Bin, j'ai qd même testé !... si tu repasses par là d'ici peux, tu pourra constaté les évolutions entre ton script et
le mien ... J'ai ... un peu simplifié ^^ tu pourra lire les différentes modifs, surtout au niveau CSS, j'ai assez documenté !...
@++
-
Message publié le mardi 14 septembre 2010 - 16h31 par quentinberthelot.
-
Bonjour,
Merci nours312 pour ce script ! Je peux désormais comprendre encore un tas de nouveaux trucs quant à la création d'un site de manière fonctionnelle. Je n'avais jusque là pas saisi l'utilité des class etc... Donc je te remercie une fois pour me laisser avoir accès à ce script, dont je vais plus que fortement m'inspirer pour revoir le mien et comprendre mes erreurs !
Je repasserai d'ici là une fois le site terminé ou plus tôt si j'ai un nouveau soucis :)
Merci merci merci !
A +
-
Message publié le samedi 18 septembre 2010 - 14h33 par quentinberthelot.
-
Bonjour,
Juste histoire de vous informer que mon site est terminé et en ligne, vous pouvez le trouver à cette adresse :
http://www.quentinb.fr
Merci encore pour votre aide, à bientôt !
-
Message publié le samedi 18 septembre 2010 - 16h23 par nours312. nours312.com -- je ne suis pas codeur bénévol, mais j'aide gratos ;)
-
Si tu permet, il manque toujours ceci :
#header-column {
background-color:white;
}
et sinon, pour ajouter un peu de "dynamisme" à tes cellules de photos, tu peux regarder du coté de ce script :
autoScroll
disponible aussi sur
scripteka
Il fonctionne avec la lib JS
prototype
@++
all html : Le portail des webmaster
