[Résolu]Espace occupé par un couple <div></div> vide

Coucou,
Alors voilà je génère dynamiquement (php) une "ligne" composée de 4 couples <div></div>.
Les deux premiers couples contiennent du texte et les deux derniers une image.

Le problème vient du fait que le troisieme couple peut etre vide, c'est dire que l'image attendue peut ne pas être présente. Dans ce cas, j'aimerais gardé l'alignement vertical c'est à dire que la "pseudo" quatrieme colonne ne subisent pas de décalage là ou l'image n'apparait pas.
Pour cela, j'ai appliqué un width fixe mais cela ne fonctionne que sous IE7.
Sous firefox et opera, j'ai ce décalage. J'aimerais donc ne plus avoir ce décalage.

J'ai fait quelques tentatives mais vaines.
Aussi, je vous sollicite pour des conseils voire une solution

Voila, Merci d'avance ^_^
Modifié par zempa (14 Mar 2007 - 17:47)

Coucou ?

Boah pourquoi pas....

As tu un exemple en ligne ?

Salut,

Est-ce qu'on pourrait avoir plus de détails sur ce que tu veux réaliser, dans l'ensemble ?

J'ai l'impression que tu es en train d'essayer de reconstruire un tableau en remplaçant les cellules par des divs

a écrit :
J'ai l'impression que tu es en train d'essayer de reconstruire un tableau en remplaçant les cellules par des divs decu

C'est vrai que ca revient à un tableau... désolé

voici un bout de code

<div class="b_gauche_article_texte_ligne">
		<div class="b_gauche_article_texte_ligne_date">
			<?php echo $donnees['titre'][$i];?> :
		</div>
		<div class="b_gauche_article_texte_ligne_descriptif">
			<p>
				<?php echo $donnees['resume'][$i];?>
			</p>
		</div>
		<div class="b_gauche_article_texte_ligne_photo">
			<?php if($donnees['image'][$i]!=""){?><img src="../commun/images/<?php echo $donnees['image'][$i];?>" /><?php }?>
		</div>
		<div class="b_gauche_article_texte_ligne_lien">
			<a title="<?php echo $donnees['titre'][$i];?>" href="page.php?pag_id=<?php echo $donnees['pag_id'][$i];?>"><img src="../commun/images/fleche6.gif" /></a>
		</div>
	</div>

=> donc c'est le "$donnees['image'][$i]" qui n'est pas censée exister auquel cas on n'affiche rien... mais j'aimerais pour autant qu'il n'y ait pas de décalage, c'est à dire que le div "b_gauche_article_texte_ligne_lien" ne se retrouve pas dans la meme colonne que les images des autres lignes.

Alors je sais pas trop si il vaut mieux passer par un tableau?
Dans mon cas, je crois que c'est justifié étant donné qu'il s'agit de plusierus lignes à générer et non d'une mise en page à proprement parler

Merci d'avance.
Modifié par zempa (13 Mar 2007 - 18:58)

Je poserais une question .....peut etre La question !!!!

Quelle est la nature des informations que tu veux présenter ?

Si tu génère dynamiquement des lignes contenant par exemple tes photos et leur legendes ( a ce que je comprend du code ) , l'utilisation du tableau n'est pas un problème !

Il faut utiliser les tableaux ...quand on a des choses qui normalement vont en tableaux .....

Ce qui est a proscrire c'est d'utiliser les tableaux pour faire un rendu graphique de son site en jouant sur les proprietes des cellules car toute la semantique de ta page est perdue....

Exact RoseGrenouille, c'est une disposition en tableau d'information (photo et texte) et non une mise en page.
Je crois que tout est dit.
Je vais faire les modif en tableau.

Merci ^_^

ps: juste pour le geste, si quelqu'un a la solution, il est le bienvenue.

Ben les cellulles du tableau....tu peux spécifier les tailles non ?

Peut importe ce qu'il y a dedans.....

