Discussion :

[mariaorea]

Bonjour à tous. Je suis graphiste depuis 25 ans. J'ai suivi des formations HTML, CSS et un peu de PHP et depuis 2 ans je construis des sites vitrines. Actuellement, je travaille sur un site web et j'aimerais profiter de l'avis de la communauté pour améliorer mon projet.
 Le site est en ligne. Il est loin d'être fini comme vous pouvez le constater. C'est un site vitrine pour un location de vacances. Avec une page principale qui se déroule horizontalement et 2 pages galeries photos.
voici le lien :

http://www.locationoceane40.fr/

A part sur Firefox où tout fonctionne à peu près bien, j'ai quelques bugs sur les autres navigateurs, c'est la galère.
Sur IE, Safari et également sur Chrome, la DIV contenus, une fois la page chargée, remonte.
Sur Opéra, il se produit un truc très bizarre, il charge la page, se position sur le début (la partie accueil) et aussitôt après il saute et va à la partie réservation.
J'espère que je suis claire.
Tous ces problèmes sont apparus, il me semble, depuis que j'ai transformé la page en php à cause du formulaire contact.
Si quelqu'un peut jeter un œil et me dire ce qui ne va pas, cela m'aiderait.
Merci infiniment, par avance.

[livaneti]

c'est simplement le site qui est trop trop large pour tous les web browsers... ton site a une width: 8540px; c'est impossible que ça s'affiche normalement... au lieux de faire des appels de pages horizontale il faut penser a utiliser Jquery Slider ça serais mieux est plus Friendly...

[mariaorea]

Bonjour Livaneti et merci pour ta réponse.
Je viens de visiter sur internet plusieurs démo de ce Jquery Slider et en effet c'est exactement ce qu'il me faut.
Puis-je me permettre de te demander si c'est simple de l'intégrer dans mon code ?
merci encore

[livaneti]

oui c'est facile de l'intégrer il faut juste modifier un peu les noms de tes DIV, ajouter les fichier jquery et codes javascript/css pour finaliser l'animation, pour débuter tu peux voire cette exemple complet :

http://kevinbatdorf.github.com/codaslider/

c'est un script gratuit a télécharger et utiliser il te faut juste comme j'ai dis l'adapter a ton code...

[mariaorea]

Merci beaucoup, je vais essayer de le faire, mais tout est en anglais j'ai un peu de mal, enfin je m'y mets. Je te dirais. Bon dimanche.

[DezMax]

Tu peut facilement t'en sortir grâce à ce tutoriel qui explique bien , tu peut toujours faire plus simple en utilisant directement Javascript/CSS .
Si tu n'y arrives pas n'hésite pas je t'aiderais à le faire

Pour jQuery :
http://www.finalclap.com/tuto/cours-jquery-61/
==> Plus précisement cette page : http://www.finalclap.com/tuto/cours-.../animation-65/

Pour JavaScript bref exemple qui affiche ou cache mais qui ne slide pas comme on peut le faire avec JQuery.

C'est un code que j'utilise pour mon futur site personnel , dans le code suivant il y avait 4 conteneur différents, je devais afficher chaque conteneur en fonction de la valeur du lien selectionner (au passage de la souris) et donc par défaut j'affiche le "conteneur 1" ;si la personne va sur le lien 2 alors sa cache tout les conteneur 1,3,4,5 et sa affiche le conteneur 2 .

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type="text/javascript">
 
 
 
            function showC(value){
 
 
 
                    for(var x = 0;x<5;x++){
                    var idc = document.getElementById("c" + x);
                    idc.style.display = 'none';
                    }
 
 
                    var idl = document.getElementById("c" + value);
                    idl.style.display = 'block';
 
 
             }
 
 
        </script>

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
            <a value="0" onmouseover="showC(this.getAttribute('value'));">Lien 1</a>
            <a value="1" onmouseover="showC(this.getAttribute('value'));">Lien 2</a>
            <a value="2" onmouseover="showC(this.getAttribute('value'));">Lien 3</a>
            <a value="3" onmouseover="showC(this.getAttribute('value'));">Lien 4</a>
            <a value="4" onmouseover="showC(this.getAttribute('value'));">Lien 5</a>

Les conteneurs :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div style="display:block;" id="c0">Mon contenu 1</div>
<div style="display:none;" id="c1">Mon contenu 2</div>
<div style="display:none;" id="c2">Mon contenu 3</div>            
<div style="display:none;" id="c3">Mon contenu 4</div>
<div style="display:none;" id="c4">Mon contenu 5</div>

Désolé si mes explications ne sont pas claires je peut tenter de te réexpliquer.

[livaneti]

Merci beaucoup, je vais essayer de le faire, mais tout est en anglais j'ai un peu de mal, enfin je m'y mets. Je te dirais. Bon dimanche.

ben désolé tous les sites que je fais sont en anglais et je travail qu'avec ça... mais en tout cas l'exemple de DezMax est facile aussi.. bonne chance