Menu avec background overflow

Version imprimable

07/11/2011, 12h39
johnbenz

Menu avec background overflow
Bonjour je souhaite réaliser le menu d'onglets suivant.

http://img4.hostingpics.net/pics/659714exemple03.jpg

Pour celà j'utilise
Code:

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:

1 2 3 4 div.tab { overflow:visible; }
mais ça déborde en dessous.

Des idées?
Merci
John
07/11/2011, 14h00
ornitho13

Salut,

pourrais tu mettre ton code CSS ?

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
http://img4.hostingpics.net/pics/139212capture.png
On voit bien que le design photoshop en prend un coup

Merci

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 ?

07/11/2011, 17h57
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:

http://img4.hostingpics.net/pics/374452schema.jpg

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:
http://img4.hostingpics.net/pics/199296debordement.png

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.

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
http://img11.hostingpics.net/pics/418080success.png