Affichage sur navigateurs

**mariaorea** · 04/01/2013, 16h47

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** · 04/01/2013, 23h54

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** · 05/01/2013, 10h32

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** · 05/01/2013, 17h56

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** · 06/01/2013, 09h12

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** · 07/01/2013, 20h43

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** · 07/01/2013, 22h02

Envoyé par 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.

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

**mariaorea** · 08/01/2013, 10h15

bonjour et un grand merci à tous les deux.
je m'y remets, je reviendrais vers toi DezMax si je suis en difficulté.
Bonne journée à vous deux.

**mariaorea** · 08/01/2013, 13h08

Voilà DezMax, j'ai tenté ton code sur un site perso, toujours en navigation horizontale, et j'ai pas dû bien comprendre car ça marche pas, voici le HTML et le CSS à la suite :

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Essai site avec JavaScript</title>
<link href="reset.css" rel="stylesheet" type="text/css" media="all">
<link href="stylessai.css" rel="stylesheet" type="text/css" media="screen">
</head>
 
<body>
	<div id="global">
		<div id="contenus">
	<ul id="menu">
		<li><a value="0" onmouseover="showC(this.getAttribute('value'));"></a>lien 1</li>
		<li><a value="1" onmouseover="showC(this.getAttribute('value'));"></a>lien 2</li>
		<li><a value="2" onmouseover="showC(this.getAttribute('value'));"></a>lien 3</li>
		<li><a value="3" onmouseover="showC(this.getAttribute('value'));"></a>lien 4</li>
		<li><a value="4" onmouseover="showC(this.getAttribute('value'));"></a>lien 5</li>
	</ul>
 
 
		<div id="c0">
		<p>contenu 1</p>
		</div>
 
		<div id="c1">
		<p>contenu 2</p>
		</div>
 
		<div id="c2">
		<p>contenu 3</p>
		</div>
 
		<div id="c3">
		<p>contenu 4</p>
		</div>
 
		<div id="c4">
		<p>contenu 5</p>
		</div>
 
		</div>
	</div>
 
<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>
</body>
</html>

Et le CSS accroché :

Code css :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
@charset "UTF-8";
/* CSS Document */
 
 
html {
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
}
 
body {
	/* [disabled]width: 6130px; */
	background-color: #cdc0b0;
}
 
#global {
	height: 640px;
	width: 5000px;
	position:absolute;
	top:50%; 
	margin-top:-320px;
	overflow: auto;
}
 
#contenus {
	height: 600px;
	margin-top: 20px;
	overflow: hidden;
}
 
#menu {
	background-color: black;
	color: #fff;
	height: 600px;
	left: 0;
	position: fixed;
	width: 230px;
	z-index: 1;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
#menu li {
	padding: 15px 0 0 20px;
}
 
#c0, #c1, #c2, #c3, #c4 {
	width: 1000px;
	float: left;
	height: 600px;
	color: #fff;
}
 
#c0 {
	background-color: brown;
	display:block;
}
 
#c1 {
	background-color: green;
	display:none;
}
 
#c2 {
	background-color: red;
	display:none;
}
 
#c3 {
	background-color: purple;
	display:none;
}
 
#c4 {
	background-color: yellow;
	display:none;
}

Voilà je sais pas trop quoi dire...

**NoSmoking** · 08/01/2013, 18h43

Bonjour,
GROS problème de compréhension du HTML

Code :

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

<li><a value="0" onmouseover="showC(this.getAttribute('value'));">lien 1</a></li>

la balise A doit encadrer le texte lien 1.

Perso je ne vois pas l'intérêt de mettre une balise A dans le LI, de plus autant créer un pseudo-attribut valide via data-value et ne pas utiliser un attribut non valide.

Enfin il va te falloir écarter les DIV devenu visible du bord gauche pour qu'ils soient entièrement visibles.

**DezMax** · 08/01/2013, 20h14

ce script fonctionne il faut seulement que tu mette le javascript dans l'entête

en revanche j'ai fais une erreure comme l'a dit "NoSmoking"
voici le corrigé :

Code HTML :

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

1
2
3
4
5
6
 
<div class="menu" style="background-color: #9adaff;"><a data-value="0" onmouseover="showC(this.getAttribute('data-value'));">Réalisations</a></div>
            <div class="menu" style="background-color: #61c5ff;"><a data-value="1" onmouseover="showC(this.getAttribute('data-value'));">Langages</a></div>
            <div class="menu" style="background-color: #00b3fe;"><a data-value="2" onmouseover="showC(this.getAttribute('data-value'));">Réseaux sociaux</a></div>
            <div class="menu" style="background-color: #61c5ff;"><a data-value="3" onmouseover="showC(this.getAttribute('data-value'));">Projets</a></div>
            <div class="menu" style="background-color: #9adaff;"><a data-value="4" onmouseover="showC(this.getAttribute('data-value'));">Contact</a></div>

