28111 sujets

CSS et mise en forme, CSS3

[Résolu] A:selected avec une variable - possible?

Pages :
Bonjour!

Je me demande si ce que je cherche à faire est possible!

Je publie mon site dans wordpress, avec des templates faites maison. Le problème c'est que comme le site fonctionne (donc!) sur des templates, avec la plupart du code commun à toutes les pages, je ne peux pas appliquer de classe "selected" à mes boutons rollover pour qu'ils restent allumés lorsqu'on est sur la page en question.

Si vous voulez jeter un coup d'oeil, un exemple de page du site (non publié sous WP) se trouve à : http://www.karlotta.com/weddings.html

Ce qui serait sympa, c'est que quand on est dans la catégorie "weddings", le menu "weddings" du bas soit allumé (rouge) et si en plus on était dans le sous-menu "photo gallery", bah que "photo galleries" dans le menu du haut soit allumé aussi!

C'est possible? Avec une variable peut-être? Genre un script qui dirait au rollover, quand on est dans tel dossier, applique "selected" à tel bouton? (je n'ai pas un nombre infini de dossiers; une vingtaine peut-être?)

J'ai l'impression que je n'explique pas clairement, n'hésitez pas à me demander de clarifier...

Pardon!

et merci pour votre aide par avance!
Modifié par Princesskarlotta (22 Feb 2010 - 13:02)
Salut

Je crois que puisque certaines portions sont générales à toutes les pages, voici simplement ce que j'essaierais.

J'ignore si tu es à l'aise en PHP mais en gros, on vérifie si dans le URL, il y a un "keyword" ou un mot spécifique. Si c'est le cas, on adopte un CSS plutôt qu'un autre.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
< debut php 
	$arr_menu = array('Wedding'=>'.wedding', 'Kids' => '.kids');
	$css = '';
	foreach( $arr_menu as $name=>$classe){
		if( stristr($_SERVER['PHP_SELF'], $menu) ){
			$css = $classe . ' { background-position:bottom left }';
		}
	}
fin php >
<style>
<debut php

echo($css); 

fin php>
</style>
</head>


J'ai pas eu le temps de tester mais mis à part quelques ajustements, je crois que ça fonctionnerait bien. Évidemment, tu rajoutes le nombre de menu que tu as dans le array avec le même principe que les deux déjà là.

J'espère que ça t'aidera !
Modifié par Sorano (19 Feb 2010 - 16:46)
Moi j'ai une technique javascript pour ce genre de chose : je vérifie si l'url de mon lien est incluse dans l'url de la page : dans la plupart des cas ça marche.

function monLienActif(){
var l = document.getElementsByTagName("a").length;
for(var i=0; i< l ; i++){
      if(document.getElementsByTagName("a")[i].href.indexOf(document.URL)!=-1){
         document.getElementsByTagName("a")[i].style.color="red";
      }
   }
}


Bon, là j'ai tapé ça comme ça sans tester, mais ça doit ressembles à ca ![/i][/i]
Modifié par Meybeck (19 Feb 2010 - 21:56)
Merci pour vos réponses! Je suis bloquée ce soir sur un problème plus urgent, mais je jetterai un coup d'oeil demain.

@ Meybeck - je n'y connais pas grand chose en JS, je dois faire quoi avec ton code pour que ça marche? Désolée de te demander encore de l'aide, si tu as le temps de m'expliquer 3 minutes, ça m'a l'air a première vue d'être la solution dont j'aurais besoin!

Merci encore! Bonne soirée Smiley smile
Rah non pas de solution javascript quand il existe une solution en php !!

Si tu veux par exemple colorer le lien weddings pour toutes les urls de la forme www.machintruc.com/weddings/bidule.php, il te suffira de tester le dossier parent et d'appliquer le style "sélectionné" au lien correspondant :
<a href="weddings.php"<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' class="selected"; ?>>Lien</a>

Et ainsi de suite pour tous tes liens !
MatTheCat a écrit :
Rah non pas de solution javascript quand il existe une solution en php !!

