Discussion :

[Swoosh67]

Voilà, j'ai un peu transformé le style d'une application.

Pour faire simple, les onglets qui permettaientt de passer d'un affichage à l'autre n'étaient que des cellules d'un tableau avec un lien hypertexte, rien de très joli quoi.

J'ai donc changé les liens texte par des images qui ont l'apparence d'onglet de manière à rendre ca un peu plus joli, le problèmes c'est que il reste un peu d'espace vide en dessous des images dans les cellules et je n'arrive pas à l'enlever !

Cet espace apparait sous firefox mais pas sous IE... je vous ai mis un screenshot du problème en utilisant un outil sous firefox pour mettre en couleur les bordures des cellules. On voit bien qu'il y a un espace vide en dessous des images mais d'où cela vient ?

J'ai regardé dans le CSS mais aucune balise de style ne fait rien, j'ai virer toutes les border et autres choses qui auraient pu interférer mais ca ne change rien. J'ai même enlever le lien de la feuille CSS et ca le fait toujours ! Je comprend pas...

Certainement un attributs par défaut que je doit rajouter mais je ne sais pas lequel, j'ai cherché sur le forum mais j'ai pas trouvé.

Merci de votre aide !

[chillansky]

Pour l'espace en dessous de tableau je ne sais pas.

Par contre je peux te proposer une solution qui utilise les CSS et plus les tableaux.

Voici le code sources pour exemple:

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
ul#tabnav {
	font : bold 11px verdana, arial, sans-serif;
	list-style-type : none;
	padding-bottom : 24px;
	border-bottom : 1px solid #6c6;
	margin : 0;
}
 
ul#tabnav li {
	float : left;
	height : 21px;
	/*background-color : #cfc;*/
	background-color: lightcyan  ;
	color: #000;
	margin : 2px 2px 0;
	border : 1px solid #6c6;
	padding : 4px;
}
 
ul#tabnav li.active {
	border-bottom : 1px solid #fff;
	background-color : #fff;
	color: #000
}
 
ul#tabnav li.active a {
	color : #000;
	background-color: #fff;
}
 
#tabnav a {
	float : left;
	display : block;
	color : #666;
	background-color: #fff;
	text-decoration : none;
}
 
#tabnav a:hover {
	background : #fff;
	color: #000;
}

Et en exemple html

Code :

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

1
2
3
4
5
6
7
 
<ul id="tabnav">
<li class="active"><href src="">1: </a></li>
<li>2: </li>
<li>3: >li>
<li>4: </li>
</ul>

[Swoosh67]

Merci de ton conseil mais je crois que je viens de trouver quelque chose d'intéressant.

J'ai sortit les images du tableau de maniere a ce qu'elle se colle les unes après les autres et qu'elles touchent le tableau du dessous.

Mais ô surprise cela ne marche pas, et même plus intéressant, j'ai maintenant une marge a gauche et a droite de chaque image.

A votre avis, il y a des mauvais paramètres dans le CSS ou alors des paramètres à ajouter ? J'ai comme l'impression davoir une marge gauche et bas sur chaque image.


Merci !

[<romain/>]

essaie ca :

Code :

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

1
2
3
 
padding:0px;
margin:0px;

Mais les tableaux c'est vraiment pas l'idéal...Tu as vu le temps que tu perd a utiliser des tableaux?

Alors qu'en css ca se fait très vite et très bien



ps : comme toujours, un bout de code ca aide bcp...

