18072 sujets

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

[Résolu] Onglets CSS et PHP

Bonjour.

A la suite du tuto sur l'intégration d'un include en PHP, j'ai trouvé un autre tutorial cette fois-ci concernant les onglets.
Ce tuto : http://pompage.net/pompe/portescoulissantes/

Bref j'ai réussi à créer mes onglets comme vous pouvez le voir ici : http://www.meteobell.com/Test_01.php

Maintenant ce que je voudrais c'est que mon onglet s'active en fonction de la page qui est ouverte en Php, hélas ceci n'est pas précisé dans le tuto et malgré avoir essayé différentes façon, je vois pas bien comment y arriver.

Auriez-vous des pistes ou des liens vers des tutos expliquant ceci ou bien même des solutions toutes faites ? Je vous remecie d'avance....

PS : Les erreurs php sur les autres onglets que news sont normales je ne travaille pour l'instant qu'avec l'onglet news...
Modifié par Damonya (23 Sep 2005 - 18:10)
tu fais passer dans l'url le nom de l'onglet qui doit etre activé

page=untel&onglet=nom_de_longlet

Tu devras utiliser style="" dans la page, car un fichier css n'est pas dynamique (enfin il peut l'etre mais c'est se compliquer la vie)

Ensuite une condition :

if (onglet_passé_en_get == "news")
echo "style=\"background-image: url('tonimage.jpg');\"";

Enfin voilà c'est le truc le plus simple a mettre en place (pas le plus rapide, mais le plus simple)
C'est aussi tres lourd... en effet tu devras faire une condition a chaque onglet
Il y a surement un autre moyen mais aucun ne me vient a l'esprit pour l'instant

Je vais fouiner dans la doc et si je trouve une fonction intéréssante je repasse

bon courage Smiley smile
lol c'est bon en fait je viens de trouver tout seul. Bien plus simple que ce que tu proposes. c'etait tout con en fait. Je suis trop content car j'ai trouvé tout seul Smiley smile

Tiens pour les autres débutants, je vous montre. En fait suffisait de refaire la même chose, mais cette fois pour les onglets.

ma page Test_01.php :



<!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>Bienvenue sur le site de MétéOBell ! Accueil</title> <!--Titre de la page-->
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <!--language html en Francais-->
       <link rel="stylesheet" media="screen" type="text/css" title="Design Accueil 001" href="meteobell_accueil_002.css"/> <!--Lien fichiercss-->
   </head>
	
	<body>	

<div id="onglets">	
<?php 
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
 switch($page)
{
case 'accueil': include ('ongl_accueil.html');break;
case 'a_propos': include ('ongl_a_propos.html');break;
case 'news': include ('ongl_news.html');break;

} 
?>

</div>

<div id="introduction">	

<?php 
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; 
 switch($page)
{
case 'accueil': include ('accueil.html');break;
case 'a_propos': include ('a_propos.html');break;
case 'news': include ('news.html');break;

} 
?>
    	
</div>

	</body>
</html>


Ma partie news.html Vous faites pareil pour a_propos.html et accueil.html



	<div class="bloc_central_01">
           Bonjour et bienvenue sur le site d'un passionné de Météo.          
	</div>
	
	<div class="news">
       <h3>Les News</h3>
       <ul>   
	   
	   
	   
            <li>Orage Improbable du 06 Juin 2005 <br /><span class="texte_normal01"> Ajouté le 15-09-05</span><br />
		   <div class="texte_normal02"><br />Blab bla bla<br /><br /> 
	       Blab bla bla<br /><br />
			Bla bla bla<br /><br />
			</div></li>
		   
		   	<li>Ouverture du Site :<br /><span class="texte_normal01"> Ajouté le 08-09-05</span><br />
		   <div class="texte_normal02"><br />Bla bla bla<br />
		   Bla bla bla<br/><br />
		   Bla bla bla<br />
		   Bla bla bla<br /><br />
			Bla bla bla.<br /><br />
		   </div></li>
		   
		   <li>Construction du Site :<br /><span class="texte_normal01"> Ajouté le  17-07-05</span><br />
		   <div class="texte_normal02"><br /> Bla bla bla<br /><br />
		   Bla bla bla<br /><br />
		   </div></li>
   
	   </ul>
	</div>


