Bonjour,

Voilà j’ai un menu en Css qui fonctionne très bien je voudrais lui apporter une modification.

Lorsque je clique sur un lien j’aimerai qu’il affiche un texte dans un endroit bien précis de la page.

Voici mon code Html :

<nav>
              	                                                  <div class="menu">
                                                                        <ul>
                  	
                  	<li class="menu-Accueil"> <a href="accueil.html" >Accueil</a></li>
                  	<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html"target="myFrame2">Drapeaux</a></li>
                  	<li class="menu-Carte">   <a href="../dossier_carte/carte_index.html" target="myFrame2">Cartes SVG</a></li>
                  	<li class="menu-Blasons"> <a href="../dossier_armorial/armorial_index.html" target="myFrame2">Blasons</a></li> 
                  	<li class="menu-Divers">  <a href="../heure_Gmt/heure_GMT_index.html" target="myFrame2">Heures GMT</a></li>  
                        <li class="menu-Divers">  <a href="../dossier_hymnes/hymnes_index.html" target="myFrame2">Hymnes Nationaux</a></li>
                        <li class="menu-Divers">  <a href="../dossier_capital/capital_index.html" target="myFrame2">Capital du Monde</a></li>
                                                                        </ul>
                                                                        </div>           
                       </nav>

Mon code Css

 body{
    background: #000;
    font-family: ,Calibri, serif;
    margin: 0px;
    padding: 0px;}
nav{
	width: 100%;
    color: #fff;}
nav ul{
	  margin: 0px;
	  padding: 0px;
	  overflow: hidden; }
nav li{
	   list-style-type: none;
	   float: left;}
nav a{
	 display: inline-block;
	 text-decoration: none;
	 padding: 20px 20px;
	 color: #FFF;}  
.menu-Accueil:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Drapeaux:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Carte:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);}
.menu-Blasons:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);  }
.menu-Divers:hover{
	border-top: 5px solid #e44d26;
	background-color: rgb(228, 77, 38, 0.15);   }
nav li:hover a{
	padding: 15px 30px 20px 30px;   }
.table{
	display: table;
	margin: 0 auto;    }
a:link { 
     color:#ffffff;
 text-decoration:none; }

J vous remercie de votre aide

Cordialement

Max

Salut je veut bien t'aider mais tu n'ai pas assez précis dans ce que tu dit !

• quel texte !
• où ?

Salut noopy,

chaque lien ouvre une page chaque page a un titre c'est se titre que je veut qu'il affiche ou,

en haut a droite de la même page ou se trouve le menu qui reste en permanence visible puisque la page s'ouvre dans une frame.

j’espère avoir répondu aux questions.

@+

Max

Re salut, alors soit j'ai pas compris ou alors ... je ne vois pas ou ce trouve la difficulter dans chaque pages tu ajoute un <h1></h1> puis en CSS tu modifie ça taille puis sont alignement dans sont parent

<h3>Ton titre</h3>

h3{
	display:inline-block;
	float:right;
}

Voilà après j'ai peut être pas bien compris

Re,

J'ai du mal m'expliquer. Je reprend Sur ma page "Accueil" j'ai mon menu

                                Accueil    Drapeaux     Carte SVG     Blasons ect.......

Lorsque je clique sur ex: "Drapeaux" je voudrais que s'affiche le mots drapeaux en à gauche de ma page "accueil"

J’espère être plus explicite

@+

Max

Ah oki je comprend mieux alors tu peut le faire en PHP je t'invite à regarder cette partie du cour --> Transmettre des données avec l'URL

sinon je te donne ce qu'il te faut dans le lien de ton menu

exemple pour drapeau 

<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html"target="myFrame2">Drapeaux</a></li>
// Modifie en 
<li class="menu-Drapeaux"><a href="../dossier_drapeaux/drapeaux_index.html?titre=drapeaux"target="myFrame2">Drapeaux</a></li>

puis dans la page ou il y aura le titre

