Debutant menu css

Question

bromlecornu

22 Aug 2007 à 11:00

Bonjour,

Je débute en css et j'essai de faire un menu par onglets dont voici le code :

<style>
#onglets {
  width:800;
  font-family: Verdana,Arial,Geneva,Helvetica,sans-serif;
  font-size: 10px;
  border-bottom : 1px solid #900;
  text-align: center;
} 

#onglets a {
  position: relative;
  bottom: 0px;
  border-top : 1px solid #900;
  border-left : 1px solid #900;
  border-right : 1px solid #900;
  padding : 0.2em 1em 0em 1em;
  background-color: #f0f0f0;
  font-size : 12px;
  text-decoration : none;
  color: #900;
}

#onglets a:hover {
  background-color: #ffc;
}

#onglets a.actif {
  position: relative;
  bottom: -1px;
  background-color: #fff;
  border-top : 1px solid #666;
  border-left : 1px solid #666;
  border-right : 1px solid #666;
}
</style>

<body>
<div id="onglets">
 <a href="personnage.php">Personnage</a>
 <a href="compap.php">Compétences & Aptitudes</a>
 <a href="equipement.php">Equipements</a>
 <a href="objets.php">Objets</a>
 <a href="sorts.php">Sorts</a>
</div>

Donc cette page s'appelle menu.php et j'utilise include dans mes pages pour l'appeler donc il fonctionne je peux cliquer dessus et il m'envoi sur les pages demandées.

Le truc c'est que je ne comprend pas comment faire pour que l'onglet actif est une mise en forme différente et comment récupérer cette mise en forme lorsque je change de page.

Merci

Halindel

22 Aug 2007 à 11:12

Bonjour,

Comme tu utilises le php tu peux donner un id spécifique à ton onglet actif comme tu connais la page.. Apres tu n'as plus qu'a preciser dans le css la nouvelle apparence de ton onglet.

par exemple suivant le nombre de tes onglets ( ici 5)


$listeonglet=array('','','','','');
if($page=='1page'){
$listeonglet[0]='id="ongletactif"';
}
else if($page=='2page'){
$listeonglet[1]='id="ongletactif"';
}
else if($page=='3page'){
$listeonglet[2]='id="ongletactif"';
}
else if($page=='4page'){
$listeonglet[3]='id="ongletactif"';
}
else if($page=='5page'){
$listeonglet[3]='id="ongletactif"';
}

Et dans tes onglets :


<div id="onglets">
 <a href="personnage.php" <?php echo $listonglet[0]; ?>>Personnage</a>
 <a href="compap.php" <?php echo $listonglet[1]; ?>>Compétences & Aptitudes</a>
 <a href="equipement.php"<?php echo $listonglet[2]; ?>>Equipements</a>
 <a href="objets.php" <?php echo $listonglet[3]; ?>>Objets</a>
 <a href="sorts.php" <?php echo $listonglet[4]; ?>>Sorts</a>
</div>

J'espere que c'est assez claire Smiley biggol

Singularity

22 Aug 2007 à 11:13

Bonjour,

#onglets a.actif {

La pseudo classe concernée n'est pas "actif" mais "active" (c'est de l'anglais Smiley ravi

)

J'en profite pour faire une remarque toute autre : tu as mis des URLs relatives pour appeler les pages à travers ce menu, donc ces dernières devront obligatoirement se situer au même niveau de l'arborescence du site (pas dans des sous dossiers, sinon, il faudra passer aux URLs absolues). Smiley cligne

Halindel

22 Aug 2007 à 11:18

Je crois aussi que la


a.actif

N'est utilisable que si on ne recharge pas la page or ici je pense qu'il la recharge.

papyjo

22 Aug 2007 à 11:22

Salut,

Tu peux le faire en pure CSS

<style type="text/css">
#onglets {
  width:800;
  font-family: Verdana,Arial,Geneva,Helvetica,sans-serif;
  font-size: 10px;
  border-bottom : 1px solid #900;
  text-align: center;
} 
#onglets a {
  position: relative;
  bottom: 0px;
  border-top : 1px solid #900;
  border-left : 1px solid #900;
  border-right : 1px solid #900;
  padding : 0.2em 1em 0em 1em;
  background-color: #f0f0f0;
  font-size : 12px;
  text-decoration : none;
  color: #900;
}
#onglets a:hover {
  background-color: #ffc;
}
#personnages #perso,
#competences #compap,
#equipement #equip,
#objets #obj,
#sorts #sor {
  position: relative;
  bottom: -1px;
  background-color: #fff;
  border-top : 1px solid #666;
  border-left : 1px solid #666;
  border-right : 1px solid #666;
}
</style>

