[HTML] Inclusion page html et feuille CSS

**trinquette** · 25/01/2008, 18h54

bonjour à tous et toutes

je fais mon premier site et sur le php mon tout premier code.

j' essaye d'utiliser include pour une galerie picassa et ça feuille css. (sachant que site pour club de tennis donc beaucoup de galeries)

cela fait plus d'une semaine que je grenouille sur google sans réellement progresser ou je suis bloquer (trop d'infos à ingérer entre le phb,le css, mysql, le html)

donc je me suis dis: si tu veux te faire aider efficacement met en ligne un site test ou tu avanceras pas à pas. Donc je l'ai fait en vous mettant les liens feuilles css et tout ce que je pensais pouvoir vous servir dans votre apport d'aide

le site d'apprentissage : http://site-a.ifrance.com/

vous remerciant d'avance de vos aides

cordialement

**kaiser59** · 26/01/2008, 13h18

Salut,

Alors tout d'abord les includes sert à mettre en générale je précise, un bout de code provenant d'une autre page.

Tu veux mettre en include une page picasa, mais as tu vue que celle ci génère la création d'une page complète qui plus est très mal codé du script avant le doctype n'importe quoi ! De ce fait, tu as une chance sur deux pour que cela passe, car s'il on reste sur ton principe d'include tu aurais deux doctype, deux body etc...donc pas très top.

Ce que je te conseille c'est plutôt de mettre un lien vers la ou les pages en question et de l'ouvrir soit par une nouvelle page soit par un pop-up.

**trinquette** · 28/01/2008, 13h42

merci de ta réponse Kaiser

j'ai donc virer picassa pour le remplacer par fireworks qui ne génère pas feuille de style . css

mais je n'avance toujours pas -- je dois faire une erreur de syntaxe quelque part

de plus j'aimerais mettre en incude aussi mon menu(qui à du java scrip et du texte css dans la page pour ne pas avoir à refaire tous les liens à chaque fois.

sur mon site d'essais en page d'accueil vous avez les codes pour entrer si vous le souhaiter

plutot qu'un long discour ou je vais m'embrouille je profère vous laisser voir ou j'en suis (ce n'est pas de la fainéantise, je cherche mais plus je cherche et plus je m'embrouille)

une fois que j'aurais une trame ce sera beaucoup plus évident pour moi

http://site-a.ifrance.com/

merci d 'avance à tous

Ps je n'ai pas réussi à appeler ma page en pop up .mais si je surprime le doctype de la gallerie je ne l'aurais plus deux fois ?

**kaiser59** · 28/01/2008, 15h38

Avec tous ces liens moi aussi j'en perd la tête

Sinon il pour insérer ton include il te suffit de faire ceci :

si c'est en php :

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
...
<body>
<div id="header"></di>
<div id="contenu">
  <!-- Début menu en include -->
    <?php include 'menu.htm'; ?>
  <!-- Fin menu -->
 
  <div id="autre">
 
  </div>
</div>
<div id="footer"></div>
</body>
....

Si c'est en asp :

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
...
<body>
<div id="header"></di>
<div id="contenu">
  <!-- Début menu en include -->
    <!--#include file="menu.htm"-->
  <!-- Fin menu -->
 
  <div id="autre">
 
  </div>
</div>
<div id="footer"></div>
</body>
....

Menu.htm (dans cette page tu n'insère que le code de ton menu)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="menu">
 <dl>
  <dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
	<dd id="smenu1">
	  <ul>
		<li><a href="#">Sous-menu 1.1</a></li>
		<li><a href="#">Sous-menu 1.2</a></li>
	</ul>
     </dd>
...
</div>

Voila ce que tu as à faire, c'est la même chose avec ta galerie. A l'interieur de #autre tu met un include contenant ta galerie

**trinquette** · 28/01/2008, 16h54

re kaiser

je suis sur ta réponse depuis tout à l'heure et je ne trouve pas le truc.
si tu veux laisser tomber un grand merci pour ce que tu m'as apporté, je me rend bien compte que je suis un boulet.
j'avais mis le site en ligne pensant vous aidez mais à priori ce n(est pas une bonne idée

ce que je pense avoir compris : si tu appelle une page avec la fonction include la partie doctype doit être supprimé puisque la page php aura la sienne

ci dessous mon menu en .html à la racine du site

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
        for (var i = 1; i<=10; i++) {
                if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
        }
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
 
body {
        margin: 10px;
        padding: 0;
        font: 1em Verdana, sans-serif;
        background-image: url(../b_infosite/image/armada06.jpg);
}
 
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
 
#menu {
        position : absolute;
        left: 51px;
        top: 21px;
        width: 1000px;
}
 