pour les balises "<li></li>" je te laisse faire

merci à "NoSmoking" de me l'avoir rappelé
Bovino me l'avais aussi dit
http://www.developpez.net/forums/d12...re-javascript/

**mariaorea** · 09/01/2013, 09h23

Bonjour et merci encore,
"NoSmoking", concernant la balise a, grosse erreur d'inattention, sans doute un peu de saturation

Je mets mes menus dans des <ul></ul> comme on me l'a appris en formation, mais je suppose qu'on peut faire autrement, dans des DIV comme dans l'exemple de DezMax.
J'ai encore tellement à apprendre...
Voilà, maintenant le principe marche. regardez !

Code :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Essai site avec JavaScript</title>
<link href="reset.css" rel="stylesheet" type="text/css" media="all">
<link href="stylessai.css" rel="stylesheet" type="text/css" media="screen">
<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>
</head>
 
<body>
	<div id="global">
		<div id="contenus">
		<div id="menu">
		<div class="menu" style="background-color: #9adaff;"><a data-value="0" onmouseover="showC(this.getAttribute('data-value'));">Réalisations</a></div>
		<div class="menu" style="background-color: #61c5ff;"><a data-value="1" onmouseover="showC(this.getAttribute('data-value'));">Langages</a></div>
		<div class="menu" style="background-color: #00b3fe;"><a data-value="2" onmouseover="showC(this.getAttribute('data-value'));">Réseaux sociaux</a></div>
		<div class="menu" style="background-color: #61c5ff;"><a data-value="3" onmouseover="showC(this.getAttribute('data-value'));">Projets</a></div>
		<div class="menu" style="background-color: #9adaff;"><a data-value="4" onmouseover="showC(this.getAttribute('data-value'));">Contact</a></div>
		</div>
 
		<div id="c0">
		<p>contenu 1</p>
		</div>
 
		<div id="c1">
		<p>contenu 2</p>
		</div>
 
		<div id="c2">
		<p>contenu 3</p>
		</div>
 
		<div id="c3">
		<p>contenu 4</p>
		</div>
 
		<div id="c4">
		<p>contenu 5</p>
		</div>
		</div>
	</div>
</body>
</html>

Code css :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
@charset "UTF-8";
/* CSS Document */
 
 
html {
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
}
 
body {
	width: 5230px;
	background-color: #cdc0b0;
}
 
#global {
	width: 100%;
	height: 640px;
	position:absolute;
	top:50%; 
	margin-top:-320px;
	overflow: auto;
}
 
#contenus {
	height: 600px;
	width: 100%;
	margin-top: 20px;
}
#menu {
	background-color: black;
	color: #fff;
	height: 600px;
	left: 0;
	position: fixed;
	width: 230px;
	z-index: 1;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
#c0, #c1, #c2, #c3, #c4 {
	width: 1000px;
	float: left;
	height: 600px;
	color: #fff;
	margin-left: 230px;
}
 
#c0 {
	background-color: brown;
	display:block;
}
 
#c1 {
	background-color: green;
	display:none;
}
 
#c2 {
	background-color: red;
	display:none;
}
 
#c3 {
	background-color: purple;
	display:none;
}
 
#c4 {
	background-color: yellow;
	display:none;
}

Ces échanges m'ont permis d'apprendre, et c'est super ! Merci à vous tous.
Mais il faut que je finisse le site à navigation horizontale et là il me faut mettre un slider.
Bonne journée.

**DezMax** · 09/01/2013, 20h14

Si tu as besoin d'aide pour le "slide" pas de soucis

je t'aiderais volontier pour le Jquery

!

**NoSmoking** · 09/01/2013, 22h11

Je mets mes menus dans des <ul></ul> comme on me l'a appris en formation, mais je suppose qu'on peut faire autrement, dans des DIV comme dans l'exemple de DezMax.

l'utilisation des UL LI me semble plus approprié que celles des DIV pour des menus.

J'ai encore tellement à apprendre...

on en est encore tous là

**DezMax** · 09/01/2013, 22h20

J'ai utiliser des "div" car il fallais que je mette une couleur différente pour chaque lien .

**NoSmoking** · 09/01/2013, 22h31

@ DezMax : le résultat aurait été le même avec une liste.

<HORS_SUJET>
cet avatar est quand même plus mieux que ton précédent

</HORS_SUJET>

**mariaorea** · 10/01/2013, 09h12

merci DezMax pour ta proposition, je reviendrais sans doute vers toi, tout prochainement.
je vais passer la discussion en résolu.

merci à tous

Affichage sur navigateurs

HTML

Discussions similaires

Partager

Partager