le fichier ongl_accueil.html

<ul>
	<li id="onglet_actif"><a href="Test_01.php?page=accueil">Accueil</a></li>
	<li><a href="Test_01.php?page=a_propos">A Propos</a></li>
	<li><a href="Test_01.php?page=news">News</a></li>

</ul>


et pareil pour ongl_news et ongl_a_propos en décalant l'id onglet_actif tout simplement

Simple comme bonjour Smiley ravi

J'commence à m'améliorer sacrément je trouve.
- Ca va les chevilles ?
- lol bon oui d'accord je me congratule tout seul. Smiley confused

Smiley lol Smiley lol
Modifié par Damonya (23 Sep 2005 - 18:12)
<?php 
$onglets = array('accueil', 'a_propos', 'news ');
$i=0
while ($i < 2) {
if ($onglets[$i] == $_GET['page']) {
echo '<li id="onglet_actif">';
} 
else {
echo '<li>';
}
echo '<a href="Test_01.php?page=$onglets[$i]">$onglets[$i]</a></li>';
}
?>

Ce code quoique compliqué devrait t'éviter de créer une page html pour chaque cas Smiley smile
Car si tu augmente le nombre de menus tu devras augmenter le nombre de pages html pas vraiment utiles, là tu auras juste a ajouter le nom de ton onglets entre '' précédé d'une virgule, et d'augmenter la valeur maximum que peut atteindre $i dans la boucle Smiley cligne

Utilise ce que tu veux, personellement je suis fier d'avoir trouvé une méthode sans faire 2000 pages Smiley lol
Bonne continuation Smiley smile
Pour répondre à benji.

Ok merci, c'est sûr c'est plus pratique. Par contre je le met où ce code ? Enfin il remplace quoi ?
Et à la place du 2, si j'ai 4 onglets je met 3 ? C'est ça ?

Pour répondre à Olivier.

Ouh lala ca m'a l'air bien compliqué les endroits où m'emmènent tes liens. je crois que je vais m'en tenir là..... Smiley langue
Damonya a écrit :
Pour répondre à Olivier.

Ouh lala ca m'a l'air bien compliqué les endroits où m'emmènent tes liens. je crois que je vais m'en tenir là..... Smiley langue

C'est pourtant plus simple que ce qui est au dessus, m'enfin c'est toi qui voit ce qui te parait le plus adapté Smiley smile
Mais mon système il est bon quand même ou vous me déconseillez d'utiliser cette technique pour différentes raisons qui m'echapperaient ?

Je suis allez voir ton site en tout cas Olivier et j'ai vu qu'un petit tuto m'intéresserais bien pour encore compléter ce menu à onglet :

L'effet rollover. Dernière étape et j'aurais fini ce cadre dynamqiue qui me plait plutôt bien.

PS : J'en reviens toujours pas d'avoir trouvé tout seul sinon lol Smiley smile
Ton systeme est bon mis a part qu'ils multiplie les fichiers html
Donc pas de souci quand a son utilisation
Je montrais simplement un autre moyen qui permet (entre autre) d'éviter la multiplication des fichiers

a écrit :

Par contre je le met où ce code ? Enfin il remplace quoi ?
Et à la place du 2, si j'ai 4 onglets je met 3 ? C'est ça ?

Exactement tu mets 3 (en fait php compte 0 comme un nombre)

Ce code remplace ton premier switch :

<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; //on récupere l'onglet actif
$onglets = array('accueil', 'a_propos', 'news '); //on mets tout les onglets dans un tablo 
$i=0
while ($i < 2) {
if ($onglets[$i] == $page) echo '<li id="onglet_actif">'; else echo '<li>'; // si l'onglet numéro 1 correspond a l'onglet actif on met l'id sinon on met juste <li>
echo '<a href="Test_01.php?page=$onglets[$i]">$onglets[$i]</a></li>';//on affiche le reste des onglets 
}
?>


