Modifier tous les onglets du site en une fois ?

jeff.hpc · 14/08/2011, 11h47

Bonjour à tous.

Tout d'abord, veuillez m'excuser si je ne poste pas exactement dans la bonne section, j'ai hésité entre XHTML et CSS, mais vu que le paramétrage de mon menu se trouve sur mes pages XHTML, je tente ici.

Je débute complètement dans la programmation, que je découvre depuis quelques jours seulement.

Ma question est la suivante :

Sur mes pages HTML, j'ai créé un menu, avec plusieurs onglets (qui sont ensuite mis en forme par le .css donc)

Lorsque je veux modifier ou ajouter un onglet, (avec un nouveau nom et le lien qui pointe sur la nouvelle section / page) je suis donc obligé d'aller modifier chaque page déjà existante... Je suppose que ce n'est pas de la sorte qu'il faut programmer, car lorsque le site fait plusieurs dizaines voire centaines de page, j'imagine mal qu'il faille repasser sur toutes les pages pour faire à chaque fois la modif dans la partie "menu"...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="menu">
		<li><a href="accueil.html">Accueil</a></li>
		<li><a href="club.html">Le Club</a></li>
		<li><a href="sorties.html">Sorties</a></li>
		<li><a href="forum.html">Le Forum</a></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="infos.html">Infos</a></li>
	</ul>

(rien que dans la partie "infos" notamment, je vais avoir une vingtaine de pages, et à terme, des onglets "déroulants")

Dans ce cas, pourriez-vous m'expliquer comment programmer pour avoir dans un seul fichier les paramètres de mon menu SVP, afin de pouvoir corriger ou modifier ces paramètres à un seul endroit, comme pour le css ?

C'est d'ailleurs très probablement à ce niveau que ça se joue, mais je ne sais pas de quel façon cela s'écrit...

Merci d'avance et désolé si c'est une question de gros gros newbee...

Bonne journée

Jeff

jreaux62 · 14/08/2011, 13h15

Bonjour,
le mieux que je puisse te dire est de t'intéresser à php ...
-> PHP : Le tutoriel pour grands débutants pressés
-> Div et CSS : une mise en page rapide et facile

Le principe d'une mise en page est le suivant :
- une page "gabarit",
- des fichiers en include.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
...
</head>
<body>
 
<!-- header -->
<div id="header"><?php include ('header.php'); ?></div>
 
<!-- menu -->
<div id="menu"><?php include ('menu.php'); ?></div>
 
<!-- contenu -->
<div id="contenu"><?php include ('contenu.php'); ?></div>
 
<!-- footer -->
<div id="footer"><?php include ('footer.php'); ?></div>
 
</body>
</html>

ludojojo · 16/08/2011, 16h55

+1
Tu peux également passer par du JS si tu ne veux pas utiliser de php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.write('script type="text/javascript" src="monScript.js" ></script>')

jeff.hpc · 17/08/2011, 08h56

Bonjour à tous.

Merci pour vos réponses, effectivement, c'était vers PHP qu'il fallait se tourner (quand je vous disais que je n'y connaissais encore pas grand chose

:mrgreen )

Un petit fichier php et hop, toutes les pages modifiées en une seule fois, parfait !

Pour le JS, j'ai vu ça également, mais je vais déjà essayé de verrouiller les bases avant d'aller plus loin...

jeff.hpc · 17/08/2011, 12h23

Bon, j'ai encore une question au sujet de ces onglets (mais peut-être faut-il créer un nouveau sujet ?)

Je souhaite que l'onglet actif soit d'une couleur spécifique (dans le cas présent, la même couleur que la page active)

J'ai bien lu un tuto, ainsi que ce sujet : http://www.developpez.net/forums/d12...ctif-menu-css/

et malgré quelques tests, ça ne fonctionne pas...

pour rappel, le fichier "menu.php" qui gère la totalité de mon menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="menu">        
   	<ul id="onglets">
	   <li><a href="accueil.php">Accueil</a></li>
	   <li><a href="club.php">Le Club</a></li>
	   <li><a href="sorties.php">Les Sorties</a></li>
	   <li><a href="forum.php">Le Forum</a></li>
	   <li><a href="infos.php">Infos</a></li>
	   <li><a href="contact.php">Contact</a></li>
	</ul>  
</div>

et "l'entête" de toutes mes pages, qui permet donc d'afficher le menu (encore merci pour l'explication) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<body>
 
		<?php include("header.php"); ?>
 
		<?php include("menu.php"); ?>
  
		<div id="corps">
		
			<h2>Le Club</h2>

Merci d'avance si vous avez une piste de travail et de recherche (je parcours google sans succès depuis un certain temps, si ça se trouve c'est quelque chose de tout simple...)

