28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Une question de débutant ... j'en ai limite honte, mais impossible de trouver la réponse sur Google : sans-doute que cela n'existe pas, mais je préfère vérifier sur un forum tel que celui-ci.

J'ai un menu avec de très nombreux liens. J'aimerais que le lien de la page courante soit afficher en gras, est-ce possible en CSS ? Je sais que c'est possible en PHP, grâce à " if / else " mais imaginez le nombre de lignes pour un menu contenant énormément de lien ... j'ose espérer qu'il existe un moyen plus simple.

En connaissez-vous un ?
Merci d'avance.
Bonjour,

A ma connaissance ce n'est pas possible en css pur. Par contre c'est assez facilement réalisable en php.

<?php

$serverPath = 'http://www.monsite.fr';
$actualPage = $_SERVER['PHP_SELF'];
$linksArray = array('page1.html', 'page2.html', 'page3.html', 'page4.html');

foreach($linksArray as $link) {
    if(($serverPath . $actualPage) == $link) {
        echo '<a class="activeLink" href="' . $link . '"></a>';
    }
    else {
        echo '<a href="' . $link . '"></a>';
    }
}

?>


Voilà, code relativement optimisé mais non respectueux des standards du W3C mais ça, ça sera ton boulot Smiley cligne

Bonne journée,

Smiff.
Modifié par Smiff (08 Dec 2009 - 15:19)
Bonjour,

En CSS seulement, c'est bien évidement impossible... Comment veux-tu que le CSS sache quelle est la page en cours ?

La technique consiste à attribuer une classe spécifique au lien de la page en cours puis à styler cette classe.

Tu as donc deux solutions pour attribuer cette classe : soit en PHP si tu as un menu en include (par exemple) soit en HTML si le menu est répété dans chaque pages du site.

Pour ce qui est de la complexité du menu couplé au PHP, s'il est bien codé, ça ne devrait pas être le cas (enfin, pas trop).

