Pourquoi mon menu n'est pas a sa place ?

Version imprimable

18/02/2009, 11h48
flippaeti

Pourquoi mon menu n'est pas a sa place ?

Bonjour tous le monde,

Je suis en créer de créer un site, et j'ai un petit soucis depuis que j'ai créer mes onglets.
Sur toute mes pages il y a un header pour afficher le menu (jusque là tout va bien), Dans mon menu "Gestion" j'ai voulu qu'il apparaisse des onglets (vts, promotion, depot ...), les onglets sotn créer comme je le souhaiter mais le soucis est que soit (sous IE) il se supperpose au header, soit (sous le reste je pense mais dans ce cas mozilla) il se mette au dessus du header.

sous IE :
http://nsa05.casimages.com/img/2009/...2232803206.jpg

sous Mozilla :
http://nsa05.casimages.com/img/2009/...2337252487.jpg

Precision : Pour faire les onglets je suis aller sur le site pour comprendre. je pense que le soucis est sans doute lier à la CSS mais je n'en avat jms auparevent donc je suis un peu perdu

Merci d'avance
18/02/2009, 12h02
beeboo

Salut, merci de nous poster ton code, sans ça il est difficile de t'aider.

Pour mieux te former va voir les cours et tutoriels HTML : http://xhtml.developpez.com/cours/ et la FAQ HTML : http://xhtml.developpez.com/faq/

Le header :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La base de donnée</title>
<link href="feuilleStyle.css" rel="stylesheet" type="text/css" />
 
	<!--Feuille de style du header-->
		<style type="text/css">        
        .titre {
            font-size: 50px;
            color: #00F;
                }        
        </style>
 
</head>
 
<!--Menu-->
<body>
 
<p align="center" class="titre">   
<u>Gestion de la Base de Données</u></p>
<div id="global">
<div id="navbar2" align="center">
<ul>
    <li><a href="Accueil.php">Accueil</a></li>
    <li><a href="">Gérer les disques</a></li>   //a faire
    <li><a href="">Gérer les pistes</a></li>     // a faire
    <li><a href="">Gérer les Distributeurs</a></li>    // a faire
    <li><a href="Depot.php">Gérer les Stocks</a></li>
  </ul>
</div>
 
<div id="central">
 
<div id="gauche">
</div>

La feuille de style :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
@charset "utf-8";
/* CSS Document */
 
 
div#navbar2 { height: 30px; width: 100%; border-top: solid #000 1px; border-bottom: solid #000 1px;} 
div#navbar2 ul {
	margin: 0%;
	padding: 0%;
	font-family: Verdana, Geneva, sans-serif;
	font-size: small;
	line-height: 30px;
	white-space: nowrap;
	color: #309;
} 
div#navbar2 li { list-style-type: none; display: inline; } 
div#navbar2 li a { text-decoration: none; padding: 7px 10px; color: #00000; } 
div#navbar2 li a:link { color: #00000: } 
div#navbar2 li a:visited { color: #00000; } 
div#navbar2 li a:hover {
	color: #F00;
	background-color: #808080;
 
} 
 
 
#onglets li
{
    float : left;
    height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    background-color: #F4F9FD;
	margin : 2px 2px 0 2px !important;  /* Pour les navigateurs autre que IE */
    margin : 4px 2px 0 2px;  /* Pour IE  */
    border : 1px solid #9EA0A1;
}
 
#onglets li.active
{
    border-bottom: 1px solid #fff;
    background-color: #fff;
}
 
#onglets a
{
    display : block;
    color : #666;
    text-decoration : none;
    padding : 4px;
}
 
#onglets a:hover
{
    background : #fff;
}
 
#menu
{
        border-bottom : 1px solid #9EA0A1;
        padding-bottom : 25px;
}
 
#onglets
{
	position : absolute;
	border : 1px solid transparent;
	padding : 0;
	font : bold 11px Batang, arial, serif;
	list-style-type : none;
	left : 218px;
	margin-top : 0;
	width : 1130px;
	margin-left : -215px; /* la moitié de width */
	top: 9px;
 
}

Le première onglets du menu gerer stock // depot :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<?php include("header.php") ?>
 
<div id="corp" align="center">
<p>
 <?php require_once("MenuStock.php"); $menu = affiche_menu(); ?>
</p>  
 
<link href="feuilleStyle.css" type="text/css" rel="stylesheet" />     
 
<?php echo $menu; ?>
</div>
<?php include("footer.php"); ?>

voila :D

Le code pour les onglets:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
    function affiche_menu()
    {
        // tableaux contenant les liens daccès et le texte à afficher
 
        $tab_menu_lien = array( "Depot.php", "Vente.php", "Promo.php", "Retour.php", "Etat.php");
        $tab_menu_texte = array( "Les Depots", "Les Ventes", "Les Promotions", "Les Retours", "Les Etats" );
 
        // informations sur la page
        $info = pathinfo($_SERVER['PHP_SELF']);
 
        $menu = '';
        
        $menu .= '
        <div id="menu">
            <ul id="onglets">
            ';
 
        // boucle qui parcours les deux tableaux
        for($ind_menu = 0; $ind_menu < count($tab_menu_lien); $ind_menu++)
        {
            $menu .= 
            '    <li';
                
            // si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
            if( $info['basename'] == $tab_menu_lien[$ind_menu] )
                $menu .= ' class="active"';
                
            $menu .= '><a href="' . $tab_menu_lien[$ind_menu] . '">' . $tab_menu_texte[$ind_menu] . '</a></li>
            ';
        }
        
        $menu .= 
        '</ul>
        </div>';
        
        // on renvoie le code xHTML
        return $menu;   
    }
?>