28172 sujets

CSS et mise en forme, CSS3

Mise en forme d'un damier [résolu]

Bonjour à tous !

j'ai plus un conseil théorique qu'une question technique à vous demander.
je suis en train de réaliser un site dans lequel il y a un damier avec 25 vignettes (toutes des carrés), 5 lignes, 5 colonnes.

j'ai fait une première version avec un tableau, puis la version actuelle avec 5 <ul> comprenant chacun 5 <li>

visuellement, aucune différence. Aucun problème technique non plus.
maintenant, vis à vis des standards, quelle méthode utiliseriez vous pour mettre en forme un damier ? le plus propre, le plus accessibles, etc. ?

merci d'avance,
Nico
Modifié par corn-flakes (17 Jul 2008 - 15:40)
On peut pas deviner la sémantique appropriée sans savoir la fonction du damier et la fonction de chacune des cases

Le tableau semble plus logique, un damier d'échec c'est numéroté en lettre d'un coté et en nombres de l'autre
Comme Dynexd, la meilleure solution sera la plus approprié à la fonction des cases.
La meilleure solution ne sera pas la même si ton damier sert cadre pour présenter des images, une liste de lien, ou des cases utilitaire (comme dans un jeux de dames).
mmmm ok.
le damier fait partie d'une galerie d'images.
il affiche 25 aperçus d'images (vignettes de 80*80px).
quand on clique sur une vignette, l'image correspondante s'affiche en grand.

les événements se limitent à des onMouseOver/Out (faire varier l'opacité) et onClick (fonction pour ouvrir l'image en grand).

j'espère que ça apportera plus de précision pour une réponse éventuelle.

merci,
Nico
Salut,

Dans ce cas, je dirais une seule liste de 25 items.

Pour la mise en forme, tu donnes une largeur à ton ul (400px) et tes li (80px).
Ensuite tu floates les li.

EDIT

Ca pourrait donner un truc du style

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>title</title>
	<style type="text/css" media="screen">
	*{margin: 0; padding: 0}
	ul {width: 410px; list-style: none; overflow: hidden;border: 1px solid black}
	li {width: 80px; height: 80px; background-color: red; float: left; text-align: center; line-height: 80px; border: 1px solid black}
	</style>
</head>
<body>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
	<li>21</li>
	<li>22</li>
	<li>23</li>
	<li>24</li>
	<li>25</li>
</ul>
</body>
</html>

Modifié par Mathieu_vd (17 Jul 2008 - 14:29)
hum...
j'ai envie de dire mortel !

bref, je me suis bien compliqué la vie avec mes 5 balises ul...
c'est beaucoup plus logique comme ça.

1000 mercis en tout cas.
à plus !

Nico
corn-flakes a écrit :
c'est beaucoup plus logique comme ça.


Et c'est aussi plus souple. Si tu veux augmenter ou diminuer le nombre d'images par ligne, il te suffira de modifier la largeur de ul.
Modifié par Mathieu_vd (17 Jul 2008 - 23:07)
Sujet clos
Aller à