18041 sujets

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

Comment réaliser une sorte de menu a onglet....

Bonsoir à tous,


Je voudrait savoir si c'est possible de réaliser un menu en onglet qui on fonction d'un onglet sélection afficherait un DIV, j'ai vu pas mal d'exemple pour les menu en onglet qui affichait une page web mais aucun qui affiche des div.


Est-ce réalisable?

J'ai trouvé ceci http://www.xhtml.net/xhtmlcss/csstabs un menu a onglet tout simple mais au lieu de que ça soit des pages je voudrait que cela affiche des div.

Merci d'avance pour votre aide

guigui69
Hop hop...


Tu voudrais ton menu et en dessous des div qui changent selon l'onglet que tu click ?

Tu fais une page en php avec le menu en onglet... appelée head.php par exemple...

Dans chaque lien d'onglet tu dirige vers la même page mais avec une variable... par exemple :
heap.php?bidule=div1

Et après ton menu tu mets une ligne qui récupère la valeur de la variable du genre :
<?php $bidule =  $_GET['bidule']; ?>

Suivi d'un include qui affiche le morceau de code avec le div approprié en fonction de la valeur de "bidule"...
 <?php include ("$bidule.php"); ?>

Pour cet exemple ça donnera : 
<?php include ("div1.php") ?>

Donc à coté de ton head.php il te faut autant de div1.php, div2.php,... que de div différents souhaité...


Smiley langue
Modifié par Velbain (23 Apr 2008 - 20:40)
guigui69 a écrit :
Je voudrait savoir si c'est possible de réaliser un menu en onglet qui on fonction d'un onglet sélection afficherait un DIV, j'ai vu pas mal d'exemple pour les menu en onglet qui affichait une page web mais aucun qui affiche des div.
Smiley hein Et c'est quoi l'intérêt d'afficher des div plutôt que des pages ?

Si c'est pour ne pas recharger la page en cours il va falloir regarder du côté de Javascript.


@Velbain : ta solution revient à avoir une nouvelle page pour chaque onglet Smiley cligne .

A+
How...


Heyoan a écrit :
Smiley hein Et c'est quoi l'intérêt d'afficher des div plutôt que des pages ?

J'avoue que je me suis posé la même question...
J'ai essayé de broder un truc... une piste... Smiley langue

Heyoan a écrit :
@Velbain : ta solution revient à avoir une nouvelle page pour chaque onglet Smiley cligne .

Si j'ai envie de jouer sur les mots y'a qu'UNE SEULE page avec un include variable Smiley lol ...

Smiley langue
Bonjour Merci de m'avoir répondu,

En fait je réalise une requête sql qui va chercher des données dans ma base mysql.

Et le résultat sera sous la forme de 3 tableaux distincts (donc 3 onglet).

Je peut rajouter dans mes page ceci



page1.php?mois_inventaire=02&annee_inventaire=2008


Est-ce correcte?

Merci d'avance pour votre aide

guigui69
guigui69 a écrit :
Et le résultat sera sous la forme de 3 tableaux distincts (donc 3 onglet).
Donc 3 requêtes Smiley murf ?

guigui69 a écrit :
Je peut rajouter dans mes page ceci

page1.php?mois_inventaire=02&annee_inventaire=2008

Est-ce correcte?
oui... et si c'est pour passer les variables nécessaires aux requêtes c'est même une bonne idée Smiley cligne (à condition bien sûr de bien vérifier leur valeur avant de les effectuer puisqu'elles seront très facilement modifiables dans l'url).

A+
merci pour vos réponses, ca à l'air de fonctionner.

J'ai encore un petit soucis, j'ai un scrool sur la droite que je comprend pas.

voici le code css du site:

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	background:#41b7d4;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
div#conteneur
{
	width: 1000px ;
	height: auto;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #0066CC;
	background: #fff ;
}
h1#header
{
	border-bottom: 1px dashed #41b7d4;	
	height: 100px ;
	background: url(header.jpg) no-repeat left top ;
}
div#menu 
{
float: left ;
border-right: 2px dashed #41b7d4;
border-bottom: 2px dashed #41b7d4;
padding: 0 ;
height: auto ;
width: 200px;
margin: 0 0 10px 10px;
text-align: center ;
}

div#menu ul
{
padding : 0;
}
div#menu li
{
margin : 0 auto;
list-style-type: none ;
text-align: left ;
}
div#menu  li a
{
margin : 0 10px 0 5px;
	color: #000000;
	display: block ;
	text-decoration: none ;
	border-bottom: 1px dashed #FF6600;
}

