[Résolu] Menu type onglets en CSS

Menu type onglets en CSS [Résolu] - HTML/CSS - Programmation

Marsh Posté le 05-08-2005 à 10:48:34    

Salut à tous  :hello:  
 
Sur cette page : http://webtutoriels.free.fr/wamp.php, je cherche à faire un menu en CSS de type "onglets".
 
Mais je n'arrive pas à faire que lorsque la page est sélectionnée le fond du lien soit blanc.
 
Voici mon code CSS :

Code :
  1. #menuTutos a {
  2. border-right:rgb(3,47,46) 1px solid;
  3. border-bottom:rgb(3,47,46) 1px solid;
  4. padding:4px;
  5. margin:0;
  6. text-decoration: none;
  7. background-color:rgb(195,207,229);
  8. color: #0A2F35;
  9. line-height:16px;
  10. }
  11. #menuTutos a:hover {
  12. color: #ffffff;
  13. background-image: url(images/fond1.gif);
  14. background-repeat: repeat-x;
  15. background-color:rgb(101,138,170);
  16. }


J'ai essayé avec a:active mais cela ne fonctionne que lorsque le lien est cliqué dés que l'on ne clique plus la couleur du lien redevient bleu clair.
 
Comment pourrais-je farie çà ???
 
Merci d'avance pour votre aide.
 
 [:fafane84]


Message édité par fafane84 le 05-08-2005 à 22:51:04

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 10:48:34   

Reply

Marsh Posté le 05-08-2005 à 10:52:24    

bah, perso, j'ai fais ça en php :  
si la page est active, alors le liens prend la classe "active" (par exemple). Sur alsacréation, c'est l'exemple qui est mis je crois.


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 05-08-2005 à 10:54:12    

c'est ausis comme cela que je fais, tu associée une classe au lien actif, dans mon cas j'ai associé le meme effet qui est sur le hover
 
#menuTutos a:hover, #menuTutos a.LienActif {  
color: #ffffff;  
background-image: url(images/fond1.gif);  
background-repeat: repeat-x;  
background-color:rgb(101,138,170);  
}

Reply

Marsh Posté le 05-08-2005 à 10:54:13    

il faut que tu controles le style en php ...  
 
si la page est charger, tu changes le style de l'onglet concerner ... ( enfin, je pense qu'il faut faire ainsi )
 
@+


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 10:56:29    

nan pas le style juste la classe
 
<li><a href="#" <?=(PageCourrante==1)? 'class="lienActif" ' : ''?>></a></li>

Reply

Marsh Posté le 05-08-2005 à 10:59:47    

heu ...  [:grilled]


Message édité par bl@p_psx le 05-08-2005 à 11:00:06

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 11:04:34    

Merci à tous pour vos réponses  [:b-rabbit]  
 
Quelle  rapidité !!!
 
Bon il y a juste un petit problème, je débute en php et pour l'instant mes connaissance en la matière se limite :
- aux include()
- à la récupération de variables via un formulaire
- à l'ajout (très succints) de liens et news en PHP/MySQL
 