<h1><?php echo $_GET['titre']; ?></h3>

Voilà

Re,

Je viens d'essayer sa ne fonctionne pas ou alors????

ah oui dsl je l'ai pas dit car pour moi c'est logique mais le PHP et un langage serveur il te faut une application capable de comprendre ce langage ou alors mettre ta page sur un serveur FTP il faut aussi que tu change l’extension de la page ou le titre va s'afficher de "*.html" en "*.php"

Re,

Non je ne peut pas sa me changerez tous mon systeme

sans passer par du php je ne pense pas que cela soit possible ou alors peut être via le javascript mais je ne connais pas encore ce language...

Re,

Je te remercie je vais essayer du côté du javascript

Bonne soirée

Bonsoir, tu ne peux pas faire ça en php car c'est un langage côté serveur, il n'y a donc pas de rechargement DYNAMIQUE de ta page, le css ne te permet pas non plus de faire ça car c'est un langage de mise en forme et ne possède aucun dynamisme. Pour faire ce que tu veux, tu es effectivement obligé d'utiliser le javascript.

Hello,

Alors perso ta demande n'est pas claire du tout  

- Tu a la pseudo-class :target qui permet de détecter un clic sur un élément HTML, on peut afficher un texte.

- Langage serveur, passer à paramètre GET[] dans l'url, l'analyser et générer la page HTML en retour.

- Idem mais avec Ajax (js+php ou autre), aucun rechargement de la page, seulement l'élément HTML (text) à afficher.

- Annuler l'action du clic sur un lien HTML en Javascript, c'est possible, mais du coup je ne vois pas l'intérêt de passer par un lien.

Ce que tu demandes semble simple mais tu l'expliques mal , ou alors tu as un problème de conception ( navigation mal pensée)

Je trouve que tu as été on ne peut plus précis pour décrire quel est ton problème. Peu importe le texte et peu importe où il doit s'afficher. Le point important est que tu veux établir un lien entre deux éléments qui n'ont peut-être aucun lien du point de vue de la structure de ton code html. Pour établir ce lien, peut-être inexistant, tu es obligé d'utiliser le javascript, car le javascript représente ton code html sous la forme de DOM, à ce que je saches (je me trompe peut-être), en php il n'y a pas de DOM.

me_moi: je te félicite, moi quelqu'un qui m'expose son problème comme tel me laisse dans le floue, d'ailleurs les solutions sont longues à arrivées...

On peut en effet parcourir et modifier le DOM via le JS, ou avec certaines librairies spécialisées.

Tout faire sans langage serveur, on peut analyser l'url et récupérer des paramètres en JS, mais il ne faut pas transiter de données sensibles.

Finalement un Framework du style Angular serait adapté à la demande.

Sur ce je vous lasse car je ne m'intéresse qu'aux sujet bien explicites, bonne continuation 

Salut,

Tout comme Lucky13, j'avoue ne pas comprendre grand chose à ta demande.

D'après ce que j'ai compris, je serais tenté d'utiliser Vue.js :

1) Tu mets une div de ce type là où tu veux afficher ton texte (en haut à gauche de ta page si j'ai bien suivi) :

<div id="app">
  {{ message }}
</div>

2) Tu ajoutes ce script en bas de page avec les autres : 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Le texte que tu veux afficher'
  }
})

J'ai cru comprendre que tu n'avais que des fichiers HTML, avec cette méthode tu vas donc devoir faire cela pour chacune de tes pages. Cela aurait été plus simple avec des variables mais tu vas devoir trouver un moyen de faire autrement. Peut être en mettant le le texte dans un attribut du style "date-title" sur chacun des liens de ton menu puis en récupérant le contenu de cet attribut ?

Bon par contre si tu ne t'y connais déjà pas beaucoup en JS ce n'est probablement pas la meilleure idée de partir sur du Vue.js d'entrée de jeu...

-
Edité par Mewen_bzh 15 novembre 2017 à 14:08:03