Mise en forme des tabs jquery via CSS, petite question de newbi

**bastien59960** · 22/07/2015, 21h12

Bon, j'ai repris à part le code de la doc pour essayer de comprendre. Et surtout partir sur une base propre.

Quand j'observe le code source de la page avec firefox ça donne ça :

Voici ce que ça donne sur le premier tab. Ça fonctionne bien, j'arrive à le mettre en forme correctement :

Par contre quand je clique sur le second tab pour charger mon fichier externe avec ajax ça donne ça :

Je plonge donc dans le code source généré de la page via firefox et je vois que mes onglets supplémentaires ont ces classes css-là :

Code css :

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

class="ui-tabs-panel ui-widget-content ui-corner-bottom"

Mais si dans mon fichier ccs j'ajoute :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#ui-tabs-panel {     // j'ai testé #ui-tabs-panel et .ui-tabs-panel
	position: relative;
	z-index: 1;
	clear: both;
	border: 2px solid red;
	border: 2px solid #E0E0E0;
	padding: 10px;
	top: -2px;
	border-radius: 5px;
	background-color : rgba(66,133,244,0.7);
	box-shadow: 3px 3px 1px black;
}

ça ne change rien, mes seconds onglets restent sans la mise en forme.

Je ne comprends pas pourquoi.

Le code complet de ma page de test :

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
 
<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="tabs.css" media="all"/>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Content via Ajax</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul class="mytabs">
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="tab1.php" data-codigo="A1000" data-famille="D3500">Tab 1</a></li>
    <li><a href="tab2.php" data-codigo="B2000" data-famille="E7000">Tab 2</a></li>
    <li><a href="tab3.php" data-codigo="C3000" data-famille="F10500">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div class="mytabs-container" id="tabs-1">
    <p><font size='+2'>Texte par d&eacute;faut &eacute;crit en dur dans le corp de la page</font></p>
  </div>
</div>
 
<BR>
<BR>
<a href="tab2.php" data-codigo="B2000" data-famille="E7000">Tab 2</a>
</body>
</html>

Le css :

Code css :

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
BODY {
	margin: 20px;
	padding: 20px;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
#page {
	margin: auto;
	width: 1000px;
}
UL.mytabs {
	position: relative;
	z-index: 2;
}
UL.mytabs, UL.mytabs LI {
	margin: 0;
	padding: 0;
	list-style: none;
	/*float: left;*/
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
	/*float: left;*/
	padding: 7px;
	border: 1px solid #CCCCCC;
	border-bottom: 2px solid #E0E0E0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	/*background: #F0F0F0;*/
	background-color : rgba(66,133,244,0.7);
	text-decoration: none;
	color: #333333;
	height: 18px;
 
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
	background: #FFFFFF;	
}
UL.mytabs LI.current A {
	font-weight: bold;
	font-size: 14px;
	border-bottom: 2px solid #4087F4;
	background-color : rgba(66,133,244,0.7);
}
#tabs-1 {
	position: relative;
	z-index: 1;
	clear: both;
	border: 2px solid red;
	border: 2px solid #E0E0E0;
	padding: 10px;
	top: -2px;
	border-radius: 5px;
	background-color : rgba(66,133,244,0.7);
	box-shadow: 3px 3px 1px black;
}
#ui-tabs-panel {
	position: relative;
	z-index: 1;
	clear: both;
	border: 2px solid red;
	border: 2px solid #E0E0E0;
	padding: 10px;
	top: -2px;
	border-radius: 5px;
	background-color : rgba(66,133,244,0.7);
	box-shadow: 3px 3px 1px black;
}