div#menu h2
{
padding:0 0 0 15px;
text-align: left ;
border: 1px solid #FF6600;
background: url(croix.jpg) no-repeat left;
font-size: 1.0em ;
}

div#contenu
{
margin: 0px 0px 0 10px ;
float: left ;
display: block ;
width:770px;
border-left: 2px dashed #41b7d4;
border-right: 2px dashed #41b7d4;
overflow: auto;
}
div#contenu h2
{
	margin: 0 10px 0 10px;
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #FF6600 ;
	background: url(bouton.jpg) no-repeat left bottom ;
	border-bottom: 1px solid #41b7d4 ;
	border-left: 1px solid #41b7d4 ;
}
table {
border: medium solid #000000;
border-collapse: collapse;
width: 770px;

}
td, th {
border: medium solid #000000;
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;

}

div#information
{
clear: left;
margin: 10px auto;
padding: 0 15px 0 0;
text-align: right ;
color: #0066CC ;
}
table#ajout
{
border-collapse : collapse; 
border: 1px solid #000000;
}
table#ajout th,td
{
 border : 1px solid #000; 
 padding : 2px 4px; 
}
table#ajout th
{
 background-color : #eee; 
}
.important {color : red;}

div#groupe {
	float: left;
	width: 325px;
	margin: 10px 0 10px 10px;
	height: 350px; 
	border: 1px solid #eee;
	}
div#fournisseur {
	position: relative;
	width: 325px;
	float: right;
	height: 350px;
	margin: 10px 10px 10px 0;
	border: 1px solid #eee;
	 }

table#tableau {
	width: 770px;
	clear: left;
	border: 1px solid #000000;
}

table#tab_inventaire
{
	margin: 0 auto;
	width: 770px;
	border: 1px solid #000000;
}


le code css pour le menu:


l#tabnav {
	padding: 0 0 20px 10px;
	border-bottom: 2px solid #41b7d4;
	}

#tabnav li {
    margin: 0;
    padding: 0;
    display: inline;
    list-style-type: none;
}

#tabnav a:link, #tabnav a:visited {
    float: left;
    font-size: 10px;
    line-height: 14px;
    font-weight: bold;
    margin: 0 10px 4px 10px;
    text-decoration: none;
    color: #FF6600;
}
#tabnav li.active a:link, #tabnav li.active a:visited, #tabnav a:hover {
	border-bottom: 4px solid #41b7d4;
	padding-bottom: 2px;
	background: #fff;
	color: #41b7d4;
	}

#tabnav a:hover {
	color: #41b7d4;
}

table#recap
{
overflow:auto;
border: medium solid #000000;
border-collapse: collapse;
width: 730px;
}


code 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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title> Réalisation de l'inventaire de l'emballage</title>
<LINK href="site.css" rel="stylesheet" type="text/css">
<LINK href="recap_inv.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="conteneur">
			<h1 id="header"><a href="acceuil.php"></a></h1>
<div id="menu">
			<h2>Prix de revient</h2>
			<ul>
			<li><a href="visupdr1.php">Visualisation</a></li>
			<li><a href="ajoutpdr.php">Ajout </a></li>
			<li><a href="pdrvisu1.php">Calcul temp réel</a></li>
			</ul>
			<h2>M.premieres/emballages</h2>
			<ul>
			<li><a href="">Ajout: matiere premiere</a></li>
			<li><a href="">Ajout: emballage</a></li>
			<li><a href="modmatiere1.php">Modification: matiere premiere</a></li>
			<li><a href="modemballage1.php">Modification: emballage</a></li>
			</ul>
			<h2>Romuald</h2>
			<ul>
			<li><a href="romuald1.php">Listing des prix de revient</a></li>
			</ul>
			<h2>Fournisseur</h2>
			<ul>
			<li><a href="steph1.php">Commande founisseur</a></li>
			</ul>
						<h2>Inventaire</h2>
			<ul>
			<li><a href="inventaire_mat1.php">Matieres premieres(beta)</a></li>
			<li><a href="inventaire_emb1.php">Emballage</a></li>
			<li><a href="">Visualisation </a></li>
			<li><a href="">Recapitulatif</a></li>


			</ul>
</div>
			<div id="contenu">
				<h2>Sélectionner le mois et l'année :</h2>
<?php