EDIT après lecture du message de Smiff (désolée Smiff, c'est pas contre toi) : Ok, effectivement si tu fais comme ça, ça va vite être impossible à gérer, par contre :
<a href=""<?php if($pageID = "page" echo ' class="encours"'; ?>>Lien</a>

Avec $pageID défini en début de document et contenu un identifiant unique pour la page (page1, page2, par exemple).

C'est quand même plus sobre.
Modifié par Laurie-Anne (08 Dec 2009 - 15:23)
Bonsoir,

> Laurie-Anne : Je viens de voir ton édition de message et c'est pas contre toi non plus mais je vais défendre mon bifteck Smiley cligne

Ta solution est effectivement préférable sur un site à peu de pages et à peu de modifications ultérieures j'en conviens.

Par contre imagine devoir écrire un menu de 250 liens (hypothèse bien sûr Smiley cligne ), sans compter qu'à force de copier / coller en chaîne on arrive vite à faire quelques oublis (modifier la variable $pageID par exemple) qui sont particulièrement difficiles à réenvisager lors d'une erreur.

Je défends ma réponse sur quatres points :
- Pas besoin de définir manuellement l'id de la page actuelle => donc on évite les erreurs.
- La liste des liens peut venir d'une base de donnée, donc aucun besoin de les écrire en dur et même si c'était le cas ça serait moins long d'ajouter des entrées à un tableau que de réécrire à chaque fois le lien avec sa balise et tutti quanti.
- Vu le nombre de sites que j'ai du passer en xhtml valide pour des clients et où tous les liens des menus étaient écrits manuellement (pas de boucle)... je t'assure que j'aurai préféré corriger la syntaxe une fois dans une boucle que 3000 fois (j'exagère à peine Smiley cligne ), soit une fois pour chaque lien (rechercher / remplacer ne suffit pas toujours). Donc tant qu'à faire autant prévoir les évolutions dès le début.
- Euh non... pas de point 4 Smiley smile

Ce bout de code présente tout son intérêt s'il est au moins présent dans une fonction. Un simple appel à la fonction composera ainsi le menu sur la page appelante.

Dernière chose, personnellement j'utilise une classe menu beaucoup plus complexe afin de composer mes menus donc c'est vrai que ce bout de code sorti de son contexte peu sembler un peu trop compliqué pour un simple menu à peu de liens.

Voilà, voilà,

Bonne soirée,

Smiff.
Modifié par Smiff (09 Dec 2009 - 19:29)
Tout ça pour dire qu'il existe plusieurs solutions, chacune ayant ses avantages et ses inconvénients, et chacune étant plus ou moins adaptée selon le site à construire. Mais elles sont toutes bonnes Smiley cligne
Salut,

mistike a écrit :
Mais elles sont toutes bonnes Smiley cligne
C'est vrai mais l'avantage du principe proposé par Smiff est d'être beaucoup plus portable : qu'il s'agisse d'un "petit" ou d'un "grand site" cela fonctionnera et il suffira juste de changer l'alimentation du array (à la main ou depuis une table).

Donc dès qu'on utilise PHP ça me semble une bonne idée (contrairement au switch qui sera très vite fastidieux).

A noter que le tuto proposé par Florent s'adresse à des personnes ne connaissant pas forcément PHP et est donc simplifié à l'extrême.


Edit: ce principe a également un autre avantage : celui d'être applicable aussi bien à des sites statiques que dynamiques (un exemple dans ce post).
Modifié par Heyoan (09 Dec 2009 - 20:20)
Bonjour,

J'utilise encore la méthode du switch car je n'ai pas de gros sites à gérer. Il est certain qu'au delà d'une douzaine de pages spécifiques, l'écriture du switch serait intenable et rébarbative.
J'aimerai bien adopter la méthode indiquée par Smiff qui semble très efficace si elle me permettait de modifier du même coup tout un grand nombre de variables.

Ici un exemple de code semblable à celui j'utilise, exemple au complet (ou presque) pour 5 pages seulement pour bien que l'on se rende compte visuellement de l'ampleur que ça peut prendre…


<?php
	// ============================================
	// Système pour les adresses

	if ($_SERVER['HTTP_HOST'] == 'localhost'){
	$url = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/';
	// $url vaut  http://localhost/site_test/
 
	}
	if ($_SERVER['HTTP_HOST'] == 'exemple.com'){
	$url  = 'http://'.$_SERVER['HTTP_HOST'].'/';
	// $url vaut  http://www.exemple.com/
 
	}

	// ============================================
	// 1/ définir les onglets comme inactifs par défaut
	// 2/ puis les redéfinir actifs au cas par cas avec le switch 
	$accueil     = '<li class="inactif">';
	$fabrication = '<li class="inactif">';
	$services    = '<li class="inactif">';
	$photos      = '<li class="inactif">';
	$contact     = '<li class="inactif">';


	$page = $_GET['page'];
switch($page)
{
	case 'accueil' :
	$accueil    = '<li class="actif">';
	$page_id    = 'accueil';
	$page_inc   = $url.'pages/accueil.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="index, follow">';
	break;
	case 'fabrication' :
	$fabrication = '<li class="actif">';
	$page_id    = 'fabrication';
	$page_inc   = $url.'pages/fabrication.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="index, follow">';
	break;
	case 'services' :
	$services   = '<li class="actif">';
	$page_id    = 'services';
	$page_inc   = $url.'pages/services.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="index, follow">';
	break;
	case 'photos' :
	$photos     = '<li class="actif">';
	$page_id    = 'photos';
	$page_inc   = $url.'pages/photos.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="index, follow">';
	break;
	case 'contact' :
	$contact    = '<li class="actif">';
	$page_id    = 'formulaire';
	$page_inc   = $url.'contact/mail.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="noindex, nofollow">';
	break;
	default :
	$accueil    = '<li class="actif">';
	$page_id    = 'accueil';
	$page_inc   = $url.'pages/accueil.php';
	$page_title = 'le titre de la page dans la balise <title>';
	$page_desc  = 'le contenu de la meta-balise description';
	$meta_robots = '<meta name="robots" content="index, follow">';
	break;
}

?>

Coté HTML, le menu actif/inactif est re-écrit par PHP (je vous épargne les echo $page_title $page_desc et autres…)

	<ul id="menu">
		<?php echo $accueil; ?><a href="?page=accueil">accueil</a></li>
		<?php echo $fabrication; ?><a href="?page=fabrication">fabrication</a></li>
		<?php echo $services; ?><a href="?page=services">services</a></li>
		<?php echo $photos; ?><a href="?page=photos">photos</a></li>
		<?php echo $contact; ?><a href="?page=contact">contact</a></li>
	</ul>

Modifié par Aureance (10 Dec 2009 - 17:44)
Bonsoir,

> Aureance : Content de voir que la solution que j'ai proposé t'intéresse. Avec ton code exemple ça ressemblerait à ça :

<?php

/* $url est définie comme dans ton code */

$actualPage = $_SERVER['PHP_SELF'];

$linksArray = array(
    'Accueil' => 'pages/accueil.php',
    'Fabrication' => 'pages/fabrication.php',
    'Services' => 'pages/services.php',
    'Photos' => 'pages/photos.php',
    'contact' => 'pages/contact.php'
);

foreach($linksArray as $text => $link) {
    if(($url . $actualPage) == $link) {
       echo '<li class="actif"><a href="' . $link . '" title="Lien vers la page ' . strtolower($text) . '">' . $text . '</a></li>';
    }
    else {
       echo '<li class="inactif"><a href="' . $link . '" title="Lien vers la page ' . strtolower($text) . '">' . $text . '</a></li>';
    }
}

?>


En gros ça devrait donner ça... tu économises quelques ligne Smiley cligne

Bonne soirée,

Smiff.
Modifié par Smiff (10 Dec 2009 - 21:33)
Hello Aureance,

tu te trouves dans une situation où selon moi l'utilisation d'une table serait déjà justifiée vu le nombre de champs variables. Les bases du couples PHP/Mysql sont relativement simples et tu pourrais te baser sur ce tuto de developpez.com qui ressemble beaucoup à ton cas de figure. Smiley cligne
Bonsoir,

@Smiff :
Comme je l'indiquais plus haut, ta méthode m'intéresserait si je pouvais modifier plusieurs variables au même moment.

Si ton procédé consiste à séparer un seul argument (déclarer un lien du menu actif/inactif) du switch complet, je n'en vois pas trop l'intérêt car j'éparpillerais mon code en différents endroits - un bout de code pour ceci et un bout de code pour cela = galère assurée au retour pour modifier le site après 3 mois d'oubli.

Si le bref exemple ci-bas est envisageable ; ton modèle d'array associative appliqué à mes besoins deviendrait une array associative imbriquée. Au point de vue maintenance ça n'avancerait pas le schiimilimiliblick… et, je n'ose même pas imaginer comment écrire la boucle foreach() pour un tel cas. Le peu de cerveau qui me reste risque d'exploser et je ne tiens pas à repeindre le plafond et les murs de mon appartement après chaque surchauffe de l'intellect.

<?php

$linksArray = array
	(
		$accueil = array (
		'page_ID'    => 'accueil',
		'page_inc'   => $url.'pages/accueil.php',
		'page_title' => 'le titre de la page dans la balise <title>',
		'page_desc'  => 'le contenu de la meta-balise description',
		'meta_robots'=> '<meta name="robots" content="index, follow">'
		),
		$fabrication = array (
		// etc… même modèle de liste
		),
		$services = array (
		// etc.
		),
		$photos = array (
		// etc.
		),
		$contact = array (
		// etc.
		),
	);

?>


@Heyoan :
J'ai installé l'exercice sur le serveur local, coté phpMyAdmin/SQL pas de problème. Les nombreuses variables affichent leurs nouvelles valeurs. Je comprends bien ou tu veux en venir pour m'aider.
J'avais déjà étudié ce tuto il y a… 2 ou 3 ans… mais j'avais vite abandonné car je n'avais pas confiance envers les bases de données. Je trouvais que ce n'était pas assez concret. A cette époque j'aimais bien voir le code en vrai (une vraie page en béton armé de html+php pour les includes). J'avais horreur d'envoyer (ou récupérer) des informations vers (ou depuis) un coin mystérieux de SQL. Je laissais le soin à un gestionnaire de contenu (WordPress) pour régler le problème si le client exigeait un site "super d'enfer". Mais je comprends à l'heure actuelle qu'il est impératif de composer avec les DB et qu'il faut que je cesse de dormir sur mes certitudes dépassées.

Bien apprécié le système pour le "chemin de fer" et j'entrevois mieux comment utiliser la procédure en général.
Entre autres choses, pour ce qui est de démarquer le lien de la page active des autres liens ; la récupération de $idpage me semble "cooler" de source.

@Gaylord.P :
Faudrait tout de même qu'on apporte un peu d'eau à ton moulin sinon tu vas penser qu'on squatte ton post.
La méthode pour modifier l'aspect du lien de la page affichée en CSS pur, (CSS uniquement), existe mais demande beaucoup de travail (tant de possibilités à écrire et autant de pages que de possibilités que les doigts en sont meurtris)
Sans faire un tuto, je vais essayer d'être précis.

Prenons d'abord un menu en HTML pour bien voir ce que l'on veut faire :

   <ul id="accueil" class="menu">
        <li><a class="accueil" href="index.html">accueil</a></li>
        <li><a class="cuisine" href="cuisine.html">cuisine</a></li>
        <li><a class="poterie" href="poterie.html">poterie</a></li>
        <li><a class="dessins" href="dessins.html">dessins</a></li>
   </ul>

En écrivant une CSS comme celle-ci… tous les liens de la liste seront bleus sur fond blanc sauf "accueil" qui sera rouge sur fond noir :

ul.menu li a {
	background: white;
	color: blue;
}
#accueil .accueil li a {
	background: black;
	color: red;
}

