5568 sujets

Sémantique web et HTML

Navigation de plusieurs article dans un block div

Et bonjour à tous !

Le titre ne présentant pas de manière clair mon soucis, je m'explique :

Je me casse la tête à cherche un moyen pour faire en sorte que dans un bloc <div> que l'on va appelé Content qui est partagé verticalement en 2.

Dans la partie de gauche "Side_gauche" il y a une liste de 3 liens de type ancre qui nous renvoi chacun vers ce que contient la partie de droite "Side_droite", dans lequel se trouve 3 autres bloc que l'on va appelé "article1", "article2", "article3".

Je souhaiterais faire en sorte que lorsque je clic sur une ancre, exemple "article1", celle-ci me renvoi vers l'article 1 sans afficher les 3 autres article. Faire une sorte de slide de gauche à droite, sans faire non plus un diaporama.

Ci-joint, une explication sous forme de photo.
upload/44241-explicatio.jpg

N'ayant pas assez de connaissance à ce sujet et en espérant avoir été le plus clair possible, je sollicite votre aide ! Smiley smile
Modifié par samou84 (16 Apr 2012 - 15:22)
Personnellement je ferais ça en php :

Si je clique sur mon lien dans Side_gauche exemple :

<a href="mapage.php?article=1">Article 1</a>


Dans Side_droite je récupère via l'URL l'identifiant de l'article dans ce cas "1",

<?php
if($_GET['article'] == 1){
   echo'
          <div>Mon article</div>
  ';
}
?>


Après il y a d'autres solutions, javascript, CSS3 pour le faire.
Modifié par G3ronim0 (16 Apr 2012 - 18:08)
Alors j'ai essayé t'as méthode et elle marche ! Seule souci j'aimerai Arriver dès que je suis sur mon index sur mon article 1 par défaut, mais n'étant pas très calé dans le php, j'ai une erreur qui vient lorsque je suis sur mon index.php :

Voici ma page de test (index.php) :


<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title></title>

  <link rel="stylesheet" media="screen" href="style.css">
</head>
<body>

<div id="wrap">
	
		<div id="side_gauche">
		<ul>
			<li><a href="index.php?article=1">Article 1</a></li>
			<li><a href="index.php?article=2">Article 2</a></li>
			<li><a href="index.php?article=3">Article 3</a></li>
		</ul>
		</div>
		
		<div id="side_droite">
		<?php

			if($_GET['article'] == 1){

			   echo'

					  <div>Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1
					  Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1
					  Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1Mon article 1</div>

			  ';

			}

		?>
		
				<?php

			if($_GET['article'] == 2){

			   echo'

					  <div>Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2
					  Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2
					  Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2
					  Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2Mon article 2</div>

			  ';

			}

		?>
		
		
				<?php

			if($_GET['article'] == 3){

			   echo'

					  <div>Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3
					  Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3
					  Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3
					  Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3Mon article 3</div>

			  ';

			}

		?>
		</div>

</div>

</body>
</html>


Et son CSS : 


body{background-color:grey;}

#warp{width:1000px;height:500px;}
	#side_gauche{float:left;width:500px;height:500px;background-color:green;}
	#side_droite{float:left;width:500px;height:500px;background-color:blue;}


Et enfin voici l'erreur :

upload/44241-erreur.jpg
Modifié par samou84 (17 Apr 2012 - 01:43)
Tu dois testé si $_GET existe et s'il contient quelque chose :

<?php

if(isset($_GET['article'])){
     $article = $_GET['article'];
}else{
    $article = 1;
}

if($article == 1){
     echo 'Mon article 1';
}
...
?>

Modifié par G3ronim0 (17 Apr 2012 - 08:31)
Ça marche seule problème, je voudrais que, lorsque que je suis sur mon index.php, qu'au lieu de m'afficher Mon article 1 ; Mon article 2; et mon article 3, Cela m'affiche soit une page du type " ceci est ma page d'accueil" soit rien.

upload/44241-resultat.jpg
Pas très compliqué...

<?php
if(isset($_GET['article'])){
     $article = $_GET['article'];
}else{
    $article = 0;
}

if($article == 0){
     echo 'Mon message d'accueil';
}
...
?>

Modifié par G3ronim0 (17 Apr 2012 - 19:13)
Bon après test cela m'affiche "Ma page d'accueil", "Mon article 1", "Mon article 2" et "mon article 3" quand je suis sur mon index, donc j'ai pas la solution pour afficher seulement "Ma page d'accueil" quand je suis sur, par exemple : localhost/test/index.php ( en local sur wamp).

Merci en tout cas d'avoir pris le temps de m'aider ! Smiley biggrin
Salut,

je viens de tester ça :

<?php
if(isset($_GET['article'])){
     $article = $_GET['article'];
}else{
    $article = 0;
}

echo'
   <ul>
	<li><a href="index.php">Accueil</a></li>
	<li><a href="index.php?article=1">Article 1</a></li>
	<li><a href="index.php?article=2">Article 2</a></li>
  </ul>
';

if($article == 0){
     echo 'Mon message d\'accueil';
}
if($article == 1){
	echo'Article 1';
}

if($article == 2){
	echo'Article 2';
}

?>


Ca marche sous Wamp 2.2, et sur mon serveur mutu...
Modifié par G3ronim0 (18 Apr 2012 - 08:14)
Sujet clos
Aller à