Affichage sur navigateurs

Version imprimable

04/01/2013, 16h47
mariaorea

Affichage sur navigateurs

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.
04/01/2013, 23h54
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...
05/01/2013, 10h32
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
05/01/2013, 17h56
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...
06/01/2013, 09h12
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.

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:

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:

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:

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.

07/01/2013, 22h02
livaneti

Citation:

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
08/01/2013, 10h15
mariaorea

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.

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:

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:

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...

08/01/2013, 18h43
NoSmoking

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

Code:

<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.

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:

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/

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:

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:

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.

09/01/2013, 20h14
DezMax

Si tu as besoin d'aide pour le "slide" pas de soucis ;) je t'aiderais volontier pour le Jquery ;) !
09/01/2013, 22h11
NoSmoking

Citation:

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.

Citation:

J'ai encore tellement à apprendre...

on en est encore tous là ;)
09/01/2013, 22h20
DezMax

J'ai utiliser des "div" car il fallais que je mette une couleur différente pour chaque lien .
09/01/2013, 22h31
NoSmoking

@ 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 :mrgreen:
</HORS_SUJET>
10/01/2013, 09h12
mariaorea

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

merci à tous