Si tu veux par exemple colorer le lien weddings pour toutes les urls de la forme www.machintruc.com/weddings/bidule.php, il te suffira de tester le dossier parent et d'appliquer le style "sélectionné" au lien correspondant :
<a href="weddings.php"<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' class="selected"; ?>>Lien</a>

Et ainsi de suite pour tous tes liens !


Ca m'a l'air cool, merci beaucoup! Mais ça crashe... je me retrouve avec une erreur de syntaxe (pourtant je te recopie lettre pour lettre!)

Il est possible que ce soit parceque mon site est publié par WP, assez lourd en php déja, et qu'il y ait des conflits?
Hello,
Il me semble que tu aies oubliez de fermé ton echo: ( selected";' ?> )

<a href="weddings.php"
   <?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' class="selected";' ?>
>Lien</a>


Charly
Modifié par Chum (22 Feb 2010 - 09:39)
Merci pour la correction! Effectivement je n'obtiens plus de message d'erreur; par contre, ça ne marche pas. Je pense que c'est parceque le site est généré dynamiquement par wordpress, et ça doit être de faux URL.

Je me demande comment je vais résoudre celui-là!

Merci pour votre aide en tout cas; et si quelqu'un a une idée, je suis toute ouïe!

Merci encore Smiley smile
Je pense pas que ce soit "une mauvais solution"...
Je pense qu'il faut un peu mieux l'adapter:

tu as mis tout en haut de ta page ce que sorano a dit ?

$arr_menu = array('Wedding'=>'.wedding', 'Kids' => '.kids'); 
    $css = ''; 
    foreach( $arr_menu as $name=>$classe){ 
        if( stristr($_SERVER['PHP_SELF'], $menu) ){ 
            $css = $classe . ' { background-position:bottom left }'; 
        } 
    }


Si oui... (réfléchis)... hum... parce que dans ton code je ne trouve pas de trace du php...
C'est comme s'il ne trouvais pas /weddings ...

Je pense juste que ton php n'est pas encore bien calibré.

Charly


Edit:

Peux tu me mettre tout ton code php de ta page ?
Merci !
Modifié par Chum (22 Feb 2010 - 09:53)
Honnêtement, je ne sais pas comment le customiser ... il me dépasse un peu.

Et puis je me suis dit qu'il y aurait une solution toute simple, puisque mes boutons sont tous faits en css image sprites, et qu'il existe dans ma feuille de style une classe "selected" qui n'attend qu'une chose : un moyen d'être appliqué pour bouger leur background-position à "right"!

La solution de Mat The Cat ressemblait pas mal à ce que je pensais!

Mais si tu penses qu'il vaut mieux que j'essaye la solution de Sorano, avec 3 minutes d'explications j'y arriverai surement!

PS: dans le code de la page, quand tu trouves le menu tout en bas, le lien "weddings" est devenu comme ça:
<a class="weddings" href="http://www.karlotta.com/weddings"  >weddings</a>


Cet espace vide correspond à l'endroit où se trouve le php dans ma template wordpress! Smiley confus
Chum a écrit :

Peux tu me mettre tout ton code php de ta page ?
Merci !


Wordpress découpe tes pages en 3 parties : header, contenu, footer. Les voilà:

HEADER:
<?php
/**
 * @package WordPress
 * @subpackage Classic_Theme
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Karlotta Studios  </title>

<!-- MY CSS -->
<link rel="stylesheet" href="http://www.karlotta.com/css/karlotta.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.karlotta.com/css/karlottabuttons.css" type="text/css" media="screen" />

<!-- MY SCRIPTS -->
<!-- Lightview Plus -->
<script type='text/javascript' src='http://www.karlotta.com/scripts/prototype.js'></script>
<script type='text/javascript' src='http://www.karlotta.com/scripts/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='http://www.karlotta.com/scripts/lightview/js/lightview.js'></script>

<link rel="stylesheet" type="text/css" href="http://www.karlotta.com/scripts/lightview/css/lightview.css" media="screen" />


<!-- WORDPRESS CSS AND SCRIPTS -->
<?php wp_head(); ?>
</head>



<!-- end header -->


CONTENU: 

<?php
/**
 * @package WordPress
 * @subpackage Classic_Theme
 */
get_header();
?>

<body topmargin="0" leftmargin="0">

	<div class="main" align="center">
	
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div id="menutop" align="center">
        <?php the_date(); ?> :  <?php the_title(); ?><?php posts_nav_link(' &#8212; ', __('&laquo;'), __('&raquo;')); ?>
        </div>        

        <div id="content" align="center" class="index">
        <?php the_content(__('(more...)')); ?>
        </div>


        <?php endwhile; else: ?>
        <div id="content" align="center">
        <?php _e('Oh ho, something is missing.'); ?>
         </div>
        <?php endif; ?>
       
       
<?php get_footer(); ?>


FOOTER: 
<?php
/**
 * @package WordPress
 * @subpackage Classic_Theme
 */
?>

<!-- begin footer -->
<div id="menubottom">
            <div id="menubottom_left">
                <a class="kids" href="http://www.karlotta.com/kids">kids</a>
                <a class="weddings" href="http://www.karlotta.com/weddings" <?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' id="selected";' ?> >weddings</a>
                <a class="portfolio" href="http://www.karlotta.com/portfolio">portfolio</a>          </div>
        
            <div id="menubottom_center">
                <a href="http://www.karlotta.com/"><img id="home" src="http://www.karlotta.com/menus/main/home_off.png" border=0>        </a>            
            </div>
            
            <div id="menubottom_right">
                <a class="web" href="http://www.karlotta.com/media">web & video</a>
                <a class="clients" href="http://www.karlotta.com/clients">clients</a>
                <a class="contact" href="http://www.karlotta.com/contact">contact</a> 
            </div>
</div>     
<!-- closing main div -->
</div>
</body>


</html>


Pardon pour le paté... et merci pour ton aide!
héhé j'avais raison Smiley smile

ta pas mis dans ton header ce que sorano a mis!

Sorano a écrit :


$arr_menu = array('Wedding'=>'.wedding', 'Kids' => '.kids'); 
    $css = ''; 
    foreach( $arr_menu as $name=>$classe){ 
        if( stristr($_SERVER['PHP_SELF'], $menu) ){ 
            $css = $classe . ' { background-position:bottom left }'; 
        } 
    }




bon tu es trop rapide faut que je me grouille un peu ...
Modifié par Chum (22 Feb 2010 - 10:10)
Chum a écrit :
h
Je vais te le commenter ca t'aidera un peu (j'espère)



