Discussion :

[Katden]

Bonjour,

Je viens de franchir le pas depuis quelques jours: comment faire un site web? Alors considérez, pour vos réponses, que je suis un parfait candide. Merci.
J'ai vu des choses approchantes dans le forum mais pas la réponse à cette question. Bon voilà commnet ça se présente :

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
<div style="margin-left: 0px; position: relative; width: 800px;height: 500px; z-index: 5; " id="body_layer">
<!-- La zone d'affichage du texte -->
	<div style="height: 450px; left: auto; right:auto; position: absolute; top: 50px; width: 800px; z-index: 1;" id="id3">
		<!-- Le texte du voyage -->
		<div class="block_Txt">
			<div class="block_overflow">
				<div class="block_ecrit">
 
					<OBJECT data="Carnet de voyage_files/texte.html"
						type="text/html; charset=UTF-8;"
						style="width: 95%; height: 445px; align:middle;overflow: hidden">
					</OBJECT> 					
				</div>
			</div>
		</div>
	</div>
	<!-- Fleche droite / gauche en bas -->
	<A href="Carnet de voyage_files/texte.html" id="#paragraphe3">	
		<img src="Carnet_de_voyage_1_files/shapeimage_3.png" title="" id="id4"
			style="height: 25px; left: 728px; position: absolute; top: 475px; width: 25px; z-index: 1; "
			alt="Page suivante" /></A>
	<a href="Carnet%20de%20voyage.html" title="Carnet%20de%20voyage.html">
		<img src="Carnet_de_voyage_1_files/shapeimage_4.png" title="" id="id5"
			style="height: 25px; left: 26px; position: absolute; top: 475px; width: 25px; z-index: 1; "
			alt="Pag précédente" /></a>
</div>

Alors toute la question en deux questions:
- Pourquoi est affiché "texte.html" au début de texte.html dans mon cadre et pas le paragraphe qu'il est censé pointer ?

- Comment faire pour que quand j'appuie sur la flêche droite j'aille directment au paragraphe d'id="1Autrepara", sans que rien d'autre ne bouge à l'afffichage ?

Pour complément d'info voici mon css (paraît qu'il faut utiliser les css, dixit tous les sites que je visite depuis ces qqs jours) :

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
/* Block du text */
 .block_Txt {
	 width : 95%;
      height : 450px;
      position : center;
      margin-left: 25px;
      margin-right: auto;
      background-image : url("../Images/Trimaran_DSCN0235.JPG");
      background-position : top left;
      background-repeat : no-repeat;
}
 
/* Block overflow  */
.block_overflow {
      width : 100%;
      height : 100%;
      margin-left:auto;
      margin-right:auto;
      overflow : auto;
      }
 
/* Zone d'Ècriture avec espacement du cadre de 5em*/
.block_ecrit {
	/* Ajouter des styles au paragraphe */
	padding: 0.5em;
	text-align: justify;
	text-indent:2em;
	color: #66ffcc;
}

J'espère que c'est clairement posé.

Merci pour votre contribution.

[Deallyra]

Bonjour,

En effet, le CSS c'est bien...

D'ailleurs, pourquoi utiliser des attributs style si tu utilises également une feuille CSS?

Code récupéré et aménagé en partie par vos soins?

Pour vos div, selon qu'ils utilisent un style qui se répétera dans la page ou non, utilisez un attribut id / class avec un identifiant/nom.

Ensuite, le code, le style, sera à décrire dans la feuille CSS.

Sinon, en ce qui concerne les liens dans une même page

Maintenant, je n'ai jamais tenté d'insérer une page web dans une autre avec objet...

[Sub0]

J'utilise Javascript pour modifier le data d'un object.
Avec ton code, ça donnerait quelque chose comme ça :

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
<script type="text/javascript">
  function ChangeLien(lien){
    var adr=document.getElementById('bodyframe').data;
    var inh=document.getElementById('object').innerHTML;
    inh=inh.replace(adr,lien);
    document.getElementById('object').innerHTML=inh;
  }
</script>
 
...
 
  <div id="object" class="block_ecrit">
    <object id="bodyframe" type="text/html" 
     data="Carnet de voyage_files/texte.html" 
     type="text/html; charset=UTF-8;"
     style="width:95%; height:445px; align:middle; overflow:hidden">
    </object>
  </div>
 
