Affecter une classe CSS à un élément HTML via PHP

par **Eyce** » 27 avr. 2011, 16:31

Okay, je crois que j'ai pigé...

Je vais voir si tout ça fonctionne dans mon cas. Merci en tout cas de vos réponses rapides !

par **Mazarini** » 27 avr. 2011, 15:54

Bonjour,

A mon avis il ne faut pas regarder $_SERVER['DOCUMENT_ROOT']

Une solution est de mettre une petite fonction en début du fichier du menu (menu.php ?)

function afficheClass($page,$item)
{
   if ($item == $page)
   {
       echo 'classdelapage';
   }
   else
   {
       echo 'classdunlien';
   }
}

au début de chaque page, tu mets $page='index'; // en remplacant index par ba ou liens

Et dans le menu

      <li class="<?php afficheClass($item,'index'); ?>"><a href="./index.php">Accueil</a></li>
      <li class="<?php afficheClass($item,'ba'); ?>"><a href="./ba.php">Bandes annonces</a></li>
      <li class="<?php afficheClass($item,'liens'); ?>"><a href="./liens.php">Liens & Contacts</a></li>

Par la suite tu peux adapter en calculant $page en début de menu.php mais en choisissant la bonne valeur de $_SERVER. la fonction phpinfo() peut t'aider à trouver la bonne valeur, mais il faut faire attention entre le nom du fichier inclus ou le nom du script initial

Edit ca doit completer la réponse précédente

par **Eyce** » 27 avr. 2011, 15:48

Okay pour cette partie, et par la suite comment est-ce que je peux attribuer l'attribut HTML?

Un genre de fonction setclass quoi ^^"

Merci en tout cas pour cette 1e partie de réponse, je teste ça de suite.

par **xTG** » 27 avr. 2011, 15:40

Il faut travailler avec un switch comme tu l'as fait mais il faut épurer la variable.
Déjà l'index DOCUMENT_ROOT pointe vers le dossier et non le fichier.
Donc il faut utiliser SCRIPT_NAME.
Ensuite il faut garder uniquement le fichier :