#menu dl {
float: left;
}
#menu li {
display: inline;
}
 
#menu a {
text-decoration: none;
color: #A05804;
background: #FFF33;
}
 
#smenu1, #smenu2, #smenu3, #smenu4 , #smenu5{
        position: absolute;
        left: 2px;
        font-size: 0.7em;
        border-top: 5px solid gray;
        width: 1000px;
        top: 22px;
        height: 23px;
}
 
 
.mentions {
position: absolute;
bottom : 600px;
left : 10px;
color: #FFF33;
background-color: FFF33;
}
a {text-decoration: none;
color: #222;
}
.Style2 {color: #FFF33}
 
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">
 
<div id="menu">
	<dl style="color: red; background-color: rgb(255, 255, 51);">
 
		<dt style="font-weight: bold;" onmouseover="montre('smenu1');"><a href="#">accueil</a></dt>
			<dd id="smenu1">
					<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
					<li><a href="#">../www.stat/setup.php</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
					<li><a href="#">Sous-menu 1.4</a></li>
				</ul>
 
      <span class="Style2"></span></dd>
	</dl>
 
	<dl>			
		<dt style="font-weight: bold; color: rgb(255, 204, 102); background-color: rgb(204, 255, 255);" onmouseover="montre('smenu2');"><a href="#">p_en_cour</a></dt>
			<dd id="smenu2">
				<ul style="background-color: rgb(204, 255, 255);">
					<li><a href="#">Sous-menu 2.1</a></li>
					<li><a href="#">Sous-menu 2.2</a></li>
 
				</ul>
			</dd>
	</dl>
 
	<dl>	
	  <span class="Style2"></span>
	  <dt style="font-weight: bold; background-color: rgb(255, 255, 51);" onmouseover="montre('smenu3');"><a href="#">p_&agrave;_tester</a></dt>
			<dd id="smenu3">
				<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
					<li><a href="#">Sous-menu 3.1</a></li>
					<li><a href="#">Sous-menu 3.2</a></li>
					<li><a href="#">Sous-menu 3.3</a></li>
					<li><a href="#">Sous-menu 3.4</a></li>
					<li><a href="#">Sous-menu 3.5</a></li>
				</ul>
	  </dd>
	</dl>
 
<dl>	
	  <span class="Style2"></span>
	  <dt style="font-weight: bold;" onmouseover="montre('smenu4);"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-menu 4.1</a></li>
					<li><a href="#">Sous-menu 4.2</a></li>
					<li><a href="#">Sous-menu 4.3</a></li>
					<li><a href="#">Sous-menu 4.4</a></li>
					<li><a href="#">Sous-menu 4.5</a></li>
				</ul>
	  </dd>
  </dl>
 
	<dl>	
		<dt style="font-weight: bold; background-color: rgb(204, 255, 255);" onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
			<dd id="smenu5">
				<ul style="background-color: rgb(204, 255, 255);">
					<li><a href="#">Sous-menu 5.1</a></li>
					<li><a href="#">Sous-menu 5.2</a></li>
					<li><a href="#">Sous-menu 5.3</a></li>
 
				</ul>
	  </dd>
	</dl>
 
</div>
 
<span class="Style2"></span>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body></html>

ci desssous ma page php vierge ou j'aimerais le menu en iclude ou autre commande php

comme tu m'as dis que pour la galerie le principe est le même je devrais y arriver non d'une pipe

Code :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Document sans titre</title>
</head>
 
<body>
</body>
</html>

cordialement et désolé de ne pas capter

**kaiser59** · 28/01/2008, 19h52

Ne t'inquiete pas trinquette on est la pour t'aider s'il fallait laisser tombé qqn à la moindre difficulté je pense que le forum ne servirais pas à grand chose

Sinon tu y es presque manque juste à mettre dans l'ordre. Je reprends juste ton code :

Index.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document sans titre</title>
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
 
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<?php include 'menu.htm'; ?>
</body>
</html>

style.css

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
 
body {
margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;
background-image: url(../b_infosite/image/armada06.jpg);
}
 
dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}
 