Bref, je ne sais pas faire ce que vous me préconisez  :(  
 
Auriez-vous un petit lien traitant du sujet ?


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 11:36:58    

en regardant ton site, c'est pas bien compliquer ...
 
Ton menu wamp appelle une page particuliere.
 
la variable $_SERVER['script_name'] contient le nom de la page en cours.
 
Donc, dans ton script d'affichage du menu, il te suffit, pour chaque onglet, de tester cette variable. Si elle est egale à l'onglet en cour, tu affiche une class particuliere, sinon, tu mets ta classe standard.
 
@+


Message édité par bl@p_psx le 05-08-2005 à 11:37:23

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 11:38:11    

ps: met un peu de code html et/ou php qui genere la page ou se trouve le menu.


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 11:45:16    

Code de la page wamp.php :

Code :
  1. <?php
  2. $titre_page="WAMP5";
  3. $titre="Web Tutoriels - ".$titre_page;
  4. include("include/html.inc.php" );
  5. ?>
  6.     <div id="menuTutos">
  7.       <a href="<?php echo $lien_wamp5 ?>">Accueil WAMP</a><a href="<?php echo $lien_wamp5_utilisation ?>">Utilisation de WAMP</a><a href="<?php echo $lien_wamp5_mysql ?>">Mettre &agrave; jour MySQL</a><a href="<?php echo $lien_wamp5_phpmyadmin ?>">Mettre &agrave; jour phpMyAdmin</a>
  8.     </div>
  9.     <div id="contenu">
  10.       <h2><?php echo $titre_page ?></h2>
  11.       <p>Ce site &eacute;tant encore en phase de test, beaucoup de pages sont encore en construction.</p>
  12.       <p>Merci de bien vouloir m'excuser pour la g&ecirc;ne occasionn&eacute;e.</p>
  13.       <br />
  14.       <p>fafane84 (webmaster) </p>
  15.     </div>
  16.     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  17.     <?php include("include/footer.inc.php" ); ?>
  18.   </div>
  19. </body>
  20. </html>


Code de la page html.inc.php :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <head>
  5. <title><?php echo $titre ?></title>
  6. <?php
  7. include("meta.inc.php" );
  8. include("linkCSS.inc.php" );
  9. include("liens.inc.php" );
  10. ?>
  11. </head>
  12. <body>
  13.   <div id="top"></div>
  14.   <div id="logo"></div>
  15.   <div id="header"> 
  16.     <div id="pict4"></div>
  17.     <div id="pict3"></div>
  18.     <div id="pict5"></div>
  19.     <div id="pict2"></div>
  20.     <div id="pict1"></div> 
  21.   </div>
  22.   <div id="navig"><?php include("menuH.inc.php" ); ?>
  23.   </div>
  24.   <div id="phpinup"></div><?php include("menuV.inc.php" ); ?>
  25.   <div id="conteneur">


 


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 11:45:16   

Reply

Marsh Posté le 05-08-2005 à 12:04:30    

exemple :
 
( pas tester ) mais c'est dans l'idée
 

Code :
  1. <div id="menuTutos">
  2.        <a href="<?php echo $lien_wamp5 ?>" <?php if($_SERVER['script_name'] == $lien_wamp5) echo 'class="ta_classe"'; ?>>Accueil WAMP</a>
  3.        <a href="<?php echo $lien_wamp5_utilisation ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_utilisation) echo 'class="ta_classe"'; ?>>Utilisation de WAMP</a>
  4.        <a href="<?php echo $lien_wamp5_mysql ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_mysql) echo 'class="ta_classe"'; ?>>Mettre &agrave; jour MySQL</a>
  5.        <a href="<?php echo $lien_wamp5_phpmyadmin ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_phpmyadmin) echo 'class="ta_classe"'; ?>>Mettre &agrave; jour phpMyAdmin</a>
  6. </div>


 
avec comme css :
 

Code :
  1. .ta_classe {
  2. color: #ffffff;
  3. background-image: url(images/fond1.gif);
  4. background-repeat: repeat-x;
  5. background-color:rgb(101,138,170);
  6. }


 
à verifier si le cumul de definition css ne vas pas posser de pb ( le lien ainsi former seras "toucher" par le style #menuTutos a ET par le style .ta_classe ... )
Si c'est le cas, il faut mettre un else et une class particuliere pour le style par defaut du menu et donc virer la class genrale #menuTutos a ... ( remplacer par un .menututos_noactive {} par exemple ...
 
@+


Message édité par bl@p_psx le 05-08-2005 à 12:06:03

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 12:25:37    

Merci  [:athome]  
 
Je pense que j'ai compris ce que tu me dire de faire mais hélas cela ne change rien.
Ma classe .lienActif ne s'affiche pas.
 
Peux-tu m'expliquer çà : $_SERVER['script_name'] ?
 
Que veut dire 'script_name' ?


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 12:42:56    

Je viens même d'essayer çà :

Code :
  1. <a href="<?php echo $lien_wamp5 ?>" <?php if($_SERVER['script_name'] == $lien_wamp5) {echo 'class="lienActif"';} else {echo 'class="lienInActif"';} ?>>Accueil WAMP</a>


Mais çà ne marche pas non plus   :(  
 
Vraiment mes compétences en PHP sont limités  :cry:


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 12:51:08    

Je pense que le problème vient de çà :

Code :
  1. $_SERVER['script_name'] == $lien_wamp5


Car quand j'affiche la source que la page soit active ou non il y a systématiquement class="lienInActif"


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 13:05:43    

fait un  echo de $_SERVER['script_name']  et de $lien_wamp5 ...
 
edit : $lien_wamp5 contient l'adresse de la page ou l'url complette ????


Message édité par bl@p_psx le 05-08-2005 à 13:06:49

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 13:15:39    

Désolé mais je n'ai pas compris.
 
Tu veux que je fasse çà :

Code :
  1. <?php if(echo $_SERVER['script_name'] == echo $lien_wamp5) {echo 'class="lienActif"';} else {echo 'class="lienInActif"';} ?>>Accueil WAMP</a>


Car si tel est le cas, je viens d'essayer plus rien ne s'affiche du tout (page blanche).


Message édité par fafane84 le 05-08-2005 à 13:27:09

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 13:34:55    

Sinon, j'ai mis çà :

Code :
  1. <?php echo $_SERVER['script_name'] ?><?php echo $lien_wamp5 ?>


en plein milieu du "contenu" pour voir ce que cela affichait.
 

  • echo $_SERVER['script_name'] n'affiche rien du tout
  • echo $lien_wamp5 affiche le chemin du lien -> /webtutoriels/wamp.php


C'est ce que tu voulais savoir ?


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 13:58:40    

'tin tu la crois la connerie !!!  :fou:  
 
A la place de $_SERVER['script_name'] il fallait écrire $_SERVER['SCRIPT_NAME']
 
Cà a l'air de marcher.
 
 [:fafane84]  


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 13:59:38    

bizare que  $_SERVER['script_name'] n'affiche rien ....
 
bizare aussi que $lien_wamp5 affiche /webtutoriels/wamp.php
 
quand j'affiche la source de ta page, le lien pour Accueil WAMP est : <a href="/wamp.php">
 
Ce qui laisse à penser que $lien_wamp5 = "/wamp.php";
 
c'est louche.
 
Dans tout les cas, l'egalité ne peux pas se faire, c'est sur !  
 
@+
 
ps: je viens de tester : http://step.moultiplayers.net/divers/
un echo $_SERVER['SCRIPT_NAME']; me renvois bien la page en cour


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 14:01:38    

fafane84 a écrit :

'tin tu la crois la connerie !!!  :fou:  
 
A la place de $_SERVER['script_name'] il fallait écrire $_SERVER['SCRIPT_NAME']
 
Cà a l'air de marcher.
 
 [:fafane84]


 
 
effectivement, c'est de ma faute ... j'aurais du faire un copier coller ...
 
@+
 
ps: en plus en testant, je met en MAJ ( question d'habitude ), mais là, sur le forum, je sais pas pourquoi, j'ai ecris en minuscule ... peut-être parceque je n'etait pas dans mon editeur préféré ^^ ( WSCITE pour ceux qui connaise )
 
ps²: ajoute le forum HFR dans ton "à propos" :D


Message édité par bl@p_psx le 05-08-2005 à 14:03:36

---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 15:05:56    

En tout cas merci pout tout !!!   [:b-rabbit]  
 
Au sujet du lien du forum HFR dans "A propos", ce sera fait, c'est promis  ;)
Mais pour que cela reste en rapport avec mon site je mettrai sûrement le lien que du forum "Programmation".  
 
 [:fafane84]


Message édité par fafane84 le 05-08-2005 à 15:08:47

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 05-08-2005 à 16:57:32    

et un petit edit du post initial pour ajouter un [RESOLU] au titre du topic et c'est parfais !
 
@+ et continue bien ton site !


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 05-08-2005 à 22:50:22    

[:athome]


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed