problème avec les menus

**samsso2006** · 20/12/2006, 18h29

salut à tous.
J'espère etre sur le bon forum.
je developpe un site actuellement et j'ai conçu une page avec une navigation par onglets. je voudrais changer le style de mes onglets mais j'y arrive pas. j'ai le code CSS du nouveau style mais j'arrive pas à l'adapter.

je vous fournis le code de ma page originale et le code du nouveau menu que veux adapter à mes onglets. Vous ferez des cpier-coller afin de voir leur comportement:

LE CODE DE MA PAGE

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
 
    <title>monsite</title>
 
 
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
 
<style type="text/css">
   form
   {
    margin:0 0 0 0;
    padding:0 0 0 0;
   }
   .Onglet
   {
    width:400px;
   }
   .currentOnglet
   {
    display:block;
    text-decoration:none;
    border-color:#0F0000;
    border-style:solid;
    border-width:1px 1px 0 1px;
    color:#333333;
   }
   .normalOnglet
   {
    display:block;
    text-decoration:none;
    color:#ffffff;
   background-color:#e53921;
 
   }
   .formOnglet
   {
    border:solid gray;
    border-width:0 1px 1px 1px;
    width:400px;
   }
   .tab1
   {
    background:#FFF;
   }
   .tab2
   {
    background:#FFF;
   }
   .tab3
   {
    background:#FFF;
   }
   .tab4
   {
    background:#FFF;
   }
 
   #LinkNav a{
text-decoration:none;
font-weight:bold;
font-size:10px;
padding:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#LinkNav a:hover{
text-decoration:underline;
}
 
  </style>
 
   <script type="text/javascript">
   lastOnglet = '';
   currentOnglet = '';
 
   function setOnglet(id,newOnglet)
   {
    lastOnglet.className = 'normalOnglet';
    document.getElementById('formOnglet').innerHTML = document.getElementById(id).innerHTML;
    document.getElementById('formOnglet').className = 'formOnglet '+id;
    newOnglet.className='currentOnglet';
    lastOnglet = newOnglet;
   }
  </script>
  </head>
  <body onload="setOnglet('tab1',document.getElementById('defaultOnglet'));">
 
       <!--le contenu--->  
 
           <div id="loginOnglet" class="OngletLog" style="width:400px; ">
             <table cellpadding="0" cellspacing="0" class="Onglet">
               <tr>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a id='defaultOnglet' href="#" onclick="setOnglet('tab1',this);return false;" class="normalOnglet">Presentation</a> </div></td>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab2',this);return false;" class="normalOnglet">Fiche technique </a> </div></td>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab3',this);return false;" class="normalOnglet">Gal&eacute;rie photos </a> </div></td>
                 <td width="100">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab4',this);return false;" class="normalOnglet">Accessoires</a> </div></td>
               </tr>
             </table>
             <div id='formOnglet'></div>
           </div>
           <div style="display:none;">
             <div id="tab1"><h1>BONNE JOURNEE</h1></div>
             <div id="tab2"> <H1>A TOUS LES MEMBRES</H1> </div>
             <div id="tab3"> <H1>DU FORUM</H1> </div>
             <div id="tab4"> <H1>ET MERCI POUR VOTRE AIDE</H1> </div>
         </div>
 
  </body>
</html>

le code CSS du nouveau design que je veux adapter pour mes 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
 
<html>
    <head>
        <title>Sliding Doors Preview</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        <style type="text/css">
BODY {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
    FONT-SIZE: small
}
#header {
    FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 10px; LIST-STYLE-TYPE: none
}
#header LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 9px; BACKGROUND: url(left.gif) no-repeat left top; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#header A {
    PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #932B14; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
    FLOAT: none
}
#header A:hover {
    COLOR: #333
}
#header #current {
    BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
    BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
  </style>
 
    </head>
 
    <body>
        <div id="header">
            <ul>
 
 
               <li><a href="Home.html">Home</a></li>
               <li id="current"><a href="Products.html">onglet actif</a></li><!-- l'onglet actif -->
               <li><a href="Services.html">Services</a></li>
               <li><a href="Support.html">Support</a></li>
 
            </ul>
        </div>
    </body>
</html>

je vous fournis les images qui rentrent dans la conception du menu:

*EDIT*
Le site avec les images ne fonctionne pas et fais tourner en rond la page, place tes images en pièces jointes.

Merci pour votre precieuse contribution

**dorotha** · 22/12/2006, 10h21

Si j'ai bien comprie c'est ne pas tan dificil pour le faire.
Mais il faut tirer javascript de ton projet pour css et c'est tous.

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
 
    <title>monsite</title>
 
 
 
<style type="text/css">
   form
   {
    margin:0 0 0 0;
    padding:0 0 0 0;
   }
   .Onglet
   {
    width:400px;
   }
   .currentOnglet
   {
    display:block;
    text-decoration:none;
    border-color:#0F0000;
    border-style:solid;
    border-width:1px 1px 0 1px;
    color:#333333;
   }
   .normalOnglet
   {
    display:block;
    text-decoration:none;
    color:#ffffff;
   background-color:#e53921;
 
   }
   .formOnglet
   {
    border:solid gray;
    border-width:0 1px 1px 1px;
    width:400px;
   }
   .tab1
   {
    background:#FFF;
   }
   .tab2
   {
    background:#FFF;
   }
   .tab3
   {
    background:#FFF;
   }
   .tab4
   {
    background:#FFF;
   }
 
   #LinkNav a{
text-decoration:none;
font-weight:bold;
font-size:10px;
padding:2px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#LinkNav a:hover{
text-decoration:underline;
}
 
  </style>
 
 
  </head>
  <body onload="setOnglet('tab1',document.getElementById('defaultOnglet'));">
 
       <!--le contenu--->  
 
           <div id="loginOnglet" class="OngletLog" style="width:400px; ">
             <table cellpadding="0" cellspacing="0" class="Onglet">
               <tr>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a id='defaultOnglet' href="#" onclick="setOnglet('tab1',this);return false;" class="normalOnglet">Presentation</a> </div></td>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab2',this);return false;" class="normalOnglet">Fiche technique </a> </div></td>
                 <td width="100" style="padding-right:3px; ">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab3',this);return false;" class="normalOnglet">Gal&eacute;rie photos </a> </div></td>
                 <td width="100">
                  <div id="LinkNav"> <a href="#" onclick="setOnglet('tab4',this);return false;" class="normalOnglet">Accessoires</a> </div></td>
               </tr>
             </table>
             <div id='formOnglet'></div>
           </div>
           <div style="display:none;">
             <div id="tab1"><h1>BONNE JOURNEE</h1></div>
             <div id="tab2"> <H1>A TOUS LES MEMBRES</H1> </div>
             <div id="tab3"> <H1>DU FORUM</H1> </div>
             <div id="tab4"> <H1>ET MERCI POUR VOTRE AIDE</H1> </div>
         </div>
 
  </body>
</html>

problème avec les menus

CSS

Discussions similaires

Partager

Partager