Sujet Précédent Sujet Suivant

Rafraichissement d'une partie de la page html

Fermé
remenems Messages postés 2 Date d'inscription mercredi 13 février 2008 Statut Membre Dernière intervention 14 février 2008 - 13 févr. 2008 à 23:28
programm Messages postés 15 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 16 février 2008 - 15 févr. 2008 à 14:49
Bonjour à tous,

Je voudrais rafraichir uniquement une partie de ma page html (afficher un contenu sur une partie de la page sans modifierle reste).

Il y aurait bien la solution en php avec la fonction include. Mais l'école pour laquelle je réalise le site nous interdit d'utiliser quelconque code dynamique (pour que les sites écrits pour constituer la base documentaire de l'école soit le + pérennes possible...).

Sur cette page, je voudrais, en cliquant par exemple sur "Présentation générale", afficher ma page "1a_pres.html" dans "contenu" sans recharger mes menus (menu et sous-menu) et mon pied de page "pied".

Merci d'avance pour vos propositions qui sont les bienvenues :)

Voici mon code html (la feuille CSS liée est un peu plus bas):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La Plateforme Android</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]-->
</head>
<body>
<!-- L'entête de la page, affiché tout en haut de l'écran : -->
<div id="entete">
<h1>La Plateforme Android</h1>
<!-- Le menu principal du site, affiché horizontalement: -->
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<!-- La page en elle-même : -->
<div id="page">
<!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
<div id="sous-menu">
<p class="grand_titre">La Plateforme Android</p>
<p class="sous_titre"><a href="1a_pres.html">Présentation générale</a></p>
<p class="sous_titre"><a href="1b_archi.html">Architecture</a></p>
<p class="sous_titre"><a href="1c_interf.html">Interface, fonctionnalités</a></p>
<p class="grand_titre">Communauté/Concurrence</p>
<p class="sous_titre"><a href="2a_etart.html">Etat de l'art</a></p>
<p class="sous_titre"><a href="2b_compar.html">Comparaisons</a></p>
<p class="grand_titre">Stratégie de Google</p>
<p class="sous_titre"><a href="3a_pos.html">Positionnement</a></p>
<p class="sous_titre"><a href="3bfreq_.html">Bataille des fréquences</a></p>
<p class="sous_titre"><a href="3c_media.html">Un média pour la publicité</a></p>
</div>
<!-- Le contenu utile de la page : -->
<div id="contenu">
<h2>Présentation générale</h2>
<h3>L'idée</h3>
<p>Android veut être le point de ralliement des développeurs, des opérateurs et des fabricants de terminaux
</p>
</div>
<!-- Le pied de page : -->
<div id="pied">
Paragraphe de copyrights...
</div>
</div>

</body>
</html>

ainsi que la feuille CSS liée:

[code]
body {
background: #2D2D2D;
margin: 10px 250px;
font-family: sans-serif;
font-size: small;
}
#page {
width : 750px;
background: white;
border: 10px solid #424242;
border-top: none;
}
#entete {
width : 750px;
background: #97C024;
border: 10px solid #424242;
border-bottom: none;
} h1 {
background: #97C024;
color: white;
word-spacing: 1em;
letter-spacing: 3px;
height: 150px;
line-height:150px;
text-align: center;
font-size: xx-large;
}
#menu {
background: #3570F5;
list-style: none;
margin: 0;
padding: 0;
height: 30px;
line-height:30px;
}
#menu li {
float: left;
margin: 0 10px;
}
#menu a {
text-decoration: none;
color: white;
cursor: pointer;
}
#sous-menu {
height: 450px;
background: #EEEEEE repeat-y;
float: left;
width: 198px;
margin-top:0;
margin-left: 0;
padding:10px;
}
#sous-menu a {
text-decoration: none;
color: #666666;
}
.grand_titre {
margin-top: 40px;
margin-left: 4px;
margin-bottom: 5px;
color: blue;
font-weight: bolder;
}
.sous_titre {
padding: 0;
margin-left: 4px;
}
#menu a:hover, #sous-menu a:hover,
#menu a:focus, #sous-menu a:focus,
#menu a:active, #sous-menu a:active
{
color: black;

}
#contenu {
margin-left: 220px;
padding: 10px;
}
p {
text-align: justify;
}
#pied {
clear:both;
border-top: 1px solid #454545;
}
@media print {
#menu, #sous-menu {
display: none;
}
body {
background: none;
margin: 0;
}
#page {
background: none;
border: none;
}
h1 {
border: 1px solid black;
}
#entete {
border: none;
}
#contenu {
margin: 0;
padding: 0;
}
#pied {
border: 1px solid black;
}
}/code

Vous me sauveriez la mise en me proposant une solution qui ne soit pas dynamique (si tant est que cela soit possible)
A voir également:

5 réponses

Réponse 1 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
14 févr. 2008 à 09:22
Bonjour,

Une solution possible: les frames (vas voir les tutos pour le faire)

Tu divises ta pages en plusieurs parties avec un nom à chacune,

par ex: name="gauche"
name="droite"

un lien dans la partie gauche <a href="contenu2.html" target="droite">lien</a>

affichera la page contenu2.html dans la partie droite.
0
Réponse 2 / 5
remenems Messages postés 2 Date d'inscription mercredi 13 février 2008 Statut Membre Dernière intervention 14 février 2008
14 févr. 2008 à 22:33
Oui, merci pour les frames. Je pense que c'est la seule solution qui s'offre à moi si je veux (dois) éviter le dynamique...mais bon ça me tente pas trop...
je pense que je vais garder mes div et pour chaque lien je chargerai une nouvelle page avec l'intégralité du code de la page d'accueil + les modifs.
Le problème c'est que si je dois faire une modif sur mon index par exemple, je devrais faire de même pour les 6 autres pages du menu, n'est-ce pas?
0
Réponse 3 / 5
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
15 févr. 2008 à 09:23
Oui tu dois modifier toutes tes pages is tu veux utiliser les <div

avec les frames toutes les pages qui s'affichent dans le cadre "droite" par exemple n'ont pas à être modifiées, il faut par contre veiller à leur taille
0
Réponse 4 / 5
remenems
15 févr. 2008 à 14:36
Je pensais avoir répondu...

merci donc pour la soluce
je pense que je vais rester sur les div, tant pis pour le chargement de spages (ls frames me tentent pas trop...)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
programm Messages postés 15 Date d'inscription dimanche 21 octobre 2007 Statut Membre Dernière intervention 16 février 2008
15 févr. 2008 à 14:49
salut,
je te conseil d'utiliser Ajax, moi aussi j'ai voulu faire la même chose pour ma page web et juste avant hier que j'ai réussi à le faire en ajax.
tu vas avoir plusieurs d'exemple sur internet.
bonne chance.
0

Discussions similaires

Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses
Instagram "Désolé, une erreur s'est produite"
bananamilk -
cedric.masdeb -

60 réponses
Pokémon X et Y : comment effacer une partie ?
PokéFan -
yoshiedu13 -

49 réponses
recherche d'u
mimi -
brucine -

1 réponse