Maintenant étendons notre affaire :

ul.menu li a {
	background: white;
	color: blue;
}
#accueil .accueil li a,
#cuisine .cuisine li a,
#poterie .poterie li a,
#dessins .dessins li a {
	background: black;
	color: red;
}

Maintenant c'est clair, à chaque fois qu'une ID en amont formera un couple avec une classe du même nom en aval, nous obtiendrons le résultat escompté.
C'est vrai, ce n'est valable que pour les sites statiques "cuits à l'ancienne au feu de bois" comportants "une page par page" et avec peu d'éléments au menu.

Mais ! avec php l'astuce n'a pas dit son dernier mot.
Tout d'abord l'ID qui forme couple avec la classe n'est pas obligatoirement indiquée dans <ul> mais peut aussi être présente dans n'importe quelle autre balise parente une <div> "Cro-Magnon" ou même <body> si l'on aime davantage le coté "Neandertal".

1/ Au lieu "d'une page par page", avec PHP l'ID du body sera changeante pour qu'une même page puisse accueillir toutes les autres et un des éléments de menu (menu identique sur toutes pages) formera toujours un couple (body-ID-Machin >> menu-li-a-class-Machin)
2/ Une autre possibilité est d'utiliser une CSS/PHP dynamique écrite dans l'espace <style> inséré dans <head> pour la simple indication qui nous intéresse, tout le CSS global restant sagement à sa place dans une feuille externe.

