Afficher page sur site

Bonjour à tous,

désolé mais je suis débutant, donc ma demande est peut-être idiote et pas à sa place...:oops:.

Voilà, j'ai créé un CSS, jusque-là tout va bien. Il y a 3 emplacements: entête, menu, Texte. Pour l'entête et le menu pas de souci, par contre je souhaite, quand je selectionne un de mes lien de menu charger une page dans "contenu" (le truc de base quoi) genre "page.htm". Je ne sais pas du tout comment faire..
Voici un code qui correspond à peu près au mien, ça me permettra d'adapter...

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
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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
 content="text/html; charset=ISO-8859-1" />
  <title>css vdb</title>
  <style type="text/css">
#conteneur { border-style: solid;
border-width: 1px;
background-color: rgb(255, 204, 204);
width: 90%;
margin-left: 5%;
}
#entete { background-color: rgb(51, 102, 255);
background-image: url(../tesbanv2.JPG);
}
#menu { margin: -1px 0pt 0pt -1px;
background: transparent none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 7em;
float: left;
min-height: 100%;
}
#menu ul { border: 1px solid rgb(170, 170, 170);
margin: 0pt;
padding: 0pt;
background: white url(../bouton.JPG) repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
width: 7em;
text-align: center;
color: rgb(255, 204, 153);
}
#menu li { border-bottom: 1px solid rgb(204, 204, 204);
margin: 0pt;
position: relative;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
#menu li:hover { background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 50%;
background-image: url(../bouton2.JPG);
}
#menu li.submenu { background-attachment: scroll;
background-position: 95% 50%;
background-repeat: repeat;
}
#menu li.submenu:hover { background-image: url(../bouton2.jpg);
}
#menu li a { padding: 0.25em 0pt 0.25em 0.5em;
display: block;
text-decoration: none;
width: 6.5em;
}
#menu > ul a { width: auto;
}
#menu ul ul { border: 1px solid rgb(170, 170, 170);
margin: 0pt;
padding: 0pt;
background: white url(../bouton.jpg) repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
position: absolute;
top: 0pt;
left: 7em;
display: none;
width: 7em;
text-align: center;
}
#menu ul.level1 li.submenu:hover ul.level2, #menu ul.level2 li.submenu:hover ul.level3 { display: block;
background-image: url(../bouton2.jpg);
}
#texte { }
#pied { background-color: rgb(204, 0, 0);
width: 100%;
clear: left;
}
  </style>
</head>
<body>
<div id="conteneur">
<div id="entete"><br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id="menu">
<ul class="level1">
  <li><a href="/">Le Club</a></li>
  <li class="submenu"><a href="">Les joueurs</a>
    <ul class="level2">
      <li class="submenu"><a href="">Classements</a>
        <ul class="level3">
          <li><a href="">Alphab&eacute;tique</a></li>
          <li><a href="">Points</a></li>
        </ul>
      </li>
      <li><a href="">Progression</a></li>
    </ul>
  </li>
  <li class="submenu"><a href="">R&eacute;sultats</a>
    <ul class="level2">
      <li><a href="">Strategy</a></li>
      <li><a href="">Optimization</a></li>
      <li><a href="">Guidance</a></li>
      <li><a href="">Training</a></li>
    </ul>
  </li>
  <li><a href="">Calendrier</a></li>
  <li><a href="">R&egrave;glement</a></li>
  <li><a href="">Contacts</a></li>
  <li><a href="">Livre d'or</a></li>
  <li><a href="">Forum</a></li>
  <li><a href="">Liens utiles</a></li>
  <li><a href="">Contact</a></li>
</ul>
</div>
<div id="texte">texte<br />
<br />
<br />
</div>
<div id="pied">pied</div>
</div>
</body>
</html>

Merci d'avance pour votre aide...

Soit tu utilises des frames, soit tu utilises de l'AJAX.

Dans les deux cas, c'est pas top pour le référencement ni l'accessibilité.

Citation:

Envoyé par Bisûnûrs

Soit tu utilises des frames, soit tu utilises de l'AJAX.

Dans les deux cas, c'est pas top pour le référencement ni l'accessibilité.

J'ai peut-être mal compris mais justement si on utilise un CSS, ce n'est pas pour éviter d'utiliser les frames???

Le CSS ne permet pas de charger une page en plein milieu du code HTML d'une autre.

Citation:

Envoyé par Bisûnûrs

Le CSS ne permet pas de charger une page en plein milieu du code HTML d'une autre.

Oups, j'ai mal compris.....:cfou::scarymov:

Donc, en fait, il faut créer chaque page à l'aide du CSS et changer uniqement le contenu???

Le CSS n'est que la présentation des données.

Il faut juste créer chaque page. Le contenu se change quand tu cliques sur un lien et que toute la page est rechargée.

Allez, après j'arrête...

Mais comment on fait ça?

Heu ... En créant un simple lien ... Revois les bases du HTML là hein.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Site - Page 1</title>
  <style>
    #header {
      background : red;
    }
  </style>
</head>
<body>
 
<div id="header">
  HEADER
</div>
 
<div id="contenu">
   <a href="page2.html">Page 2</a>
</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
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Site - Page 2</title>
  <style>
    #header {
      background : red;
    }
  </style>
</head>
<body>
 
<div id="header">
  HEADER
</div>
 
<div id="contenu">
   <a href="page1.html">Page 1</a>
</div>
 
</body>
</html>