[Résolu] Menu type onglets en CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolu] Menu type onglets en CSS

fafane84

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 :

#menuTutos a {
border-right:rgb(3,47,46) 1px solid;
border-bottom:rgb(3,47,46) 1px solid;
padding:4px;
margin:0;
text-decoration: none;
background-color:rgb(195,207,229);
color: #0A2F35;
line-height:16px;
}
#menuTutos a:hover {
color: #ffffff;
background-image: url(images/fond1.gif);
background-repeat: repeat-x;
background-color:rgb(101,138,170);
}

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

Publicité

zapan666

Tout est relatif

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 !

gatsusat

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);
}

bl@p_psx

Admin G15-france

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-:.

gatsusat

nan pas le style juste la classe

<li><a href="#" <?=(PageCourrante==1)? 'class="lienActif" ' : ''?>></a></li>

bl@p_psx

Admin G15-france

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-:.

fafane84

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

bl@p_psx

Admin G15-france

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-:.

bl@p_psx

Admin G15-france

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-:.

fafane84

Code de la page wamp.php :

Code :

<?php
$titre_page="WAMP5";
$titre="Web Tutoriels - ".$titre_page;
include("include/html.inc.php" );
?>
<div id="menuTutos">
<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 à jour MySQL</a><a href="<?php echo $lien_wamp5_phpmyadmin ?>">Mettre à jour phpMyAdmin</a>
</div>
<div id="contenu">
<h2><?php echo $titre_page ?></h2>
<p>Ce site étant encore en phase de test, beaucoup de pages sont encore en construction.</p>
<p>Merci de bien vouloir m'excuser pour la gêne occasionnée.</p>
<br />
<p>fafane84 (webmaster) </p>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<?php include("include/footer.inc.php" ); ?>
</div>
</body>
</html>

Code de la page html.inc.php :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title><?php echo $titre ?></title>
<?php
include("meta.inc.php" );
include("linkCSS.inc.php" );
include("liens.inc.php" );
?>
</head>
<body>
<div id="top"></div>
<div id="logo"></div>
<div id="header">
<div id="pict4"></div>
<div id="pict3"></div>
<div id="pict5"></div>
<div id="pict2"></div>
<div id="pict1"></div>
</div>
<div id="navig"><?php include("menuH.inc.php" ); ?>
</div>
<div id="phpinup"></div><?php include("menuV.inc.php" ); ?>
<div id="conteneur">

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

Publicité

bl@p_psx

Admin G15-france

exemple :

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

Code :

<div id="menuTutos">
<a href="<?php echo $lien_wamp5 ?>" <?php if($_SERVER['script_name'] == $lien_wamp5) echo 'class="ta_classe"'; ?>>Accueil WAMP</a>
<a href="<?php echo $lien_wamp5_utilisation ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_utilisation) echo 'class="ta_classe"'; ?>>Utilisation de WAMP</a>
<a href="<?php echo $lien_wamp5_mysql ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_mysql) echo 'class="ta_classe"'; ?>>Mettre à jour MySQL</a>
<a href="<?php echo $lien_wamp5_phpmyadmin ?>" <?php if($_SERVER['script_name'] == $lien_wamp5_phpmyadmin) echo 'class="ta_classe"'; ?>>Mettre à jour phpMyAdmin</a>
</div>

avec comme css :

Code :

.ta_classe {
color: #ffffff;
background-image: url(images/fond1.gif);
background-repeat: repeat-x;
background-color:rgb(101,138,170);
}

à 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-:.

fafane84

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

fafane84

Je viens même d'essayer çà :

Code :

<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

fafane84

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

Code :

$_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

bl@p_psx

Admin G15-france

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-:.

fafane84

Désolé mais je n'ai pas compris.

Tu veux que je fasse çà :

Code :

<?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

fafane84

Sinon, j'ai mis çà :

Code :

<?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

fafane84

'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

bl@p_psx

Admin G15-france

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-:.

bl@p_psx

Admin G15-france

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"

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

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

fafane84

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

bl@p_psx

Admin G15-france

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-:.

fafane84

[:athome]

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolu] Menu type onglets en CSS

Sujets relatifs
[RESOLU] Récupérer résultat d'1 requête SQL dans 1 script bourne shell	[Batch] Boucle sur plusieurs fichiers - RESOLU
[RESOLU] VB/EXCEL/manipulation de données pour transfert MySql	help, je sais splus faire un menu déroulant !!!
[MySQL]pb requete[Resolu]	[php] perte de connexion dans un include [resolu]
[HTML- CSS]Appliquer une police par defaut ?	[Resolu] Améliorer les performances
[Résolu] Récupérer valeur oui/non	[resolu] JtextField invisible oui mais il veut pas s'afficher !!!
Plus de sujets relatifs à : [Résolu] Menu type onglets en CSS

Page générée en 0.116 secondes