...
 
	<!-- Fleche droite / gauche en bas -->
	<img src="Carnet_de_voyage_1_files/shapeimage_3.png" 
          title="" style="height:25px; left:728px; position:absolute; top:475px;
          width:25px; z-index:1; cursor:pointer;" alt="Page suivante"
          onclick="ChangeLien('Carnet de voyage_files/texte.html');"/>
 
	<img src="Carnet_de_voyage_1_files/shapeimage_4.png" 
          title="" style="height:25px; left:26px; position:absolute; top:475px;
          width:25px; z-index:1; cursor:pointer;" alt="Page précédente"
          onclick="ChangeLien('Carnet%20de%20voyage.html');"/>
 
...

Du coups, l'hyperlien des images n'est plus nécessaire puisqu'on utilise onclick.

Note : Je sais plus trop pourquoi il fallait passer par le innerHTML du div parent pour modifier le data de l'object,
mais je devais surement avoir une bonne raison...

[ATTENTION] Eviter d'utiliser des espaces dans les urls !!

[Katden]

Bonjour,

Merci pour votre aide à l'un et l'autre.
Bon, il à fallu que je franchisse une étape que je ne prévoyais pas de franchir avant un moment, l'apprentissage de java script. Grâce à cette page, ça à été rapide, du moins pour comprendre le code de Sub0.

J'ai modifié un peu parce que je n'aime pas le mélange des genres. Alors j'ai exporté le script dans un fichier dans un autre répertoire. J'aime être organisé et mettre les torchons avec leurs copains, sinon je m'y perd vite

Alors ce que ça donne...

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
 
</head>
 
<script src="../Scripts/Carnet_de_voyage_1.js" type="text/javascript"> </script>
 
..../...
 
<!-- La zone d'affichage du texte -->
	<div style="height: 450px; left: auto; right:auto; position: absolute; top: 50px; width: 800px; z-index: 1;" id="id3">
		<!-- Le texte du voyage -->
		<div class="block_Txt">
			<div class="block_overflow">
				<div id="Cadre_obj" class="block_ecrit">
					<OBJECT id="Obj_txt_voy"
						type="text/html; charset=UTF-8;"
						style="width: 95%; height: 445px; align:middle;overflow: hidden">
					</OBJECT> 					
				</div>
			</div>
		</div>
	</div>
	<!-- Fleche droite / gauche en bas -->
		<img src="Carnet_de_voyage_1_files/shapeimage_3.png" title="" id="id4"
			style="height: 25px; left: 728px; position: absolute; top: 475px; width: 25px; z-index: 1; "
			alt="Page suivante"
			onclick="ChangeLien('Carnet de voyage_files/texte.html#paragraphe3');"/>
 
		<img src="Carnet_de_voyage_1_files/shapeimage_4.png" title="" id="id5"
			style="height: 25px; left: 26px; position: absolute; top: 475px; width: 25px; z-index: 1; "
			alt="Pag précédente"
			onclick="ChangeLien('Carnet de voyage_files/texte.html');"/>

Et dans le fichier .js

Code :

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

1
2
3
4
5
6
function ChangeLien(lien){
    var adr=document.getElementById('Obj_txt_voy').data;
    var inh=document.getElementById('Cadre_obj').innerHTML;
    inh=inh.replace(adr,lien);
    document.getElementById('object').innerHTML=inh;
  }

Et alors du coup mon firefox préféré me demande un plugin (on peut pas traduire ça en Français ?... une greffe peut-être?). J'ai donc vérifié, javascript est activé et j'en ai même profité pour installer la greffe javascript debogger. Voilà, je sais bien ce n'est plus un problème de html ou js plus qu'un soucis de navigateur mais bon, ça me laisse quoit cette histoire, si vous pouviez dire quel est le problème.... Merci.

Pour le reste, oui j'ai piqué du code dans des tutoriaux, essayer de l'assimiler et de l'adapter. Pour les " " c'est ok. C'est juste que j'ai commencé avec iWeb sur mon mac, et il installe des repertoire avec " ", perso je n'ai jamais aimé ça. Puis ce n'est pas satisfaisant, iweb, j'ai dû me mettre à l'huile de coude... c'est pas plus mal en fait et à terme je vais corriger toutes ces choses.