jreaux62 · 17/08/2011, 12h35

Bonjour,
l'idée est d'ajouter id="pageencours" sur le li correspondant du menu.

Ca peut se faire en comparant le nom de page dans le menu avec le nom de la page courante.

ps : je te conseille de construire le menu dynamiquement à partir d'un array.

jreaux62 · 17/08/2011, 13h17

Si j'anticipe la question suivante "comment faire ?" :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="menu">
   	<ul id="onglets">
<?php
$array_pages = array('accueil.php', 'club.php', 'sorties.php', 'forum.php', 'infos.php', 'contact.php');
$array_titre = array('Accueil', 'Le Club', 'Les Sorties', 'Le Forum', 'Infos', 'Contact');
foreach($array_pages as $key => $url) {
	// page en cours ?
	$style_menu_li = (strpos($_SERVER['PHP_SELF'], '/'.$url))? ' id="menuencours"' : '';
?>
	   <li<?php echo $style_menu_li; ?>><a href="<?php echo $url; ?>"><?php echo $array_titre[$key]; ?></a></li>
<?php
}
?>
	</ul>
</div>

jeff.hpc · 17/08/2011, 16h07

génial ça !

je viens de modifier le menu.php avec ton code, super simple pour ajouter des onglets.

un grand merci !

En revanche j'ai un peu de mal pour la modif du css de la partie onglets pour prise en compte de la nouvelle couleur... j'ai fait plusieurs tests mais pas moyen de modifier...

(rappel : je débute depuis quelques jours seulement avec xhtml / css

)

jreaux62 · 17/08/2011, 16h57

Le menu en cours a : id="menuencours"

Donc, pour le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#menuencours { 
	/* ici les propriétés css du menu en cours */
}
#menuencours a { 
	/* ici (éventuellement) les propriétés css du lien du menu en cours */
}

Tu peux lire ce tuto : Débutants en CSS

jeff.hpc · 17/08/2011, 19h27

Bon, et bien c'est pas faute d'essayer, mais ça marche pas...

J'ai copié texto ce code dans mon style.css, fait les modifs suivantes, mais rien...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
ul#menuencours { 	/* ici les propriétés css du menu en cours */
	color: #ff0000;
	height: 55px; 
	width: 90%;
	}

jreaux62 · 17/08/2011, 19h34

-> mettre un espace entre ul et #menuencours

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
ul #menuencours { 	/* ici les propriétés css du menu en cours */
	height: 55px; 
	width: 90%;
}
ul #menuencours a {
	color: #ff0000;
}

ou écrire (avec li, sans espace)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
li#menuencours { 	/* ici les propriétés css du menu en cours */
	height: 55px; 
	width: 90%;
}
li#menuencours a {
	color: #ff0000;
}

jeff.hpc · 18/08/2011, 15h02

Et cette fois ça fonctionne !

Un grand merci à tous pour l'aide.

Maintenant, je suis en train de me casser les dents sur le formulaires de mail...

Le formulaire existe et je reçois un mail, mais qui n'est pas alimenté par les données du formulaire...

Je viens de consulter un certain nombre de tuto, et cette fois je sèche...

Je vais ouvrir un autre sujet je pense.

jreaux62 · 18/08/2011, 15h15

-> Envoyer un mail en PHP
-> Créer un formulaire de contact simple

Vérification d'un formulaire :
1/ on fait une PREMIERE vérification (facultative) en javascript AVANT d'envoyer le formulaire (onsubmit ...)
2/ on fait une DEUXIEME vérification (obligatoire) en php (tout php !). Au cas où javascript est désactivé, c'est la dernière "barrière" !
-> FORMULAIRE ET TRAITEMENT sur la même page

ludojojo · 19/08/2011, 15h00

Citation:

Envoyé par jeff.hpc

Maintenant, je suis en train de me casser les dents sur le formulaires de mail...

Le formulaire existe et je reçois un mail, mais qui n'est pas alimenté par les données du formulaire...

Je viens de consulter un certain nombre de tuto, et cette fois je sèche...

Je vais ouvrir un autre sujet je pense.

Voici un exemple de mail avec récupération de données dans l'URL

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
	$subject = utf8_decode($_GET['p2']);
	$mail_expediteur = 'moi@domaine.fr';
	$to = $_GET['p1'];
	$headers = 'Mime-Version: 1.0'."\r\n";
	$headers .= 'Content-type: text/html; charset=utf-8'."\r\n";
	$headers .= "\r\n";
	$msg = "Bonjour,<br><br>";
	$msg .= $_GET['p2'];
	$msg .= "<br><br><br><font color=\"#707070\">Ce message est généré automatiquement. Vous ne pouvez pas y répondre</font>";
	
	if(mail($to, $subject, $msg, $headers, "-f".$mail_expediteur))
		echo '<script type="text/javascript">alert("un mail vient de vous être envoyé");window.close();</script>';