Merci ça serait effectivement super sympa, je comprendrais la bête et pourrait l'appliquer! MErci beaucoup!
hum mais je suis un peu perdu la...

heu oé ta raison: on a besoin que de 
<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' class="selected";' ?>


mais il faut que l'on voit la classe qui met on/off ton menu.
Modifié par Chum (22 Feb 2010 - 10:27)
Salut,

Princesskarlotta a écrit :
Je pense que c'est parceque le site est généré dynamiquement par wordpress, et ça doit être de faux URL.
Dans ce cas il faut remplacer 
<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' id="selected";' ?>
par
<?php if(dirname($_SERVER['REQUEST_URI']) === '/weddings') echo ' id="selected";' ?>
Chum a écrit :
hum mais je suis un peu perdu la...

heu oé ta raison: on a besoin que de 
<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' class="selected";' ?>


mais il faut que l'on voit la classe qui met on/off ton menu.


C'est bien l'identificateur "selected".

Je lisais pendant que tu expliquais le code de Sorano, merci d'avoir pris le temps (même si... j'ai rien compris. LOL - pas de ta faute!) Merci encore Smiley smile
Heyoan a écrit :
Salut,

Dans ce cas il faut remplacer 
<?php if(dirname($_SERVER['PHP_SELF']) === '/weddings') echo ' id="selected";' ?>
par
<?php if(dirname($_SERVER['REQUEST_URI']) === '/weddings') echo ' id="selected";' ?>


Wow merci pour ça!! Ca n'a pas marché, malheureusement. Je ne comprends pas pourquoi... Je pense que je vais bientôt baisser les bras, même si ça me turlupine, et que la fonction aurait vraiment bien rendu sur mon site!

Merci à tous pour votre aide Smiley smile
Pages :
Sujet clos
Aller à