5568 sujets

Sémantique web et HTML

(encore un ti pb :p)Confusion entre les TR/TD et les LI pour un ...

Bonsoir à tous.

Jusqu'a présent, j'utilisais un tableau HTML simple pour affiché ma gallerie d'image. Qui se compose ainsi :

img1 | img2 | img3
img4 | img5 | img6
img7 | img8 | img9

Le code correspondant :

<table> //Je vous epargne les options
 <tr>
  <td>
  img1
  </td>
  <td>
  img2
  </td>
  <td>
  img3
  </td>
 </tr>
 <tr>
  <td>
  img4
  </td>
  <td>
  img5
  </td>
  <td>
  img6
  </td>
 </tr>
 <tr>
  <td>
  img7
  </td>
  <td>
  img8
  </td>
  <td>
  img9
  </td>
 </tr>
</table>


Autemps dire que c'est "lourd". J'aimerais afficher ce meme résultat avec UL, et LI, j'arrive sans probleme a faire les tableau du style

<ul>
 <li>
 img1
 </li>
 <li>
 img2
 </li>
 <li>
 img3
 </li>
</ul>

Petit bémol, cela s'affiche l'un en dessous l'autre, d'apres ce que je vois, un UL = TABLE, et un LI = TR/TD (?)

Je n'arrive pas a obtenir le meme resultat que sous ma forme TABLE HTML pure que j'ai employé avant. Je vous remercie.
Modifié par Okin (24 Jul 2005 - 12:48)
Il y'a plusieurs solutions grâce à CSS :

li
{
     display:inline;
}


ou (ce qui me semble plus adapté à ton cas)

li
{
     float:left;
     width:33%;
}
Salut,

N'essaye pas de faire d'associations entre les balises tableaux et les autres : il n'y en a pas.
Je m'explique : si tu veux passer à une conception css, tu dois essayer de penser d'abord ta page d'un point de vue purement sémantique, en ignorant volontairement l'aspect présentation.
En l'occurence, tes données sont bien une liste non ordonnée (ul) d'images, les images étant par conséquent les éléments (li) de la liste; tu devrais donc te retrouver avec une seule liste contenant toutes tes images enchaînées, une par li.

Le fait que tes li soient les uns en dessous des autres est normal, car ce sont des éléments de type bloc. Tu trouveras plus d'infos à ce sujet dans les tutos, ainsi que sur la propriété float, qui te sera ici d'un grand secours.

[EDIT]Grillé sur le fil Smiley murf [/EDIT]
Modifié par Marvin Le Rouge (24 Jul 2005 - 00:26)
toutes mes excuse. Smiley lol

Edit :

MERCIIIIIIIIIII BCP A VOUS TOUS, CA MARCHE DU TONNER, NON DE DIOU ;D
Modifié par Okin (24 Jul 2005 - 12:07)
Encore un légé petit bémol. Mais grace à vous j'ai déja avancé beaucoup.

http://okin-fr.net/g.jpg

Voyez vous le cadre en bas, en rouge, avec "//Affichage par page//".

Il n'est pas comme je voudrais.

J'aimerais qu'il apparaisse en dessous de l'image, comme le cadre du haut.

Apparament, c'est a cause du float:left dans le dernier LI (généré par un boucle MySQL), voici le code généré :


<ul style="list-style:none;border:1px solid red;">
<li>// Affichage par page // </li>
</ul>

<ul style="list-style:none;border:1px solid #000000;">
<li style="width:190px;float:left;"><img src=""></li>
<li style="width:190px;float:left;"><img src=""></li>
<li style="width:190px;"><img src=""></li>
<li style="width:190px;float:left;"><img src=""></li>
<li style="width:190px;float:left;"><img src=""></li>
<li style="width:190px;"><img src=""></li>
<li style="width:190px;float:left;"><img src=""></li>
</ul>

<ul style="list-style:none;border:1px solid red;">
<li>// Affichage par page // </li>
</ul>


Avec MySQL, je ne met que du float sur les 2 premiere image, comme ca, la 3eme n'ayant pas d'attribu, le prochain LI créér une nouvelle ligne. Cependant, comment, dans le dernier UL du bas, avec "Affichage par page" inséré une proprieté dans ce tableau lui forcant a revenir a la ligne, donc etre en dessous. J'ai cru que le fait de fermé le tableau UL ou se trouvait le float allait réglé le probleme. Mais non...

Ps: j'ai essayé dans le UL en bas : float:none, mais ca ne change rien Smiley biggol

Merci
Modifié par Okin (24 Jul 2005 - 12:49)
Encore moi, c'est mon dernier probleme, apres j'ai tout en main pour pouvoir faire le reste. J'ai modifier ma boucle SQL pour faire apparaitre le titre des image au dessus de celle ci, j'ai donc rajouté un LI :

<li>titre photo</li>
<li style="float:left;">img1</li>

Pareil pour les autres.

Seulement, voici ce que j'obtient :

http://okin-fr.net/p.jpg

Comment faire pour qu'il soit tous a la meme hauteur ?

J'ai regardé du coté position, absolute me met tout à gauche. J'ai essayé avec des vertical-align et des padding, mais pfiouuuuu je pige pas Smiley ohwell

merci:$
Modifié par Okin (24 Jul 2005 - 13:28)
Ton image et son titre ne sont pas 2 éléments de liste, c'est le couple qui consitute un élément de la liste.
Regarde bien ta structure : tu as une liste d'élements, dont chacun est constitué d'un titre ET d'une image correspondant au titre.
oui je sais, c'etait pour evité de mettre un BR. De pouvoir aligné par exemple le titre, sans l'image, car si j'ai tout dans une seul céllule, si je met un text-align sa prendra effet sur tout son ensemble. Hors yaura 5 info par fichier, et j'aimerais les disposé chacun comme je le souhaite. Smiley decu

Chaque Li aura ceci :

titre
img
texte

j'aimerai disposé le titre a g auche, par defaut, il y'est déja.
img, idem. Mais texte, le centrer. Hors si je fais un text-align au LI, tout le li en prendra effet, me comprenez vous?

merci Smiley smile
Modifié par Okin (24 Jul 2005 - 14:36)
ce qui semblerait indiquer que ton li devrait avoir des subdivisions pour que tu puisses leur appliquer des règles différentes à chacune ... Smiley cligne
Sujet clos
Aller à