[UI] DIV s'affiche en dehors de l'onglet

Bonjour,

j'utilise jquery ui pour les onglets sur mon site.
J'ai 4 onglets, dont 3 qui s'affichent correctement.
Pour le 4ème, les div s'affichent en dessous de l'onglet.

Je n'arrive pas à trouver de solution. Si l'un de vous a une idée. :ccool:

Merci d'avance.

Code de l'index :

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
 
<!DOCTYPE html>
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
 
<!--SCRIPTS-->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="js/verif_form_mail.js"></script>
<script type="text/javascript" src="js/realisation.js"></script>
 
<!--CSS-->
<link rel="stylesheet" type="text/css" href="css/formulaire.css" />
<link rel="stylesheet" href="css/realisation.css" type="text/css" media="screen" title="realisation" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.23.custom.css" />
 
<!--GMAP3-->
<script type="text/javascript" src="js/gmap3.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/gmap3-menu.css" />
<script type="text/javascript" src="js/gmap3-menu.js"></script>
 
<script>
$(function(){
                                // Tabs
                                $('#tabs').tabs();
                                });
</script>				
 
</head>
 
<body>
<div class="logo"></div>
<div class="conteneur">
 
			<div id="tabs">
				<ul>
				<li><a href="page/accueil.php">Accueil</a></li>
				<li><a href="page/realisation.php">Nos réalisations</a></li>
				<li><a href="page/coordonnees.php">Coordonnées</a></li>
				<li><a href="page/formulaire-contact.php">Formulaire de Contact</a></li>
				</ul>
			</div>
</div>	
</body>
</html>

Code de l'onglet coordonnées (la fonction java de gmap3 doit être dans la page donc cela ne fait pas très propre mais pas le choix ...) :

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
 
<div id="coordonnees">
<p>SARL</p>
&nbsp;
<p>Adresse:</p>
<p>xxxxxx</p>
<p>xxxxx</p>
<p>xxxxxx</p>
&nbsp;
<p>Téléphone:</p>
<p>xxxxxxxx</p>
&nbsp;
<p>Adresse Mail :</p>
<p>xxxxxx</p>
</div> 
 
<div id="googleMap"></div>
<div id="directions"></div>
 
<script type="text/javascript">
      $(function(){
 
        var $map = $("#googleMap"), 
          menu = new Gmap3Menu($map),
 
          current,  // current click event (used to save as start / end position)
          m1,       // marker "from"
          m2;       // marker "to"
        ***** fonction java effacer pour le post****
          // add direction renderer to configure options (else, automatically created with default options)
          directionsrenderer:{
            divId:"directions",
            options:{
              preserveViewport: true,
              markerOptions:{
                visible: false
              }
            }
          }
        });
      });
    </script>