Pourquoi mon menu n'est pas a sa place ?

**flippaeti** · 18/02/2009, 11h48

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 :

sous Mozilla :

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

**beeboo** · 18/02/2009, 12h02

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/

**flippaeti** · 19/02/2009, 10h07

Le header :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**flippaeti** · 19/02/2009, 14h45

Le code pour les onglets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;   
    }
?>

Pourquoi mon menu n'est pas a sa place ?

HTML

Vue hybride

Discussions similaires

Partager

Partager