<body id="personnages"
<div id="onglets">
 <a id="perso" href="personnage.php">Personnage</a>
 <a id="compap" href="compap.php">Compétences & Aptitudes</a>
 <a id="equip" href="equipement.php">Equipements</a>
 <a id="obj" href="objets.php">Objets</a>
 <a id="sor" href="sorts.php">Sorts</a>
</div>

Tu remarqueras que body à un id qui le différencie. D'autre part je te signale que la bonne syntaxe d'appel pour une css est <style type="text/css">

bromlecornu

22 Aug 2007 à 11:29

voila ce qu'il me met :

a écrit :
Notice: Undefined variable: listonglet in c:\add\menu1.php on line 24
>Personnage Notice: Undefined variable: listonglet in c:\add\menu1.php on line 25
>Compétences & Aptitudes Notice: Undefined variable: listonglet in c:\add\menu1.php on line 26
>Equipements Notice: Undefined variable: listonglet in c:\add\menu1.php on line 27
>Objets Notice: Undefined variable: listonglet in c:\add\menu1.php on line 28
>Sorts

merci

koala64

Modérateur

22 Aug 2007 à 11:39

Salut,

Au delà du message d'erreur, peux-tu donner ton code ?
Ici tu as des variables php indéfinies mais vu qu'on ne sait pas comment tu as procédé, il va être difficile de t'aider. Smiley cligne

Halindel

22 Aug 2007 à 11:40

C'est juste qu'il a fait un copie colle de monde code et j'ai mal retapper une variable, ma liste s'appele listeonglet et quand je l'est appel j'ai oublier le "e" de liste Smiley confused

j'aurai pas du taper vite, mais il aurai quand meme pu verifier Smiley langue

Modifié par Halindel (22 Aug 2007 - 11:41)

bromlecornu

22 Aug 2007 à 11:41

Et bien j'ai procédé comme halindel me l'a conseillé

<html>
<style>
#onglets {
$listeonglet=array('','','','','');
if($page=='1page'){
$listeonglet[0]='id="ongletactif"';
}
else if($page=='2page'){
$listeonglet[1]='id="ongletactif"';
}
else if($page=='3page'){
$listeonglet[2]='id="ongletactif"';
}
else if($page=='4page'){
$listeonglet[3]='id="ongletactif"';
}
else if($page=='5page'){
$listeonglet[4]='id="ongletactif"';
}
</style>

<body>

<div id="onglets">
 <a href="personnage.php" <?php echo $listonglet[0]; ?>>Personnage</a>
 <a href="compap.php" <?php echo $listonglet[1]; ?>>Compétences & Aptitudes</a>
 <a href="equipement.php"<?php echo $listonglet[2]; ?>>Equipements</a>
 <a href="objets.php" <?php echo $listonglet[3]; ?>>Objets</a>
 <a href="sorts.php" <?php echo $listonglet[4]; ?>>Sorts</a>
</div>

</body>
</html>

bromlecornu

22 Aug 2007 à 11:44

Bin même en rajoutant le 'e' ça me donne la même erreur Smiley smile

Halindel

22 Aug 2007 à 11:46

moi j'ai ça :


<?php>
$listeonglet=array('','','','','');
if(isset($_GET['page'])){
	extract($_GET);
	if($page=='1page'){
		$listeonglet[0]='id="ongletactif"';
	}
	else if($page=='2page'){
		$listeonglet[1]='id="ongletactif"';
	}
	else if($page=='3page'){
		$listeonglet[2]='id="ongletactif"';
	}
	else if($page=='4page'){
		$listeonglet[3]='id="ongletactif"';
	}
	else if($page=='5page'){
		$listeonglet[3]='id="ongletactif"';
	}
}
?>
<div id="onglets">
 <a href="essai.php?page=1page" <?php echo $listeonglet[0]; ?>>Personnage</a>
 <a href="essai.php?page=2page" <?php echo $listeonglet[1]; ?>>Compétences & Aptitudes</a>
 <a href="essai.php?page=3page"<?php echo $listeonglet[2]; ?>>Equipements</a>
 <a href="essai.php?page=4page" <?php echo $listeonglet[3]; ?>>Objets</a>
 <a href="essai.php?page=5page" <?php echo $listeonglet[4]; ?>>Sorts</a>
</div>

Et j'ai pas d'erreur oO par contre avec cette method faut utiliser les includes Smiley ohwell

tu as essayé les autre methodes qui doivent etre plus simple (meme si je trouve la mienne simple Smiley lol

)

bromlecornu

22 Aug 2007 à 11:50

oui merci de ton aide mais je vais le faire en css finalement car en php je n'arrive pas à avoir la présentation désirée

merci Smiley smile

koala64

Modérateur

22 Aug 2007 à 12:05

a écrit :

