Aide page html

MathieuAl -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 4 déc. 2014 à 19:53

Bonjour a vous tous( toutes) qui prenez le temps de lire ce sujet!
Pour faire bref, j'ai récemment commencé la création d'un site internet dédié a l'ISN(spécialité de série scientifique) afin de stocker nos projets de l'année.
Mais voilà mon problème. J'ai crée plusieurs pages et mis un lecteur musique, sauf que quand je change de page la musique recommence bien entendu. Donc j'ai pour idée de stocker tout le html sur la même page afin de garder le même lecteur d'ouvert. Ma question est: peut on rendre invisible une certaine partie de la page lors d'un clic sur une barre de menu? Car la solution simple aurait été les ancres mais cela me parait moins abouti!

Mon html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
  <link rel="stylesheet" href="page1.css" />
  <link rel="stylesheet" href="1tri.css" />
  <title>ISN</title>
 </head>
 <body>
 <embed src='zic/angel.mp3' src='watch' width='75' height='50' autostart='true' >
 <h1>ISN</h1>
 <BR>
 <BR>
              <div class="barre">
                <ul class="bmenu">
                    <li><a href="#infos">Infos</a></li>
     <li><a href="#page2">TP de cours</a></li>
                    <li><a href="2tri.html">Mini-projets</a></li>
                    <li><a href="3tri.html">Liens utiles</a></li>
                </ul>
            </div>
  
  <h2 id="infos">Qu'est-ce que l'ISN?</h2>
  <p>Le programme est construit autour de quatre parties :</p>
  <ul class="def">
   <li>Représentation de l'information (numérisation des sons et des images / compression...)</li>
   <li>Algorithmique</li>
   <li>Langages et programmation (HTML/css,...)</li>
   <li>Architectures matérielles / réseaux / initiation à la robotique</li>
   </ul>
 </body>
 
 <body class="pageII">
 
 <h1 id="page2" >TP de cours</h1>
 <BR>
 <BR>
              <div class="barre">
                <ul class="bmenu">
                    <li><a href="page1.html">Acceuil</a></li>
                    <li><a href="2tri.html">Mini-projets</a></li>
                    <li><a href="3tri.html">Liens utiles</a></li>
                </ul>
            </div>
   <ul class="tp">
    <li>TP 1</li>
     <BR><img class="tp1" src="images/imagestp1/tp1.png" alt="tp1" />
     <BR><img class="tp1bis" src="images/imagestp1/tp1bis.png" alt="tp1bis" />
     <BR><img class="tp1bis" src="images/imagestp1/tp1b.png" alt="tp1b" />
    <li>TP 2</li>
    <BR><img class="tp2-1" src="images/imagestp2/tp2-1.png" alt="tp2-1" />
    <BR><img class="tp2-2" src="images/imagestp2/tp2-2.png" alt="tp2-2" />
    <BR><li>TP 3</li>
    <BR><img class="tp3" src="images/imagestp3/tp3.png" alt="tp-3" />
   </ul>
 </body>
</html>

Et mes css:


@font-face{
    font-family : "Aldo";
    src: url('Aldo_Open.otf');
}

@font-face{
    font-family : "Casper";
    src: url('BlackCasper.ttf');
}

@font-face{
    font-family : "Boston";
    src: url('boston_traffic.ttf');
}

body
{
background-image: url("[http://p1.pichost.me/i/28/1509786.jpg]");
Margin-bottom: 70px;
}

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 30px;
    display: block;
}
.bmenu li a{
 font-family: Aldo;
 Background-image: url("") ;
 Background-image: transparent;
 color: RGB(80,0,40);
 display: block;
 text-transform: uppercase;
 letter-spacing: 1px;
 transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
 text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
 color: #fff;
 text-shadow: 0px 0px 1px #fff;
 padding-left: 10px;
}

.barre{
 margin-left: 150px;
}

h1 {
font-family: Aldo;
color: RGB(80,0,40);
text-align: center;
font-size: 60px;
}

p{
color: RGB(80,0,40);
font-family:Boston;
text-align:center;
}

h2{
color: RGB(80,0,40);
text-align:center;
margin-top:400px;
font-family:Aldo;
}

.def li {
color: RGB(80,0,40);
font-family:Comic sans ms;
text-align:center;
}



ET le 2ème!

.tp li{
color: RGB(80,0,40);
margin-top:80px;
text-align:center;
font-size: 40px;
font-family:Aldo;
}



.tp1 {
width: 700px;
height: 400px;
display: block;
margin-left:auto;
margin-right:auto;
}

.tp1bis {
width: 400px;
height: 400px;
display: block;
margin-left:auto;
margin-right:auto;
}

.tp2-1 {
width: 600px;
height: 400px;
display: block;
margin-left:auto;
margin-right:auto;
}

.tp2-2 {
width: 600px;
height: 400px;
display:block;
margin-left:auto;
margin-right:auto;
}

.tp3 {
display:block;
margin-left:auto;
margin-right:auto;
}

en vous remerciant d'avance pour votre lecture et votre aide!

EDIT :AJOUT DES BALISES DE CODE (jordane)

Afficher la suite

A voir également:

Aide page html
Supprimer page word - Guide
Editeur html - Télécharger - HTML
Imprimer tableau excel sur une page - Guide
Page d'accueil - Guide
Page privée - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Bonjour,

peut on rendre invisible une certaine partie de la page lors d'un clic

Oui... via du Javascript par exemple.

Tu mets tes différentes parties de ta page dans des DIV.
Puis, via Javascript, tu joue avec leur attribut DISPLAY..

Pour ce qui est de la détection du clic... un ONCLICK sur tes <a> suffirat.

   <li><a onclick="AfficherDiv(id_du_div_a_affucher);">Infos</a></li>

Il reste à coder la fonction javascript (AfficherDiv) qui va AFFICHER la div indiquée et masquer les autres...
l'ideal étant de mettre un CLASS à tes div (la même pour toutes les div contenant tes pages) puis , via le script de boucler dessus pour mettre leur propirété display à none.
Puis... pour finir .. de cibler, via son ID, afficher celle que tu souhaite.

Je ne pense pas avoir le temps ce soir....
Mais ça te donne déjà des pistes pour chercher.

Discussions similaires

connection ok mais aucune page ne s'affiche

Espace en HTML

Votre réponse

Discussions similaires