$script_name = $_SERVER['SCRIPT_NAME'];
// On recherche le dernier / et on récupère tout ce qui se trouve après
$nom_fichier = substr($script_name, strrpos('/',$script_name));
switch($nom_fichier)
{

par **Eyce** » 27 avr. 2011, 15:14

Bonjour à tous.

Voilà, j'ai un site HTML à faire et j'ai (pour bien faire les choses) inclus un seul fichier de menu pour l'ensemble du projet.

Seulement mon souci arrive ici. Je voudrais que lorsqu'on est sur la page index (par exemple), l'élément du menu de la page index soit affiché différemment (dans mon cas, souligné.)

Je vous mets en lien mes fichiers :

Mon fichier HTML de menu :

Code : Tout sélectionner

<ul>
        	<li><a href="./index.php">Accueil</a></li>
            <li><a href="./ba.php">Bandes annonces</a></li> 
            <li class="right"><a href="./liens.php">Liens & Contacts</a></li>  
        </ul>

Mon fichier HTML de page d'index :

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8" />
  <meta name="keywords" content="###, BA, bande-annonce, bande annonce, bandes, annonce, thierry, cohen, thierry cohen, littérature, livre, lecture" />
  <meta name="description" content="###, Le premier site de Bandes annonces consacrées à la littérature" />
  <link rel="stylesheet" href="design.css" />
  <title>###</title>
</head>

<body>

	<div id="container">
   	 	<header>
    	</header>
    
    	<nav>
		<? require_once("nav.php"); ?>
    	</nav>
    
   		<div id="content">
    	</div>
    
    	<div id="foot">
   		<? require_once("foot.php"); ?>
		</div>
    
    </div>
</body>
</html>

Et enfin mon fichier CSS :

Code : Tout sélectionner

@charset "utf-8";
/* CSS Document */

@font-face{
font-family:'myriadpro';
src:url('http://thierry-cohen.fr/siteBA/MyriadPro-Regular.otf');
}

* {
}

	body {
		font-family : 'myriadpro';
	}
	
		#container {
			width : 800px;
			margin : auto;
		}
	
			#header {
			}
	
			nav {
				height: 30px;
				background-image : url("./rsc/a-p-menu.png");
				background-repeat: repeat-x;
				-moz-border-radius: 15px;
				-ms-border-radius: 15px;
				-o-border-radius: 15px;
				-khtml-border-radius: 15px;
				-webkit-border-radius: 15px;
				border-radius: 15px;
				-moz-box-shadow: 5px 5px 10px #888;
				-ms-box-shadow: 5px 5px 10px #888;
				-o-box-shadow: 5px 5px 10px #888;
				-khtml-box-shadow: 5px 5px 10px #888;
				-webkit-box-shadow: 5px 5px 10px #888;
				box-shadow: 5px 5px 10px #888;
			}
			
				nav ul {
					padding-top : 6px;
					font-size:14px;
				}
					
					nav ul li {
						display : inline;
						list-style-type:none;
						width : 150px;
					}
					
							nav ul li .right {
								margin-left : 450px;
							}
					
						nav ul li a {
							height : 18px;
							color : white;
							-moz-border-radius: 9px;
							-ms-border-radius: 9px;
							-o-border-radius: 9px;
							-khtml-border-radius: 9px;
							-webkit-border-radius: 9px;
							border-radius: 9px;
							padding : 0 10px 0 10px;
							text-decoration: none;
						}
						
							nav ul li a:hover {
								-moz-box-shadow: 3px 3px 3px #888;
								-ms-box-shadow: 3px 3px 3px #888;
								-o-box-shadow: 3px 3px 3px #888;
								-khtml-box-shadow: 3px 3px 3px #888;
								-webkit-box-shadow: 3px 3px 3px #888;
								color : black;
								text-decoration: none;
								background-image : url("./rsc/a-p-lienhover.png");
							}
	
			#content {
			}
	
			#foot {
				font-size : 10px;
			}
	
				prefooter {
				}
				
					prefooter p {
					}
				
				footer {
				}

Ce que je voudrais faire, c'est récupérer via PHP le nom de ma page active, pour ensuite affecter un attribut de type "class" en HTML à l'élément du menu correspondant.

Ceci me permettrait par la suite d'attribuer un style CSS spécifique à l'élément du menu en question, sans avoir besoin pour autant de faire un menu par page. Je voudrais que la maintenance soit aisée, et pour ce faire, il est hors de question de forcer mes "successeurs" à changer le menu dans chaque page.

Du coup je galère ^^"

J'avais essayé de récupérer le nom de la page "active" avec ce code :

Code : Tout sélectionner

switch($_SERVER['DOCUMENT_ROOT']){
			case 'index.php':
				echo 'index';
			break;
			case 'ba.php':
				echo 'ba';
			break;
			case 'liens.php':
				echo 'liens';
			break;
			case 'default':
				echo 'def';
			break;
		}

Mais vous pensez bien ça n'a pas marché. Si quelqu'un pouvait soit m'aider soit m'aiguiller vers une réponse. Après des recherches sur la toile et des recherches de doc moi-même, je suis toujours aussi perdu. Pourtant, ça doit bien exister qqpart, ça ne me paraît pas infaisable.

PS : Je suis prêt à utiliser un script JS si c'est plus simple qu'en PHP...

Voilà, merci par avance de votre aide.

Affecter une classe CSS à un élément HTML via PHP

Répondre

Étendre la vue Revue du sujet : Affecter une classe CSS à un élément HTML via PHP

Re: Affecter une classe CSS à un élément HTML via PHP

Re: Affecter une classe CSS à un élément HTML via PHP

Re: Affecter une classe CSS à un élément HTML via PHP

Re: Affecter une classe CSS à un élément HTML via PHP

Affecter une classe CSS à un élément HTML via PHP