Discussion :

[Pypiou]

Bonjour,

je souhaite amélioré mon site web minimaliste
qui dispose

d'un système à 4 d'onglets pour accéder à mes feuilles
(Le menu est redessiné dans chaque feuille)




J'ai dessiné les angles gauche et droit des onglets, que j'ai mis dans des mini-images de 10x20

mon soucis c'est que les onglets sans les bords font plus que la hauteur des bords

Quelqu'un saurait comment résoudre ce problème ?

Voici une portion du HTML

Code html :

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
 
<TR height=22>
<TD id=c1 class=fond_gris></TD>
<TD id=c2 class=fond_gris></TD>
<TD id=c3 class=fond_gris></TD>
<TD id=c4 class=fond_gris></TD>
<TD id=c5 class=fond_gris></TD>
<TD id=c6><img class=pipo src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="CV/index.html" class=onglet valign=bottom>CV</A></TD>		
<TD id=c8><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c9><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="prog/progs_v2.html" class=onglet>Programmes</A></TD>
<TD id=c11><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c12><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab><A HREF="liens/index.html" class=onglet>Liens</A></TD>
<TD id=c14><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c15><img src="2bord_sup_gauche.gif" alt=""></TD>
<TD class=normal_tab></TD>
<TD id=c17><img src="2bord_sup_droit.gif" alt=""></TD>
<TD id=c18 class=fond_gris></TD>
<TD id=c19 class=fond_gris></TD>
<TD id=c20 class=fond_gris></TD>
<TD id=c21 class=fond_gris></TD>
<TD id=c22 class=fond_gris></TD>
</TR>

Et mon 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
TABLE#tabcontrol
{
	background-image:	url('wallpaper/bg-d2.gif');
	border-color:		#202020;
}
 
TD#c1		{	width:			10px;	}
TD#c2		{	width:			20px;	}
TD#c3		{	width:			48px;	}
TD#c4		{	width:			30px;	}
TD#c5		{	width:			50px;	}
TD#c6		{	width:			10px;	}
 
TD#c8		{	width:			10px;	}
TD#c9		{	width:			10px;	}
 
TD#c11		{	width:			10px;	}
TD#c12		{	width:			10px;	}
 
TD#c14		{	width:			10px;	}
TD#c15		{	width:			10px;	}
 
TD#c17		{	width:			10px;	}
TD#c18		{	width:			50px;	}
TD#c19		{	width:			30px;	}
TD#c20		{	width:			48px;	}
TD#c21		{	width:			20px;	}
TD#c22		{	width:			10px;	}
 
TD#c1top	{	width:			10px;	}
TD#c22top	{	width:			10px;	}
TD#c1bottom	{	width:			10px;	}
TD#c22bottom	{	width:			10px;	}
 
TD.fond_gris	{
			background: 		#D0D0D0;
		}
 
TD.normal_tab	{
			height:			20px;
			width:			130px;
			font-size:		5pt;
			text-align: 		center;
			color:			#202020;
			background: 		#E0E0E0;
		}
 
TD.active_tab	{
			width:			130px;
			font-size:		8pt;
			text-align: 		center;
			color:			#000000;
		}
 
TD#sheet_hsep	{	height:			12px;	}

Merci

[rodolphebrd]

Bonjour,

Si vous êtes débutant je ne saurais vous conseiller de repenser votre mise en page en tableau. D'autant que plus que votre code est très lourd: (classes sur-abondantes, images pouvant être placées en background, pas d'utilisation de border-radius...)

Pour votre problème mettez un lien vers votre site car en l'état c'est peu simple d'y voir clair.

On dirait qu'il y a une épidémie de mise en forme en tableau actuellement.

[Pypiou]

Merci pour votre réponse,

Voici mon site:
jp.parigny.free.fr

C'est vrai que j'aimerais faire simple et efficace, mais quand on débute ...

si vous avez 2 ou 3 astuces ...

[rodolphebrd]

Je crois que vos images bord sup gauche et droite ne sont pas assez hautes (les passer de 20px à 24px). C'est à dire les retravailler avec un logiciel de retouche d'images.
C'est extrêmement chronophage comme structure et comme démarche.

[Pypiou]

en local ça donne ceci (en passant à 28pixels de haut):



le résultat est bizzare.

Par contre l'attribut border-radius m'a bien arrangé.

[rodolphebrd]

Du coup ce sont vos images qui deviennent trop petites.
C'est le manège incessant de ce genre de mise en page.

Vous pouvez travaillez vos onglets en css avec border-radius et box-shadow.