$mois_inventaire = isset($_GET['mois_inventaire'])?$_GET['mois_inventaire']:null;
$annee_inventaire = isset($_GET['annee_inventaire'])?$_GET['annee_inventaire']:null;
?>
<br>
<ul id="tabnav">
    <li><a href="recap_inv_mat.php?mois_inventaire=<?php echo $mois_inventaire;?>&annee_inventaire=<?php echo $annee_inventaire;?>">Matiere premiere</a></li>
    <li><a href="recap_inv_emb.php?mois_inventaire=<?php echo $mois_inventaire;?>&annee_inventaire=<?php echo $annee_inventaire;?>">Emballage</a></li>
    <li><a href="recap_inv_total.php??mois_inventaire=<?php echo $mois_inventaire;?>&annee_inventaire=<?php echo $annee_inventaire;?>">Total</a></li>
</ul>
<?php
//$mois_inventaire = isset($_POST['mois_inventaire'])?$_POST['mois_inventaire']:null;
//$annee_inventaire = isset($_POST['annee_inventaire'])?$_POST['annee_inventaire']:null;

//echo $mois_inventaire;
//echo '<br>';
//echo $annee_inventaire;
//echo '<br>';
$mois1= $mois_inventaire- 1;
$annee1 = $annee_inventaire;
if ($mois1 == 00) {

$mois1=12;
$annee1 = $annee_inventaire_mat-1;
}
//echo '<br>';
//echo $mois1;
//echo '<br>';
//echo$annee1;
//echo '<br>';
$server="******";
$user="*****";
$pass="******";
$db="pdr";
mysql_connect($server,$user,$pass) or die('erreur de connexion');
mysql_select_db($db) or die ('impossible de se connecter a la base');
$sql1="SELECT matiere.code_m, nom_m, nom_four, cond_m, unite_conditionnement, pu_m, inventaire_mat.qte_inventaire_mat as qte_prec, t1.qte_inventaire_mat as qte_actuel 
FROM matiere
LEFT JOIN inventaire_mat ON matiere.code_m = inventaire_mat.code_m
LEFT JOIN inventaire_mat t1 ON matiere.code_m = t1.code_m
INNER JOIN fournisseur ON matiere.id_four = fournisseur.id_four
INNER JOIN conditionnement ON conditionnement.id_conditionnement = matiere.id_conditionnement
WHERE id_matiere_type = '1' 
AND (
 (inventaire_mat.mois_inventaire_mat ='$mois1' AND inventaire_mat.annee_inventaire_mat ='$annee1') 
 OR (inventaire_mat.mois_inventaire_mat IS NULL AND inventaire_mat.annee_inventaire_mat IS NULL)
)
AND (
 (t1.mois_inventaire_mat ='$mois_inventaire' AND t1.annee_inventaire_mat ='$annee_inventaire') 
 OR (t1.mois_inventaire_mat IS NULL AND t1.annee_inventaire_mat IS NULL)
)
ORDER BY matiere.code_m;";
//echo $sql1;
$query1 = mysql_query($sql1) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
?>

<table id="recap">
<tr>
<td>Nom:</td><td> Fournisseur</td><td>cond</td><td>prix</td><td>qte m-1</td><td> qte mois actuel</td>
</tr>

<?php
while ($ligne = mysql_fetch_assoc( $query1 ) ) {

echo "<tr><td>".$ligne['nom_m']."</td>";
echo "<td>".$ligne['nom_four']."</td>";
echo "<td>".$ligne['cond_m']."".$ligne['unite_conditionnement']."</td>";
echo "<td>".$ligne['pu_m']."</td>";
echo "<td>"; 
if ($ligne['qte_prec'] != NULL) {echo $ligne['qte_prec'];} 
else { echo "N.C";};
echo "</td>";
echo "<td>" ;
if ($ligne['qte_actuel'] != NULL) {echo $ligne['qte_actuel'];} 
else { echo "N.C";};
echo "</td></tr>";
}
?>
</table>

	
			
				
				
				</div>
<div id="information">
Ceci est la version v0.1a5. Merci de contacter Florent pour les bug rencontrés.
</div>


</div>

</body>
</html>


Voila ce que ca donne en image:
[img=http://img183.imageshack.us/img183/7540/problemefy1.th.jpg]


Quel code css est en trop? manquant? on est mon erreur?

Merci d'avance pour votre aide

guigui69
Bonjour,

Essaie avec overflow: hidden plutôt que overflow: auto.
div#contenu {
	...
	overflow: hidden;
}
Sujet clos
Aller à