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