Discussion :

[stailer]

Bonjour,

J'ai <table> que je voudrais remplacer par un <ul> (ou autre chose...), mais je ne sais pas si c'est vraiment possible. Voici une ligne de mon tableau :

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
 
<tr>
	<td class="td2">
		<img src="repertoire/belc.jpg" alt="" />
		<br/>
		test1
		<br/>
		<a class="link" href="mods/infos_121.html">Lien 1</a>
	</td>
	<td class="td2">
		<img src="repertoire/belc.jpg" alt="" />
		<br/>
		test1
		<br/>
		<a class="link" href="mods/infos_121.html">Lien 1</a>
	</td>
</tr>

J'avais donc commencé à faire un ul avec des li en display:inline... Et dans les li je mettais les images. Jusque la aucun problème... Mais dès que je mettais un br après l'image pour mettre du texte en dessous, les li sautaient une ligne également.

Merci d'avance pour votre aide

[Crazyblinkgirl]

Bonjour,

Pour éviter les <br>, utilises la propriété margin pour tes <li>

[stailer]

Bon, j'ai essayé de trafiquer les margin dans tous sens et ça n'y fait rien.
Alors voilà ce que j'ai commencé à faire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul class="ul2">
	<li class="li2">
			<img src="repertoire/belc.jpg" alt="" />
			<a href="mods/infos_121.html">Lien 1</a>
	</li>
	<li class="li2">
			<img src="repertoire/belc.jpg" alt="" />
			<a href="mods/infos_121.html">Lien 2</a>
	</li>
</ul>

et le code css :

Code :

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

1
2
3
4
5
6
7
8
 
.ul2, .li2
{
  list-style-type: none;
  display: inline;
  margin: auto;
  padding:0;
}

Donc au lieu d'avoir mes 2 li l'un à côté de l'autre, je les ai l'un en dessous de l'autre... Comment je pourrais modifier mon code css ou html pour arriver à mes fins ?

[stailer]

Pardon, je veux dire : je les ai l'un à côté de l'autre, mais les liens sont à côtés des images, au lieu de les avoir en dessous...

[stailer]

C'est bon c'est résolu.
Donc j'ai un :

Code :

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

1
2
3
4
5
6
 
.col
{
   float: left;
  padding-right: 25px;
}

et côté html je fais des span et des div pour chaque item de la liste, avec comme class : col, SAUF le dernier item.
Ensuite quand je recommence les item avec des class .col ça me crée automatiquement une seconde ligne... Et même chose pour "arrêter" la ligne, je vire le class="col".