Bonsoir tout le monde, je suis nouvelle et dois créer un site internet dans le cadre scolaire.
Le site a plutôt une belle tête pour l'instant mais j'ai une question:
Est-ce que nous pouvons rendre des ancres invisibles jusqu'à ce qu'on appuie sur l'élément qui doit nous emmener dessus?
je m'explique, j'ai créer un site internet avec 5 menus et des sous menus pour chacun d'eux. Chaque menu est une page html. En revanche pour chacun de mes sous menus, ils sont dans la pages html, il n'y a pas une page html pour chaque sous menu . J'ai donc mis des ancres pour que lorsque nous cliquons sur le sous-menus, le site nous emmène vers le texte correspondant. Mais le problème c'est que quand j'appuie sur un sous menus, il m'emmène vers le texte ça c'est bon, mais nous voyons le paragraphe qui est en dessous qui lui correspond à un autre sous menu de la même page html. Je voulais donc savoir s'il était possible de cacher un paragraphe et qu'il apparaisse que lorsqu'on lui demande.
Je ne sais pas si j'ai été bien claire.
J'attend vos réponses.
HTML:
et voici mon code CSS:
Le site a plutôt une belle tête pour l'instant mais j'ai une question:
Est-ce que nous pouvons rendre des ancres invisibles jusqu'à ce qu'on appuie sur l'élément qui doit nous emmener dessus?
je m'explique, j'ai créer un site internet avec 5 menus et des sous menus pour chacun d'eux. Chaque menu est une page html. En revanche pour chacun de mes sous menus, ils sont dans la pages html, il n'y a pas une page html pour chaque sous menu . J'ai donc mis des ancres pour que lorsque nous cliquons sur le sous-menus, le site nous emmène vers le texte correspondant. Mais le problème c'est que quand j'appuie sur un sous menus, il m'emmène vers le texte ça c'est bon, mais nous voyons le paragraphe qui est en dessous qui lui correspond à un autre sous menu de la même page html. Je voulais donc savoir s'il était possible de cacher un paragraphe et qu'il apparaisse que lorsqu'on lui demande.
Je ne sais pas si j'ai été bien claire.
J'attend vos réponses.
HTML:
<!DOCTYPE html>
<html lang="fr_FR">
<head>
<title>Tout sur le tennis</title>
<link rel="stylesheet" type="text/css" href="tennis.css">
<meta charset="UTF-8">
</head>
<body>
<header>
<div class="container">
<div class="left">
<div class="logo">Tout sur le tennis</div>
</div>
<div class="right">
<ul class="menu">
<li class="title">
<a href="tennis.html">Le tennis </a>
<ul class="sous_menu">
<li><a href="#ancre">Presentation</a></li>
<li><a href="#ancre1">D'ou vient-il?</a></li>
<li><a href="#ancre2">Les Regles</a></li>
<li><a href="#ancre3">Les categories d'ages au tennis</a></li>
</ul>
</li>
<li class="title">
<a href="#">Les Matchs</a>
<ul class="sous_menu">
<li><a href="#">Les Classements</a></li>
<li><a href="#">Les matchs en simple</a></li>
<li><a href="#">Les matchs en double</a></li>
</ul>
</li>
<li class="title">
<a href="#">Tournois </a>
<ul class="sous_menu">
<li><a href="#">Comment ca marche?</a></li>
<li><a href="#">Combien de matchs peut-on jouer?</a></li>
<li><a href="#">Contre qui jouons nous?</a></li>
</ul>
</li>
<li class="title">
<a href="#">Quelques joueurs </a>
<ul class="sous_menu">
<li><a href="#">Jo-Wilfried Tsonga</a></li>
<li><a href="#">Lucas Pouille</a></li>
<li><a href="#">Caroline Garcia</a></li>
<li><a href="#">Kristina Mladenovic</a></li>
</ul>
</li>
<li class="title">
<a href="#">Les Raquettes</a>
<ul class="sous_menu">
<li><a href="">Les premieres raquettes</a></li>
<li><a href="">Raquettes plus recentes</a></li>
</ul>
</li>
</div>
</div>
</header>
<br>
<img src="imagetennis.jpg">
<h2 id="ancre">Présentation</h2>
<p>
"Le tennis, c'est plus qu'un sport. C'est un art, au même titre que la danse." Bill Tilden <br>
Le tennis est l'un des sports le plus pratiqué au monde. Adapté du fameux jeu de paume, surtout pratiqué en Angleterre, le tennis voit sa cote de popularité augmenter d'année en année.
Le tennis est un sport de raquette mondialement connu et apprécié.
En France, le tennis est le deuxieme sport le plus pratiqué après le football et ses 1 100 000 licenciés.<br>
A ce jour, nous comptons plus de 8 500 000 licenciés dans le monde (50 000 000 de pratiquants) et 1 018 721 licenciés en France. <br><br>
</p>
<h2 id="ancre1">D'où vient-il?</h2>
<p>
Le tennis est une variante du fameux jeu de paume. Le jeu de paume était un jeu français qu'avaient créé les moines afin de faire un peu de sport. <br>
Le jeu de paume consistait à renvoyer une balle , appelée "eteuf", principalement à main nue mais certaines variantes autorisaient le port d'un gant en cuir. Le gant en cuir s'est petit à petit transformé pour qu'ensuite apparaisse la <a href="raquettes.html">raquette</a>. <br>
Mais le jeu s'est tres vite répandu et a fait fureur dans la cour et dans les quartiers. Les autorités ont dû interdire ce jeu à quelques endroits car nous ne pouvions plus circuler.<br>
Le jeu est pris d'un succès fou et traversa rapidement la manche pour arriver en Angleterre. C'est justement en Angleterre que le jeune britanique Walter Clopton Winglfied déposa un brevet pour ce sport qu'il appela "Tennis". Le mot "Tennis" vient en fait du mot "Tenètz" que disaient les joueurs du jeu de paumes avant de commencer leur match. Puis petit à petit, avec l'accent anglais le mot "Tenètz" s'est transformé en "Tennis".
</p>
<h2 id="ancre2">Les Règles</h2>
<p>
<h3>Le court:</h3>
Le court de tennis est un rectangle de 23,77m de long sur 8,23m (simple) ou 10,97m (double). Séparé en son milieu par un filet, d’une hauteur de 0,914m (hauteur réglementaire).
Voici un terrain de tennis, appelé « court de tennis ». Les lignes blanches délimitent les frontières externes du terrain ainsi que les zones internes.<br>
<br><br>
<img src="courttennis1.jpg"> <br><br>
Les <strong><big>longues bandes</big></strong> sur les <strong><big>côtés</big></strong> du terrain délimitent les <strong><big>"couloirs".</big></strong><br>
On ne joue dans les couloirs que lorsque nous jouons en double, c'est a dire en 2 contre 2.<br>
Chaque joueur à son côté du terrain, séparé d'un filet au-dessus duquel la balle doit obligatoirement passer pour gagner le point.<br>
Il faut également envyer la balle avant la ligne de fond de cour pour que celle-ci soit dans les délimites du terrain, au-delà de laquelle elle se considérée comme "out", "faute"
en français.<br>
Si la balle tombe pile-poil sur la ligne, c'est l'arbitre qui jugera si elle est "bonne", si l'arbitre n'a pas bien vu, il peut demander l'aide de <strong> l'arbitrage vidéo.<br><br>
<strong><strong><big>En conclusion</big></strong></strong>, la ligne de fond de court et les couloirs sont les seules zones à éviter lors du jeu, à l'exeption de la première balle de servie. Le service s'effectue depuis la ligne de fond de court et doit arriver dans le carré de service en diagonale: la balle doit biensûr psser au dessus du filet et tomer dans le carré de service de gauche si le service s'est effectué a droite et inversement (partie la plus proche du filet. Il faut donc faire attention bien viser!<br> <br>
<h3>Choix du côte et service:</h3>
Au début du match, afin de définir le côté dans lequel on va jouer, les joueurs effectuent entre eux un tirage au sort. A la suite de ce tirage au sort, le joueur 1 a gagné le tirage au sort, il peut choisir s'il sert ou bien il peut choisir le côté dans lequel il va commencer le match.<br>
Si le joueur 1 choisi le service, alors le joueur 2 peut choisir son côté. <br>
En revanche si le joueur 1 choisi le côté, alors le joueur 2 doit servir. <br>
<br>
<h3>Serveur et Relanceur:</h3>
Le « serveur » est le joueur qui met la balle en jeu pour le premier point. Il a le droit à deux balles pour débuter le point, mais s’il ne réussit <br>
aucune de ses deux balles, alors il perdra le point dès l’engagement.<br>
Le « relanceur », est le joueur qui s’apprête à renvoyer la balle servie par son adversaire.
<br> <br>
<h3>Les Changements de côtés:</h3>
A la fin du premier jeu, les joueurs changent de côté. Puis, ils changeront de côté tous les deux jeux jusqu'a la fin du set. <br>
Ils procèderont ainsi jusqu'à la fin du match. En cas de Tie-break, les joueurs changent de côté tous les 6 points. <br>
Par exemple si il y a 4/2, les joueurs doivent changer de côté (4+2=6).
<br> <br>
<h3>Le jeu:</h3>
Tout d'abord, il faut savoir que pour le décompte des points, un jeu se compose de 4 points.<br><br>
Lorsque nous devons ennoncer les points, nous commençons <big> <strong>toujours</strong> </big> par ceux du service et ensuite ceux du relanceur.<br><br>
Pas de point : « zéro »<br> <br>
Premier point : « 15 » <br> <br>
Deuxième point : « 30 » <br> <br>
Troisième point : « 40 » <br> <br>
Quatrième point : « jeu » <br> <br>
Pour la petite histoire, nous comptons aujourd'hui les points ainsi car à l'époque, lorsque les points n'existaient pas, quand nous en perdions un, le joueur qui l'avait perdu devait reculer de pas, puis 30 etc.<br>
Si les 2 joueurs ont marqué 3 points, alors on compte « 40A ».<br><br>
Au tennis, un set correspond à 6 jeux. Il est parfois possible qu'il y est « 5-5 », il faut donc aller jusq'à 7 jeux car il faut qu'il y est deux points d'écart.<br>
En revanche si le match est serré est qu'il venait à y avoir « 6-6 », on effectue alors un <big><strong>«Tie-Break»</strong></big>.<br>
Un <big><strong>«Tie-Break»</strong></big> est un jeu <big><strong>décisif</strong></big>. On compte les points du <big>tie-break</big> comme ceci :<br>
« Zéro », « 1 », « 2 », « 3 », … jusqu'à 7. Le premier à 7 remporte le point décisif et donc le set à condition d'avoir deux point d'écart avec son adversaire.<br>
Au début du « jeu décisif », le joueur qui démarre au service va servir une fois, puis chacun servira deux fois jusqu'à la fin du tie-break.
<h2 id="ancre3">Les catégories d'age au tennis</h2>
Comme dans tous les sports, afin que les jeunes ne jouent pas contre des plus expérimentés; je pense que vous le savez il exite des <strong><big>catégories d'âge</big></strong>
<h3>Les Jeunes:</h3>
17/18 ans : nés en 2000, 2001.<br>
15/16 ans : nés en 2002, 2003.<br>
13/14 ans : nés en 2004, 2005.<br>
11/12 ans : nés en 2006, 2007. <br> <br>
<h3>Les Adultes:</h3>
<big>Seniors</big> nés avant 2001.<br>
35+ : nés de 1979 à 1983 inclus.<br>
40+ : nés de 1974 à 1978 inclus.<br>
45+ : nés de 1969 à 1973 inclus.<br>
50+ : nés de 1964 à 1968 inclus.<br>
55+ : nés de 1959 à 1963 inclus.<br>
60+ : nés de 1954 à 1958 inclus.<br>
65+ : nés de 1949 à 1953 inclus.<br>
70+ : nés de 1944 à 1948 inclus.<br>
75+ : nés de 1939 à 1943 inclus.<br>
</p>
</body>
</html>
et voici mon code CSS:
header{
background-color:#FE0133;
height: 70px;
width: 1000px;
position:relative;
font-family:mapolice;
}
body {
text-align:center;
}
.left{float:left}
.right{float:right;}
.logo {
color:#fff;
font-size: 50px;
text-transform: uppercase;
line-height: 70px;
font-weight: 800;
font-family:mapolice;
}
@font-face{
font-family:mapolice;
src: url(Ineptic.otf);
}
.container {
width: 1000px;
margin: auto;
}
.menu {
padding:0;margin: 0;
}
.menu .title {
display: inline-block;
float: left;
position: relative;
padding:23px 10px;
transition: 1.5s;
}
.menu .title a {
color:#fff;
text-decoration:none;
text-transform: uppercase;
font-weight: 700;
font-size: 20px;
}
.menu .title:hover {
background-color: #AE0000;
}
.menu .sous_menu {
display: block;
position: absolute;
visibility:hidden;
height: 0;
top: 65px;
left: 0;
transform: scaleY(0);
transform-origin: 50% 0;
transition: transfrom 1s ease;
background-color: #fff;
box-shadow: 0 2px 3px rgba(34,36,38,.15);
border: 1px solid rgba(34,36,38,.15);
border-radius: 0 0 5px 5px;
}
.menu .title:hover .sous_menu {
visibility: visible;
height: auto;
transform: scaleY(1);
}
.menu .sous_menu li {
padding: 0;
display:inline-block;
color: #000;
float: left;
width: 150px;
margin-left: -40px;
padding: 5px;
transition: 1.5s;
}
.menu .sous_menu a {
text-transform: none;
color: #242424;
padding: 0 0 0 5px;
font-weight: normal;
font-size: 17px;
}
.menu .sous_menu li:hover {
background-color: #f9f9f9;
border-left: 3px solid #3498db;
}
body{
width: 1000px;
margin: auto;
}
h2{
font-size: 50px;
font-family:mapolice;
}