?>

Tu peux également le faire avec du POST pour l'envoi par formulaire. :-)
Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// récuperation des variables provenant du formulaire

$nom		= $_POST['nom'];
$prenom 	= $_POST['prenom'];
$mail 		= $_POST['mail'];
$commentaires	= $_POST['commentaires'];

//E-mail auquel sera envoyé le formulaire
$destinataire = 'tomemail@domaine.fr';
//sujet du mail envoyé
$sujet = 'test';

//test pour vérifier que les champs sont bien tous remplis !!

if( !empty($nom) && !empty($prenom) && !empty($direction) && !empty($service) && !empty($mail) && !empty($commentaires))
{
	$message = " Nom : $nom\n Prénom : $prenom\n E-mail : $mail\n Commentaires : $commentaires";
	// On envoi le mail
	if( mail($destinataire, $sujet, $message) )
        {echo 'OK';}
        else {echo 'KO';}

16/08/2011, 16h55	#3
ludojojo Membre Expert Ludovic Solczynski Développeur .NET Inscription : avril 2008 Messages : 1 446 Détails du profil Informations personnelles : Nom : Ludovic Solczynski Localisation : France Informations professionnelles : Activité : Développeur .NET Secteur : Administration - Collectivité locale Informations forums : Inscription : avril 2008 Messages : 1 446 Points : 2 179 Points : 2 179	+1 Tu peux également passer par du JS si tu ne veux pas utiliser de php : Code : Sélectionner tout - Visualiser dans une fenêtre à part document.write('script type="text/javascript" src="monScript.js" ></script>') __________________ Aide les autres... Et les autres t'aideront.... Mon site DVP Mon site perso N'oubliez pas de voter pour les messages dont la réponse est pertinente
	10

17/08/2011, 12h35	#6
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour, l'idée est d'ajouter id="pageencours" sur le li correspondant du menu. Ca peut se faire en comparant le nom de page dans le menu avec le nom de la page courante. ps : je te conseille de construire le menu dynamiquement à partir d'un array. __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

18/08/2011, 15h15	#13
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	-> Envoyer un mail en PHP -> Créer un formulaire de contact simple Vérification d'un formulaire : 1/ on fait une PREMIERE vérification (facultative) en javascript AVANT d'envoyer le formulaire (onsubmit ...) 2/ on fait une DEUXIEME vérification (obligatoire) en php (tout php !). Au cas où javascript est désactivé, c'est la dernière "barrière" ! -> FORMULAIRE ET TRAITEMENT sur la même page __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

17/08/2011, 08h56	#4
jeff.hpc Invité de passage Jean-Frédéric Inscription : août 2011 Messages : 8 Détails du profil Informations personnelles : Nom : Jean-Frédéric Localisation : France Informations forums : Inscription : août 2011 Messages : 8 Points : 0 Points : 0	Bonjour à tous. Merci pour vos réponses, effectivement, c'était vers PHP qu'il fallait se tourner (quand je vous disais que je n'y connaissais encore pas grand chose :mrgreen ) Un petit fichier php et hop, toutes les pages modifiées en une seule fois, parfait ! Pour le JS, j'ai vu ça également, mais je vais déjà essayé de verrouiller les bases avant d'aller plus loin...
	00

17/08/2011, 16h07	#8
jeff.hpc Invité de passage Jean-Frédéric Inscription : août 2011 Messages : 8 Détails du profil Informations personnelles : Nom : Jean-Frédéric Localisation : France Informations forums : Inscription : août 2011 Messages : 8 Points : 0 Points : 0	génial ça ! je viens de modifier le menu.php avec ton code, super simple pour ajouter des onglets. un grand merci ! En revanche j'ai un peu de mal pour la modif du css de la partie onglets pour prise en compte de la nouvelle couleur... j'ai fait plusieurs tests mais pas moyen de modifier... (rappel : je débute depuis quelques jours seulement avec xhtml / css )
	00

18/08/2011, 15h02	#12
jeff.hpc Invité de passage Jean-Frédéric Inscription : août 2011 Messages : 8 Détails du profil Informations personnelles : Nom : Jean-Frédéric Localisation : France Informations forums : Inscription : août 2011 Messages : 8 Points : 0 Points : 0	Et cette fois ça fonctionne ! Un grand merci à tous pour l'aide. Maintenant, je suis en train de me casser les dents sur le formulaires de mail... Le formulaire existe et je reçois un mail, mais qui n'est pas alimenté par les données du formulaire... Je viens de consulter un certain nombre de tuto, et cette fois je sèche... Je vais ouvrir un autre sujet je pense.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email