Re,

RoseGrenouille a écrit :
Il faut utiliser les tableaux ...quand on a des choses qui normalement vont en tableaux ...

+1. Cependant, je ne trouve pas évident que les données présentées ici soient de type "tabulaire". Le propre d'un tableau, c'est d'être lu à partir de ses 2 dimensions : on part d'un ligne ET d'une colonne, pour arriver à l'information que l'on cherche, à l'intersection des 2.

Une image accompagnée d'un texte, ça ne marche pas comme ça. On aura plutôt tendance à parcourir ligne par ligne, plutôt comme du texte normal ...

Bref, un schéma vaut mieux qu'un long discours J'ai encore du mal à saisir pourquoi il y a 4 divisions s'il n'y a qu'un texte et (éventuellement) une image à afficher sur une ligne ...
Modifié par Thomas D. (13 Mar 2007 - 20:06)

Et bien thomas ça c'est l'affichage du contenu qui est organisé comme cela.
Il y a :
- un titre
- un résumé
- une image (éventuellement)
- une autre image qui joue le rôle de lien vers l'article entier

Maintenant, il est vrai que les tableaux sont à éviter dans la mesure du possible, pour des raisons de clarté et de cohérence du code. Mais dans mon cas le fait de passer par un tableau me semble malgré tout justifié.
Un tableau n'est pas forcément à double entrée: dans ce cas on a affaire à une liste (ce qui est mon cas). Alors je pourrais passer par une liste, or je me retrouverai inévitablement dans le meme problème à savoir un décalage des lignes qui n'ont pas d'image. C'est pour cela que l'utilisation d'un tableau me parait etre la solution la plus adéquate.

... après je ne dis pas qu'il n'y a pas d'autres solutions, mais je ne les vois pas

Salut,

a écrit :
Un tableau n'est pas forcément à double entrée: dans ce cas on a affaire à une liste

C'est bien ce que je dis : un tableau doit être à double entrée, sinon ce n'est pas un tableau mais une liste

a écrit :
... après je ne dis pas qu'il n'y a pas d'autres solutions, mais je ne les vois pas

Il y en a certainement, mais il nous faut plus de détails : largeur fixe ou fluide, taille des images connue ou non, etc ... Et un schéma ou un exemple en ligne serait le bienvenu

un petit schéma de ce que je voudrais (en fait que j'ai via un tableau):

titre1    résumé1   image1  imagelien1
titre2    résumé2           imagelien2
titre3    résumé3   image3  imagelien3
titre4    résumé4   image4  imagelien4

=> tout est bien aligné verticalement principalement à la ligne 2 ou l'image2 n'existe pas

et le résultat que j'obtiens avec des div (sauf dans IE7 qui ne me crée pas de décalage):

titre1    résumé1   image1  imagelien1
titre2    résumé2   imagelien2            
titre3    résumé3   image3  imagelien3
titre4    résumé4   image4  imagelien4

=>j'ai bien un décalage notamment à la ligne 2 car image2 n'existe pas.

A noter que la taille de l'ensemble qui est contenu dans un div est fixée de meme que la largeur de chaque cellule.

ps: ca ressemble quand meme à un tableau et non à une liste
Modifié par zempa (14 Mar 2007 - 12:43)

Thomas D. a écrit :
Salut,

C'est bien ce que je dis : un tableau doit être à double entrée, sinon ce n'est pas un tableau mais une liste

+1 : j'appuie cette idée là ....

Au vu des éléments que tu nous a donné , ca ressemble bien a une liste <ul> , quitte à diviser chaque <li> en plusieurs blocs.

En fait je pense que l'idée sous-jacente la-dedans, c'est de savoir comment on ferait dans la vrai vie sur papier pour faire ca.....et à mon sens on ferait une liste car effectivement le propre d'un tableau est d'avoir une seule valeur possible a l'intersection d'une colonne et d'une ligne.

Je ne sais pas trop comment est restitué vocalement un tableau par un lecteur d'écran mais je suis sûr d'une chose, c'est que le format de la liste se pretera mieux à cet exercice ou il sera lu comme une énumération d'éléments , et en mettant ca en mots avec un peu d'imagination, ca donnerait:

Ceci est une liste d'éléments

1er élément

Image d'un arbre | cette photo a été prise en chine en juin dernier | Photo | cliquez pour en savoir plus sur cette photo;

2ème élément

Image d'un chien | cette photo a été prise en argentine en mai dernier | Photo | cliquez pour en savoir plus sur cette photo;


Alors qu'un tableau ( et c'est ca la grosse différence ) doit restituer le même type de valeur soit par ligne soit par colonne !

