8791 sujets

Développement web côté serveur, CMS

[Résolu] Modifier le style d'un include

Salut à toutes et tous,

Je suis un complet débutant en php.
J'utilise un include sur toutes mes pages pour afficher mon menu — chose très classique.
Mon souci est : selon mes pages, mon menu doit avoir une caractéristique css différente, un background-poisition sur un lien.
Je détaille…
Dans toutes mes pages, j'écris ça : 
<?php include("../../../menu_principal.php");  ?>

Mon menu est : 
<ul id="menu" >
    <li><a class="accueil" href="accueil.php">&nbsp;</a></li>
    <li><a class="auteur" href="pages/auteur.php">&nbsp;</a>
    	<ul class="sousMenu">
        <li><a href="pages/auteur/livres.php">Livres</a></li>
            <li><a href="pages/auteur/articles.php">Articles</a></li>
            <li><a href="pages/auteur/sciences.php">Sciences</a></li>
        </ul>
    </li>
    <li><a class="bio" href="pages/bio.php">&nbsp;</a></li>
    <li><a class="contact" href="pages/contact.php">&nbsp;</a></li>
  </ul>


Par exemple, quand on se trouve sur la page d'Accueil, je voudrais que le <li><a class="auteur"> affiche un background-position ordinaire (top left). Mais quand on est sur cette page Auteur, je voudrais que le background-position devienne 0px -37px.

Ça doit être simple, mais ça fait des heures que je traîne là-dessus — Quelqu'un peut-il m'aider, s'il vous plaît ?

Par avance, merci…
Modifié par supunna (10 Sep 2012 - 14:19)
Il te suffit simplement connaitre la page sur laquelle tu te situes et d'ajouter une classe dynamiquement sur la lien correspondant et qui te servira à cibler la page en CSS..

<li><a class="accueil <?php if($page == 'accueil') echo 'active'; ?>" href="accueil.php">&nbsp;</a></li>
Merci de votre aide…
J'ai bien compris la logique, mais comment fait-on pour ajouter une classe dynamiquement sur le lien correspondant ?
Salut,

Pour ma part voici ce que je fais, ce n'est pas forcément ce qu'il y a de plus simple / propre, mais ça fonctionne :

J'attribue à toutes mes pages un numéro que je spécifie dans une variable que je définis avant l'inclusion du menu.

<?php $page = 1; ?>


Dans la page menu qui est inclue dans les autres pages, je commence par attribuer une valeur par défaut à cette variable (si jamais j'oublie de l'attribuer dans une page)

<?php if (!isset($page)) { $page = 0; }


Puis, je créé une variable vide par élément de menu qui peut changer.


$active_1 = '';
$active_2 = '';

...

Ensuite, je teste dans une boucle switch la valeur de la variable $page définie sur la page principale

switch($page)
{
    case 1 : $active_1 = ' class="active"'; break;
    case 2 : $active_2 = ' class="active"'; break;
}


Enfin je répartis ces variables dans le menu en HTML


<ul>
   <li><a href="page_1.php"<?php echo $active_1; ?>>Lien 01</a></li>
   <li><a href="page_2.php"<?php echo $active_2; ?>>Lien 02</a></li>
</ul>


Il suffit pour terminer d'attribuer le style de ton lien "actif" dans ton CSS

a.active {
...
}
Je me demande si le faire en javascript ne serait une meilleure idée, d'après ce que je peux lire sur le Net. Mais je suis une bille en javascript également Smiley confus
J'ai trouvé ce script qui fonctionne, mais pas tout à fait…
function highlightMenu(){
var cettePage = document.location.href;
//pour eviter les liens internes
if(cettePage.indexOf('#') != -1)
   cettePage = cettePage.substring(0,cettePage.indexOf('#'));
 
for(var i=0;i < document.links.length;i++){
 
    var lien = document.links[i].getAttribute('href');
	//IE retourne l'url total du lien tandis que NS retourne que l'attribut href
	//on contourne le probléme en comparant les derniers caractères
    if( cettePage.substring(cettePage.length-lien.length,cettePage.length) == lien ){
         document.links[i].className = 'menuselected';
    //cas de la homepage appelée depuis la racine /
    }else if( (document.location.pathname == '/') && ( (lien.substring(0,6) == 'index.') || ( (cettePage + 'index.') == lien.substring(0,cettePage.length + 6) ))){
         document.links[i].className = 'menuselected';	
    }
}
}
 
highlightMenu();

La class menuselected {color:orange} est bien chargée, mais avant ma class .menus li a qui définit la couleur ordinaire de mes liens. Elle est donc annulée. Je ne comprends pas pourquoi. Pourtant, dans ma feuille de style, je la place en dernier, et j'ai essayé toutes les places sur ma page php pour le script : dans le head, en fin de page, rien n'y fait…[/i][/i][/i]
Modifié par supunna (12 Sep 2012 - 02:28)
En fait, même en CSS tout simplement, le souci est le même :
Dans le head, après le lien vers ma feuille de styles, je place une balise <style> pour déclarer un nouveau style… Normalement, il devrait annuler le style précédent (déclaré dans me feuille CSS) mais c'est le contraire qui se passe.
La feuille CSS chargée avant écrase le nouveau style. Smiley sweatdrop 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-language" content="fr" />
<title>Test</title>
<link rel="shortcut icon" href="../../../images/favicon.png" type="image/png" />
<link rel="alternate" type="application/rss+xml" href="http://www.xxxxxx/rss.xml" title="Les dernières parutions" />
<link href="../../../styles/styles_pages.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
a.politique {
	background-position: 0px -37px;
}
</style>
</head>
<body>
Problème résolu… C'était tout simplement un souci de déclaration CSS — Plus tu indiques de sélecteurs dans une règle, plus tu précises, plus cette déclaration l'emportera sur les autres, quel que soit l'ordre des déclarations.
div.classe {
    background-color: blue;
}
.classe {
    background-color: green;
}

ici, le fond sera bleu bien que la déclaration soit faite avant car le sélecteur est plus précis.
Sujet clos
Aller à