Discussion :

[Ricou13]

Bonjour,

J'essaie de faire une mise en page d'une barre de navigation simple (<- titre ->) pour faire défiler des photos, en utilisant display:table.
Voici le code :

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
CSS :
 
#navphoto {
	display: table;
	border: 1px solid green;
	width: 400px;
	}
#Fmoins, #Fplus {
	display: table-cell;
	cursor: pointer;
	border: 1px dotted red;
	width: 20%;
	text-align: center;
	}
#texte {
	display: table-cell;
	cursor: pointer;
	text-align: center;
	}
 
HTML :
 
<div id="navphoto">
	<div id="Fmoins"><img src="fleche-gauche.gif" alt="Photo précédente" title="Photo précédente" onclick="PhotoMove(-1);" width="17" height="17" border="0" align="absmiddle"></div>
	<strong id="texte">Autres photos</strong>
	<div id="Fplus"><img src="fleche-droite.gif" alt="Photo suivante" title="Photo suivante" onclick="PhotoMove(1);" width="17" height="17" border="0" align="absmiddle"></div>
</div>

L'affichage est bon sous FF : les cellules sont bien les unes à coté des autres.
Sous IE par contre, les cellules sont les unes au dessus des autres

C'est la première fois que j'utilise cette technique, alors j'ai peut-être oublié quelque chose.

Merci[/img]

[ilood]

Salut,

Etant donné que ie ne supporte pas bien la propriété css display cela risque d'etre difficile.

Peut-être qu'en essayant d'appliquer à float: left et float: right pour ie et de l'annuler pour les autres navigateurs

Du genre :

Code :

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

1
2
3
4
5
6
 
#Fmoins {float: left; }
#Fplus {float: right; }
 
html>body #Fmoins {float: none }
html>body #Fplus {float: none }

[giminik]

enfin, à ce moment là autant faire du float pour tous, c'est plus facile à mettre en place. le display table n'est pas approprié dans ce cas là (sémantiquement parlant) puisqu'il ne s'agit pas à priori de données tabulaires... l'idéal serait d'utiliser soit float, soit display:inline...

[Ricou13]

Ok, j'ai refait une version en div qui marche bien quant à la présentation :

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
CSS :
 
#navphoto {
	border: 1px solid green;
	width: 300px;
	}
#Fmoins, #Fplus {
	float: left;
	cursor: pointer;
	width: 18%;
	text-align: center;
	border: 1px dotted red;
	}
#Fmoins img {
/*	display: none;*/
	}
#texte {
	float: left;
	text-align: center;
	width: 60%;
	border: 1px dotted blue;
	}
 
HTML :
 
<div id="navphoto">
	<div id="Fmoins"><img src="fleche-gauche.gif" alt="Photo précédente" title="Photo précédente" onclick="PhotoMove(-1);" width="17" height="17" border="0" align="absmiddle"></div>
	<div id="texte">Autres photos</div>
	<div id="Fplus"><img src="fleche-droite.gif" alt="Photo suivante" title="Photo suivante" onclick="PhotoMove(1);" width="17" height="17" border="0" align="absmiddle"></div>
</div>

Mais maintenant, j'ai un problème d'affichage. Les flèches n'aparaissent que s'il y a des photos à faire défiler. Donc, au début, la flèche vers la gauche ne doit pas être visible.
J'ai donc ajouter une ligne dans les CSS permettant de masquer l'image (celle en commentaire). Je cache l'image et non le div pour ne pas détruire la mise en page.
Pourtant, s'il n'y a pas de bordure sur le div, sa taille est réduite à 0 si je masque l'image.
Pour essayer, enlevez les bordures, regardez le résultat et enlever les commentaires => tout est décalé vers la gauche alors que seule l'image est sensée disparaitre, pas le div.
:

[Ricou13]

le display table n'est pas approprié dans ce cas là (sémantiquement parlant) puisqu'il ne s'agit pas à priori de données tabulaires...

Dans ce cas, quelle est l'utilité du display:float puisque, pour afficher des données tabulaires, le plus logique et le plus simple est d'utiliser les balises <table> ?

[giminik]

pour afficher des données tabulaires, le plus logique et le plus simple est d'utiliser les balises <table> ?

certes.
mais dans ton cas, il ne s'agit pas de données tabulaires...
et comme cette propriété n'est malheureusement pas prise en compte, (tu fais comme tu veux) autant utiliser float qui je le rappelle est utilisée pour rendre des blocs flottants.

[Ricou13]

mais dans ton cas, il ne s'agit pas de données tabulaires...
et comme cette propriété n'est malheureusement pas prise en compte, (tu fais comme tu veux) autant utiliser float qui je le rappelle est utilisée pour rendre des blocs flottants.

On est d'accord. J'ai laissé tombé les display:table.
c'était juste une question pour savoir dans quels cas on peut utiliser ces règles css. :-)

Mon pb, maintenant, se limite à pouvoir faire disparaitre la flèche de gauche sans tout décaler.

[Ricou13]

J'ai une piste interessante :

Au lieu de jouer sur un

Code :

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

display: none;

je vais utiliser

Code :

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

visibility: hidden;

qui masque le div sans "l'enlever" du flux. Ainsi son emplacement reste tel quel.

Cependant, je sais qu'en Javascript, il faut mettre hidden ou hide selon le navigateur. En est-il de même pour le CSS ?
Dans la doc, on en parle pas.

[giminik]

ben c'est bien hidden.
en javascript tu accèdes à cette propriété comme ceci :

Code :

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

document.getElementById('idDeLaBalise').style.visibility='hidden';

ou

Code :

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

document.getElementById('idDeLaBalise').style.visibility='visible';

en css c'est pareil :

Code :

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

visibility:hidden;

ou

Code :

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

visibility:visible;

[Ricou13]

C'est super.

Problème résolu.

Merci