Exemple de la lecture du code par un lecteur d'écran toujours avec un peu d'imagination

Ceci est un tableau

il parle des temperatures dans le monde chaque mois de l'année ( <legend> !!)
1ere ligne : janvier

paris : -2 | rio : +30 | quebec : -35

2eme ligne : fevrier

Paris:+4 | rio : +25 | quebec : +40 ( on peu rever un peu hein ...)

<fin du tableau>

Tu vois tes éléments parlent de la même chose : la température

Là le tableau se justifie !
Modifié par RoseGrenouille (14 Mar 2007 - 13:31)

C'est vrai!

Mais pour avoir plusieurs cellules sur une meme ligne ou je passe par des <li> (en jouant sur les display:block/inline) ou par des <div> et là je retombe dans le cas initial


ps: je sais que je vais me faire taper dessus mais avec le tableau c'est plus simple

Re,

à partir du moment où c'est en largeur fixe & où tu connais les tailles des différentes "cellules", tu dois pouvoir t'en sortir avec des flottants :

<ul>
<li><h3>Titre</h3><p>Résumé</p><img class="img1" src="..." alt="..." /><img class="img2" src="..." alt="..." /></li>

li {
   overflow: auto; /* pour englober les flottants dans le calcul de la hauteur */
}
li h3 {
   float: left;
   width: XXXpx;
}
li p {
   float: left;
   width: XXXpx;
}
li .img1 {
   float: left;
   width: XXXpx;
}
li .img2 {
   flaot: right;
   width: XXXpx;
}

Correction pour IE 6 (à appliquer via commentaires conditionnels) pour le contexte de formatage sur les <li> :

li {
   overflow: visible;
   height: 1px;
}

C'est pondu en direct, j'ai pas testé, mais c'est dans cette direction-là que je chercherais

Ok merci thomas.
Pour le moment, je suis sur autre chose (etant donné que le tableau a réglé provisoirement le probleme ) des que j'ai le temps j'applique ta méthode via les li.

En tout cas merci beaucoup à tous!!

Peut-on alors dire que le sujet est [résolu] ?

a écrit :

5- Editer les messages, marquer comme [Résolu]
Vous pouvez éditer vos messages à tout moment. Vous n'avez qu'à vous rendre sur le sujet où se trouve le message que vous voulez éditer et vous apercevrez une icône d'édition sur la ligne d'en-tête.
Cliquez sur cette icône éditer et éditez votre message. Personne d'autre ne peut modifier vos messages sauf le modérateur du groupe ou l'administrateur du forum de discussion.
Une note est généralement inscrite au bas de tous les messages qui ont été édités de sorte à ce que tous puissent voir par qui et quand a été édité ce message. Attention : vous ne pouvez pas supprimer vos propres messages, seul un modérateur en a le pouvoir.
Nous vous invitons à ajouter un tag [Résolu] lorsque la réponse à votre problème a été trouvée, cela facilitera les recherches futures. Pour cela : allez sur votre premier message (celui qui débute le sujet), puis cliquez sur le bouton "éditer", en haut à droite du post, celui à côté du bouton "citer" et pour finir, modifiez le titre du sujet en ajoutant [Résolu]