#menu {
position : absolute;
left: 51px;
top: 21px;
width: 1000px;
}
 
#menu dl {
float: left;
}
#menu li {
display: inline;
}
 
#menu a {
text-decoration: none;
color: #A05804;
background: #FFF33;
}
 
#smenu1, #smenu2, #smenu3, #smenu4 , #smenu5{
position: absolute;
left: 2px;
font-size: 0.7em;
border-top: 5px solid gray;
width: 1000px;
top: 22px;
height: 23px;
}
 
.mentions {
position: absolute;
bottom : 600px;
left : 10px;
color: #FFF33;
background-color: FFF33;
}
a {text-decoration: none;
color: #222;
}
.Style2 {color: #FFF33}

et enfin ta page menu.htm

Code html :

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
<div id="menu">
<dl style="color: red; background-color: rgb(255, 255, 51);">
 
<dt style="font-weight: bold;" onmouseover="montre('smenu1');"><a href="#">accueil</a></dt>
<dd id="smenu1">
<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
<li><a href="#">../www.stat/setup.php</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
<li><a href="#">Sous-menu 1.4</a></li>
</ul>
 
<span class="Style2"></span></dd>
</dl>
 
<dl>
<dt style="font-weight: bold; color: rgb(255, 204, 102); background-color: rgb(204, 255, 255);" onmouseover="montre('smenu2');"><a href="#">p_en_cour</a></dt>
<dd id="smenu2">
<ul style="background-color: rgb(204, 255, 255);">
<li><a href="#">Sous-menu 2.1</a></li>
<li><a href="#">Sous-menu 2.2</a></li>
 
</ul>
</dd>
</dl>
 
<dl>
<span class="Style2"></span>
<dt style="font-weight: bold; background-color: rgb(255, 255, 51);" onmouseover="montre('smenu3');"><a href="#">p_&agrave;_tester</a></dt>
<dd id="smenu3">
<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
<li><a href="#">Sous-menu 3.1</a></li>
<li><a href="#">Sous-menu 3.2</a></li>
<li><a href="#">Sous-menu 3.3</a></li>
<li><a href="#">Sous-menu 3.4</a></li>
<li><a href="#">Sous-menu 3.5</a></li>
</ul>
</dd>
</dl>
 
<dl>
<span class="Style2"></span>
<dt style="font-weight: bold;" onmouseover="montre('smenu4);"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-menu 4.1</a></li>
<li><a href="#">Sous-menu 4.2</a></li>
<li><a href="#">Sous-menu 4.3</a></li>
<li><a href="#">Sous-menu 4.4</a></li>
<li><a href="#">Sous-menu 4.5</a></li>
</ul>
</dd>
</dl>
 
<dl>
<dt style="font-weight: bold; background-color: rgb(204, 255, 255);" onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
<dd id="smenu5">
<ul style="background-color: rgb(204, 255, 255);">
<li><a href="#">Sous-menu 5.1</a></li>
<li><a href="#">Sous-menu 5.2</a></li>
<li><a href="#">Sous-menu 5.3</a></li>
</ul>
</dd>
</dl>
</div>

je n'ai rien touché à ton code, j'ai juste ajouté la feuille de style en lien que tu remarqueras par le link et l'inclusion tout simplement.

[HTML] Inclusion page html et feuille CSS

HTML

Vue hybride

Discussions similaires

Partager

Partager