Aide page html

Fermé

MathieuAl - Modifié par jordane45 le 4/12/2014 à 19:45
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 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)

A voir également:

Aide page html
Supprimer une page word - Guide
Page d'accueil iphone - Guide
Traduire une page web - Guide
Editeur html - Télécharger - HTML
Créer une page facebook - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
4 déc. 2014 à 19:53

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

[PIX] Commencer chaque poème sur une nouvelle page

Espace en HTML

[référencement] Ne pas être référencé

la balise <br> ou <br />

Discussions similaires

Newsletters