Menu avec background overflow [Résolu]

[johnbenz]

Bonjour je souhaite réaliser le menu d'onglets suivant.



Pour celà j'utilise

Code html :

1
2
3
4
5
6
7
8
9
10
11
<div id="mes_tabs">
    <div class="tab">
        <div class="tab_selected">
        </div>
    </div>
    <div class="tab">
    </div>
    <div class="tab">
    </div>
...
</div>

et la div dont la classe est "tab_selected" contient le background en bleu. Celui ci doit être plus grand que la div class="tab", je voudrai donc le faire déborder.

J'ai essayé de mettre

Code css :

1
2
3
4
div.tab
{
    overflow:visible;
}

mais ça déborde en dessous.

Des idées?
Merci
John

[ornitho13]

Salut,

pourrais tu mettre ton code CSS ?

[johnbenz]

Bonjour ornitho13, merci pour ton aide,

le code CSS est le suivant:

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
75
76
77
78
79
80
81
 
div#tabs_list
{
    width: 640px;
    margin-bottom: 50px;
}
 
div#tabs_list div
{
    text-align: center;
    font-family: Arial;
    font-size: 12pt;
    color: #2e2e2e;
    font-weight: bold;
    vertical-align: bottom;
    overflow: visible;
}
div#tabs_list div.tab_number0
{
    height: 33px;
    width: 139px;
    float: left;
    background-image: url('/images/shared/rightBottomTab.jpg');
    background-repeat: no-repeat;
}
 
div#tabs_list div.tab_number1,div#tabs_list div.tab_number2,div#tabs_list div.tab_number3
{
    height: 33px;
    width: 120px;
    float: left;
    background-image: url('/images/shared/bottomTab.jpg');
    background-repeat: no-repeat;
}
 
div#tabs_list div.tab_number4
{
    height: 33px;
    width: 135px;
    float: left;
    background-image: url('/images/shared/leftBottomTab.jpg');
    background-repeat: no-repeat;
 
    background-position: top right;
}
 
div#tabs_list div.tab_number9,div#tabs_list div.tab_number14
{
    margin-left: 15px;
    height: 30px;
    width: 120px;
    float: left;
    background-image: url('/images/shared/regularTab.jpg');
    background-repeat: no-repeat;
}
 
div#tabs_list div.tab_number5,div#tabs_list div.tab_number6,div#tabs_list div.tab_number7,div#tabs_list div.tab_number8,div#tabs_list div.tab_number10,div#tabs_list div.tab_number11,div#tabs_list div.tab_number12,div#tabs_list div.tab_number13
{
    height: 30px;
    width: 120px;
    float: left;
    background-image: url('/images/shared/regularTab.jpg');
    background-repeat: no-repeat;
    background-position: top right;
}
 
div#tabs_list div div.selected_tab
{
    background-image: url('/images/shared/selectedTab.png');
    background-repeat: no-repeat;
    color: white;
    height: 315px;
    width: 124px;
    overflow: visible;
}
 
div#tabs_list div.clear_div
{
    clear: both;
    background: none;
}

Mon menu est construit par jQuery, voici la partie du code qui concerne le menu:

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
 
var tabsContent = '';
 
 
    var i = 0;
    categories.each(function(){
 
 
        nbrCategories -= 1;
        if((i%5) == 0){
            tabsContent += '<div class="clear_div"></div>';
        }
        if(i == 0)
        {
            $(this).html('<div class="tab_number'+nbrCategories+'"><div class="selected_tab">'+$(this).html()+'</div></div>'); 
        }
        else
        {
            $(this).html('<div class="tab_number'+nbrCategories+'">'+$(this).html()+'</div>');
        }
 
        tabsContent += $(this).html();
 
        i++;
    });
 
    tabsContent += '<div class="clear_div"></div>';
    $('div#tabs_list').html(tabsContent);

et pour l'instant j'ai quelque chose comme ça

On voit bien que le design photoshop en prend un coup

Merci

[ornitho13]

As tu essayé de rajouter un z-index sur la <div> sélectionnée (class="tab_selected") ?

Code :

1
2
3
4
5
6
7
8
9
10
div#tabs_list div div.selected_tab
{
    background-image: url('/images/shared/selectedTab.png');
    background-repeat: no-repeat;
    color: white;
    height: 315px;
    width: 124px;
    overflow: visible;
    z-index:20;
}

Peux tu mettre ton script en ligne ?

[johnbenz]

Je viens d'essayer avec z-index et ça ne marche pas non plus.
Pour le code c'est une partie d'un projet symfony2 donc je ne peux pas le mettre en ligne rapidement.

J'ai fait un schéma pour expliquer un peu mieux le problème:



J'ai donc tous les onglets dans la grande div en vert.
Chaque onglet est une div rouge number1, number2,...

Lorsque je sélectionne un onglet, il faut que celui ci grandisse et se superpose en partie sur les autres onglets de même niveau.
Si j'agrandis seulement la div au moment du clic, cela décale les autres div.
J'insère donc une div bleu à l'intérieur de l'onglet sélectionné et j'essai de faire déborder cette div bleu. (je ne sais pas si c'est le bon procédé).

Le résultat est en fait que la div bleu déborde bien mais en dessous des autres onglets:


J'ai mis un background red à selected_tab et on voit bien le débordement en dessous de Catégorie6.
Le navigateur affiche d'abord les autres onglets et ensuite le débordement.

[johnbenz]

Finalement j'ai trouvé, il faut mettre la div "selected_tab" en position relative

Code :

1
2
3
4
5
6
7
8
9
10
div#tabs_list div div.selected_tab
{
    background-image: url('/images/shared/selectedTab.png');
    background-repeat: no-repeat;
    color: white;
    height: 35px;
    width: 124px;
    position: relative;
}

et voilà le résultat
@ornitho13, merci encore pour ton aide