Rafraichissement d'une partie de la page html
remenems
Messages postés
2
Statut
Membre
-
programm Messages postés 15 Statut Membre -
programm Messages postés 15 Statut Membre -
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)
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:
- Rafraichissement d'une partie de la page html
- Supprimer une page word - Guide
- Imprimer tableau excel sur une page - Guide
- Editeur html - Télécharger - HTML
- Créer une page facebook - Guide
- Comment traduire une page internet - Guide
5 réponses
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.
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.
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?
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?
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
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
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...)
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...)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
