Discussion :

[xboulney]

Bonjour à tous.
J'ai un leger souci sur un menu que j'ai copié à partir d'un tuto dispo sur le site et que j'ai quelques peu modifier.

Voilà le code HTML :

Code html :

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
 <div class="contentabs_area">
            <script type="text/javascript">
              // Une fois le chargment de la page terminé ...
              $(document).ready(function(){    
                // Lorsqu'un lien a.tab est cliqué
                $("a.tab").click(function () {        
                    // Mettre toutes les onglets non actif
                    $(".active").removeClass("active");
                    
                    // Mettre l'onglet cliqué actif
                    $(this).addClass("active");
                    
                    // Cacher les boîtes de contenu
                    $(".panel").slideUp();
                    
                    // Pour afficher la boîte de contenu associer, nous
                    // avons modifier le titre du lien par le nom de
                    // l'identifiant de la boite de contenu
                    var contenu_aff = $(this).attr("title");
                    $("#" + contenu_aff).slideDown();      
                });
              });
            </script>    
 
        <ul class="navigation_tabs">
            <li><a href="javascript:ChangeOnglet_2 (1, 6, 'tab_', 'menu_');" id="tab_1" class="active">Menu1</a></li>
            <li><a href="javascript:ChangeOnglet_2 (2, 6, 'tab_', 'menu_');" id="tab_2">Menu2</a></li>
            <li><a href="javascript:ChangeOnglet_2 (3, 6, 'tab_', 'menu_');" id="tab_3">Menu3</a></li>
            <li><a href="javascript:ChangeOnglet_2 (4, 6, 'tab_', 'menu_');" id="tab_4">Menu4</a></li>
            <li><a href="javascript:ChangeOnglet_2 (5, 6, 'tab_', 'menu_');" id="tab_5">Menu5</a></li>
            <li><a href="javascript:ChangeOnglet_2 (6, 6, 'tab_', 'menu_');" id="tab_6">Menu6</a></li>
        </ul>
 
        <div style="display: block;" id="menu_1" class="panel">
            <img src="imagesII/Bkgd_mainboard.png"/>
        </div>        
        <div style="display: none;" id="menu_2" class="panel">
            <img src="imagesII/Bkgd_Searchform.png"/>
        </div>    
        <div style="display: none;" id="menu_3" class="panel">
            <img src="imagesII/Bkgd_mainboard.png"/>
        </div>    
        <div style="display: none;" id="menu_4" class="panel">
            <img src="imagesII/Bkgd_mainboard.png"/>
        </div>
        <div style="display: none;" id="menu_5" class="panel">
            <img src="imagesII/Bkgd_mainboard.png"/>
        </div>    
        <div style="display: none;" id="menu_6" class="panel">
            <img src="imagesII/Bkgd_mainboard.png"/>
        </div>            
    </div>

et le CSS qui va avec :

Code :

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

1
2
3
4
5
6
7
8
#contentabs_area {margin: 0px auto 0px auto;}
    .navigation_tabs {float:right;width:607px;height:22px;background-image: url(imagesII/Bkgd_Menutop.png);padding:13px;}:/*contenu*/
        ul.navigation_tabs {float:right;border:none;}
        ul.navigation_tabs li {display: inline;list-style:none;}
        ul.navigation_tabs a {padding: 8px 14px 8px 14px;color:#8e4c21;text-decoration: none;font-family:trebuchet ms,verdana,arial;font-size:.9.3em;}
        ul.navigation_tabs a:hover {text-decoration: underline;color:#ffffff;}
        ul.navigation_tabs a.active {text-decoration: underline;color:#ffffff;}
    #menu2,#menu3,#menu4,#menu5,#menu6, { display:none; }

Cette partie de code est chargée depuis la page HOME et appelée dans un include.

Mon problème est que je n'arrive pas à "coller" la partie "navigation_tabs" à mon "panel". J'ai toujours un blanc d'environ 15px entre les deux.

Merci à ceux qui pourront me donner une solution .

[Kerod]

As-tu pensé aux notions de marges natives au ul ? Le problème doit venir de là.
Autrement on peut pas tester et te donner une réponse sure à 100% vu que l'on ne peut pas tester. Tu as des images dc...