oui merci de ton aide mais je vais le faire en css finalement car en php je n'arrive pas à avoir la présentation désirée

C'est impossible en CSS uniquement... à moins de procéder comme te l'a montré Papyjo, en rajoutant un id à body. Smiley cligne

Et si ton code ressemble à ce que tu as montré plus haut, c'est normal. Smiley smile

Le code php, il faut l'encadrer par :

<?php

// ici le code

?>

et ce n'est pas à mettre entre les balises "style".

Essaie ceci :

<?php

header('Content-type: text/html; charset=utf-8');

$listeonglet=array('','','','','');

if(!empty($_GET['page']))
{
	$page = $_GET['page'];

	switch($page)
	{
		case 'personnage':
			$listeonglet[0]=' class="ongletactif"';
		break;
		case 'compap':
			$listeonglet[1]=' class="ongletactif"';
		break;
		case 'equipement':
			$listeonglet[2]=' class="ongletactif"';
		break;
		case 'objets':
			$listeonglet[3]=' class="ongletactif"';
		break;
		case 'sorts':
			$listeonglet[4]=' class="ongletactif"';
		break;
	}
}

?><!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" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection
{
	#onglets { position: absolute; padding: 0; margin: 0; list-style-type: none;}
	#onglets li { float: left; margin: 0 5px;}
	.ongletactif { color: red; }
}

		--></style>
	</head>
	<body>

<ul id="onglets">
	<li><a href="index.php?page=personnage"<?php echo $listeonglet[0]; ?>>Personnage</a></li>
	<li><a href="index.php?page=compap"<?php echo $listeonglet[1]; ?>>Compétences & Aptitudes</a></li>
	<li><a href="index.php?page=equipement"<?php echo $listeonglet[2]; ?>>Equipements</a></li>
	<li><a href="index.php?page=objets"<?php echo $listeonglet[3]; ?>>Objets</a></li>
	<li><a href="index.php?page=sorts"<?php echo $listeonglet[4]; ?>>Sorts</a></li>
</ul>

	</body>
</html>

Modifié par koala64 (22 Aug 2007 - 12:09)

yodaswii

22 Aug 2007 à 13:09

Euh, juste une réflexion comme ça ... pourquoi conserver un lien sur un élément "actif" (revenir sur la même page ? on y est déjà ...). A partir de là plus de class ou d'id nécessaire en faisant la différence entre un lien et un "Text node" ...
Modifié par yodaswii (22 Aug 2007 - 13:12)

bromlecornu

22 Aug 2007 à 13:24

C'est bon j'ai réussi a me débrouiller

merci

koala64

Modérateur

22 Aug 2007 à 13:38

yodaswii a écrit :
Euh, juste une réflexion comme ça ... pourquoi conserver un lien sur un élément "actif" (revenir sur la même page ? on y est déjà ...). A partir de là plus de class ou d'id nécessaire en faisant la différence entre un lien et un "Text node" ...

erf... oui, tu as entièrement raison. Smiley langue

Julien Royer

22 Aug 2007 à 13:54

yodaswii a écrit :
Euh, juste une réflexion comme ça ... pourquoi conserver un lien sur un élément "actif" (revenir sur la même page ? on y est déjà ...). A partir de là plus de class ou d'id nécessaire en faisant la différence entre un lien et un "Text node" ...

Ca dépend, on peut être dans une page secondaire de l'onglet actif. Par exemple, je suis actuellement sur le forum d'Alsacréations, mais si je clique sur l'onglet correspondant, je retournerai à la page d'accueil du forum.

Et puis cette question du lien actif désactivé a déjà été débattue quelques fois ici. Smiley smile

yodaswii

22 Aug 2007 à 14:13

a écrit :
Ca dépend, on peut être dans une page secondaire de l'onglet actif. Par exemple, je suis actuellement sur le forum d'Alsacréations, mais si je clique sur l'onglet correspondant, je retournerai à la page d'accueil du forum.

Et puis cette question du lien actif désactivé a déjà été débattue quelques fois ici.

Oui, cela se justifie si l'onglet regroupe en effet plusieurs pages. Smiley cligne

<edit>Ce n'était nullement pour réouvrir ; c'était juste une interrogation dans le cas évoqué ci-dessus ... Après plusieurs visions des choses se confrontent et tant mieux Smiley smile

!</edit>
Modifié par yodaswii (22 Aug 2007 - 14:16)

Julien Royer

22 Aug 2007 à 14:30

yodaswii a écrit :
<edit>Ce n'était nullement pour réouvrir ; c'était juste une interrogation dans le cas évoqué ci-dessus ... Après plusieurs visions des choses se confrontent et tant mieux !</edit>

Tout à fait d'accord !

Sujet clos

Questions générales et questions de débutants

Debutant menu css