J'ai commenté le code pour que tu puisse comprendre le principe
Mais je ne l'ai pas testé le principe est bon mais il se peut qu'une erreur traine quelque part (genre une apostrophe oubliée ou une condition mal faite)
Ta solution est tout aussi bonne Smiley smile

a écrit :
C'est pourtant plus simple que ce qui est au dessus, m'enfin c'est toi qui voit ce qui te parait le plus adapté smile

Beh moi je trouve mon truc moins compliqué Smiley lol
Etant une daube en CSS je dirais que c'est une question d'habitude Smiley langue
Arf oui j'ai l'impression qu'une erreur effectivement s'y est glissé. J'arrive pas à le faire marcher en utilisant ton code. Smiley confus
Effectivement il manque un ; apres $i=0 ...

Je l'ai codé sur le forum même dont niveau syntaxe des erreurs ont pu se glisser...
De toute façon après réflexion, si tu arrive a faire ce qui est écrit dans les liens donnés ci-haut, met en place ce systeme, car tu n'es pas sans ignorer que php utilise de la ressource donc autant le faire fonctionner au mininum...
(et ce language serveur n'est pas a la base prévu pour des souci graphiques)

Bonne continuation Smiley cligne
Ok, je suis allé voir ailleurs.

On m'as dis qu'il y avait une boucle infinie.

Et que $onglets[$i] allait apparaître tel quel dans le lien.

Smiley murf

Bah je crois que pour juste 3 pages en plus, je vais garder ma méthode.

Merci quand même Smiley cligne Smiley smile
Exact Smiley smile
Ca m'a pris 2 secondes de trouver les erreurs, donc je poste quand meme la réponse correcte pour éviter de passer pou un boulet Smiley langue 

<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page']; //on récupere l'onglet actif
$onglets = array('accueil', 'a_propos', 'news '); //on mets tout les onglets dans un tablo
$i=0
while ($i < 2) {
if ($onglets[$i] == $page) echo '<li id="onglet_actif">'; else echo '<li>'; // si l'onglet numéro 1 correspond a l'onglet actif on met l'id sinon on met juste <li>
echo '<a href="Test_01.php?page=' . $onglets[$i] . '">' .$onglets[$i]. '</a></li>';
//on affiche le reste des onglets
$i= $i +1;
}
?>


Concaténation pour éviter que la variable apparraisse et incrémentation de $i pour éviter la boucle infinie

Mais bon garde tout de meme ta méthode Smiley langue
Ok merci Benji. Pour l'instant je garde ma méthode, mais je garde tout de même ça sous le pouce. Il est probable que j'utilise ton truc un peu plus tard. Pour l'insatnt j'ai d'autres priorité.

Merci encore en tout cas Smiley cligne
Ca y est j'ai réussi à faire marcher ton système, en revanche si je met 2 comme valeur, j'ai mon onglet news qui ne s'affiche pas. Si je met 3, alors là ca marche parfaitement Smiley cligne

Voici le code définitif (après pas mal de Test) qui semble marcher à merveille.



<div id="onglets">
<ul>	
<?php
if (!isset($_GET['page'])) $page= 'Accueil'; else $page= $_GET['page']; //on récupere l'onglet actif
$onglets = array('Accueil', 'A propos', 'News'); //on mets tout les onglets dans un tablo
$i=0;
while ($i < 3) {
if ($onglets[$i] == $page) echo '<li id="onglet_actif">'; else echo '<li>'; // si l'onglet numéro 1 correspond a l'onglet actif on met l'id sinon on met juste <li>
echo '<a href="Test_01.php?page=' .$onglets[$i]. '">' .$onglets[$i]. '</a></li>';
//on affiche le reste des onglets
$i= $i +1;
}
?>
</ul>

</div>


Merci pour tout Benjii.

Je pense que ca pourra servir à d'autres Smiley smile
Exact, la valeur commence a 0, mais je demandais quelque chose de plus petit que 2 ^^
donc ca fesait 0 et 1 et pas de troisième boucle Smiley smile
J'ai pas pensé a tout Smiley langue

Bravo pour ton acharnement Smiley langue
bonne continuation Smiley smile
Sujet clos
Aller à