======================================
Note : L'astuce CSS est ancienne et proviendrait du site www.hicksdesign.co.uk (le site de Jon Hicks, le graphiste qui a fait les logos de FireFox, ThunderBird, skEdit et beaucoup d'autres)
Bonjour,

> Aureance : C'est effectivement le système d'array imbriqués que j'utilise dans ma classe et je suis d'accord avec toi sur le fait que ce n'est pas plus simple "en dur" (en changeant manuellement tous les champs du tableau)... Par contre avec une base de donnée c'est l'idéal à mon sens, et le plus simple à modifier.

La boucle foreach n'est pas plus compliquée avec un tableau imbriqué à deux niveaux :

<?php

$linksArray = array(
    $url.'pages/accueil.php' => array(
        'page_title' => 'le titre de la page dans la balise <title>', 
        'page_text' => 'Accueil'
    ), 
    '$url.'pages/fabrication.php' = array ( 
         // etc... même modèle
    )
);

foreach($linksArray as $page => $link) {
    if(($url . $actualPage) == $page) {
        echo '<li class="actif"><a href="' . $page . '" title="' . $link['page_title'] . '">' . $link['page_text'] . '</a></li>';
    }
    else {
        echo '<li class="inactif"><a href="' . $page . '" title="' . $link['page_title'] . '">' . $link['page_text'] . '</a></li>';
    }
}

?>


J'utilise principalement mon code dans des applications basées sur l'architecture MVC donc c'est vrai que l'important pour moi c'est de n'avoir que des variables (sans code (x)html), même complexes, retournées par le modèle (dans ce cas le tableau des liens) que mon controlleur va récupérer et envoyer à la vue pour affichage (la boucle foreach ici).

Enfin je m'écarte du sujet. Toujours est-il qu'il y a effectivement plein de solutions pour ce problème Smiley smile

Bonne journée à tous,

Smiff.
Modifié par Smiff (12 Dec 2009 - 13:39)