[Swoosh67]

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
if(($_SESSION['config']['user_saisie_demande']==TRUE)||($_SESSION['config']['user_saisie_mission']==TRUE))
		{
			if($onglet!="nouvelle_absence")
				echo "<a href=\"$PHP_SELF?session=$session&onglet=nouvelle_absence\" class=\"onglet\"><img src=\"../skins/TG/onglet_nouvelle_absence_normal.gif\" title=\"Nouvelle absence\" alt=\"Nouvelle absence\"></a>\n";
			else
				echo "<a href=\"$PHP_SELF?session=$session&onglet=nouvelle_absence\" class=\"onglet\"><img src=\"../skins/TG/onglet_nouvelle_absence_selected.gif\" title=\"Nouvelle absence\" alt=\"Nouvelle absence\"></a>\n";
			$nb_colonnes=$nb_colonnes+1;
		}
		if($_SESSION['config']['user_echange_rtt']==TRUE)
		{
			if($onglet!="echange_jour_absence")
				echo "<a href=\"$PHP_SELF?session=$session&onglet=echange_jour_absence\"><img src=\"../skins/TG/onglet_echange_normal.gif\" title=\"Echange jour absence\" alt=\"Echange jour absence\"></a>\n";
			else
				echo "<a href=\"$PHP_SELF?session=$session&onglet=echange_jour_absence\"><img src=\"../skins/TG/onglet_echange_selected.gif\" title=\"Echange jour absence\" alt=\"Echange jour absence\"></a>\n";
			$nb_colonnes=$nb_colonnes+1;
		}
		if($_SESSION['config']['user_saisie_demande']==TRUE)
		{
			if($onglet!="demandes_en_cours")
				echo "<a href=\"$PHP_SELF?session=$session&onglet=demandes_en_cours\"><img src=\"../skins/TG/onglet_demande_en_cours_normal.gif\" title=\"Demande en cours\" alt=\"Demande en cours\"></a>\n";
			else
				echo "<a href=\"$PHP_SELF?session=$session&onglet=demandes_en_cours\"><img src=\"../skins/TG/onglet_demande_en_cours_selected.gif\" title=\"Demande en cours\" alt=\"Demande en cours\"></a>\n";
			$nb_colonnes=$nb_colonnes+1;
		}
		if($_SESSION['config']['rtt_comme_conges']==TRUE)
			{$taille_onglet=200; $text_onglet_histo_conges=" Historique des congés/RTT ";}
		else
			{$taille_onglet=170; $text_onglet_histo_conges=" Historique des congés ";}
		if($onglet!="historique_conges")
			echo "<a href=\"$PHP_SELF?session=$session&onglet=historique_conges\"><img src=\"../skins/TG/onglet_historique_normal.gif\" title=\"Historique congés/RTT\" alt=\"Historique congés/RTT\"></a>\n";
		else
			echo "<a href=\"$PHP_SELF?session=$session&onglet=historique_conges\"><img src=\"../skins/TG/onglet_historique_selected.gif\" title=\"Historique congés/RTT\" alt=\"Historique congés/RTT\"></a>\n";
 
		if($onglet!="historique_autres_absences")
			echo "<a href=\"$PHP_SELF?session=$session&onglet=historique_autres_absences\"><img src=\"../skins/TG/onglet_autres_absences_normal.gif\" title=\"Historique autres absences\" alt=\"Historique autres absences\"></a>\n";
		else
			echo "<a href=\"$PHP_SELF?session=$session&onglet=historique_autres_absences\"><img src=\"../skins/TG/onglet_autres_absences_selected.gif\" title=\"Historiques autres absences\" alt=\"Historique autres absences\"></a>\n";
 
		if(($_SESSION['config']['auth']==TRUE) && ($_SESSION['config']['user_ch_passwd']==TRUE) && ($_SESSION['config']['how_to_connect_user'] != "ldap" || ($_SESSION['userlogin'] == "conges" || $_SESSION['userlogin'] == "admin") ))
		{
			if($onglet!="changer_mot_de_passe")
				echo "<a href=\"$PHP_SELF?session=$session&onglet=changer_mot_de_passe\"><img src=\"../skins/TG/onglet_mot_de_passe_normal.gif\" title=\"Changer mot de passe\" alt=\"Changer mot de passe\"></a>\n";
			else
				echo "<a href=\"$PHP_SELF?session=$session&onglet=changer_mot_de_passe\"><img src=\"../skins/TG/onglet_mot_de_passe_selected.gif\" title=\"Changer mot de passe\" alt=\"Changer mot de passe\"></a>\n";
			$nb_colonnes=$nb_colonnes+1;
		}

Ca c'est le code. Sinon ca ne change rien ce que tu m'a donné...
Et pour l'exemple de code, tu utilise des listes et non des tableaux. Par contre si t'as un exemple de ce que je veux faire en css je veux bien

[chillansky]

Justement, la soluation que je te propose te créera de magnifiques onglets (c.f. pièce jointe)