Un tableau (Image)

**mendonakk** · 06/03/2010, 03h31

Bonsoir, je débute dans le HTML et le CSS ! Donc voilà, je voudrais savoir comment on peut faire un tableau avec des images dessus ! Et en cliquant sur ces images ont atterri sur un lien pour une vidéo en gros.

Voilà l'exemple type dont je parle !

http://ronaldinho10.com/lematchvideo20092010.htm
Je voudrais faire un peu la même chose, avec les titres sur chaque image qui forme un lien vidéo.

Merci d'avance.

**Erwan31** · 06/03/2010, 14h07

Bonjour,
tu ne dois pas utiliser un tableau pour cela. Un tableau est fait pour mettre en forme des données tabulaires (données liées par une logique de structuration visuelle et de catégorisation verticales et/ou horizontales (un calendrier, une base de donnée, des statistiques, un emploi du temps, un planning, etc.)).
Tu dois utiliser une liste non-ordonnée (UL > Unordered List) et le structurer (par exemple) comme ceci:

Code :

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

1
2
3
4
5
6
<ul>
<li><img width="81" height="80" src="illustration/videos/lematch/lematch0910/lematch_palermo_1calcio0910.jpg" alt="">
<p><strong>  Milan AC - Palerme</strong>
<span>16ème journée</span></p>
</li>
</ul>

Désolé plus le temps pour la partir CSS.

**mendonakk** · 06/03/2010, 21h57

Sans le css j'avais ramé lol, merci d'avoir répondu c'est sympa.

**Erwan31** · 07/03/2010, 15h03

Bonjour,
je sais pas comment tu as fais mais tu as énormément de problèmes majeures dans ton code (absence de balises fermantes et ouvrantes, balises ouvrante ou fermantes en double (body par exemple), éléments uniques en double (title) Déclaration du Doctype non fermée, etc).
Tu dois commencer par corriger toutes ces erreurs qui provoqueront sans doute des différences d'affichage imprévisibles (car non standardisées) d'un navigateur à l'autre...

Exemple de balisage valide et envisageable dans ton cas:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title></title>
<meta...>
<link...>
<style type="text/css" media="all"><!-- --></style>>
<script type="text/javascript">...</script>
</head>
<body>
<div>...</div>
<script type="text/javascript">...</script>
</body>
</html>

Si tu ne sais pas à quoi correspondent ces balises, je te conseil de te former aux bases du HTML

Le strict minimum (avec un doctype HTML4.01 Transitionnal dans ce cas)

Code :

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

1
2
3
4
5
6
7
8
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Au minimum, je te conseil de prévoir la compatibilité pour IE7/8, Firefox3.5+, Safari4. Selon tes exigences, le temps que tu as, t la cible tu pourras ajouter IE6, Firefox3, Safari3+/Chrome et Opera.

Quelques remarques:

> Brièvement ton doctype (HTML4 transitionnal sans URI) fait basculer les navigateurs graphique dans un mode de rendu non standard (appelé aussi Quirks) qui favorise les différences de rendu d'un navigateurs à l'autre...
Pour voir les doctype qui font ou non basculer les browsers dans ce mode :
http://www.opera.com/docs/specs/doctype/

> Les titres de sections doivent être balisés comme ceci <hn></<hn> (n étant compris entre 1 et 6 selon le niveau hiérarchique du titre dans la structure du document) sachant qu'il ne doit pas y avoir de trous dans les niveaux hiérarchiques...

> L'implémentation de tableaux de mise en forme imbriqués est pour l'essentiel la meilleur manière de nuire à l'accessibilité (pour différentes raisons) à la maintenance du code et sa lisibilité, aux performances d'affichage, de temps de chargement du document.

> l'élément script de peut avoir comme parent que l'élément body ou head (et non pas une div ou autre)
Tu peux appeler un fichier JS juste avant la balise fermante </body> si le poids de celui-ci est important pour des raisons de performance.

Enfin le code simplifié pour l'exemple.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>Le Match : Saison 2009/2010 - Ronaldinho10.com [R10]</title>
<meta name=description content="Tout sur Ronaldinho, retrouvez les news, les vidéos et les photos de Ronaldinho, les résultats et classements, forums...">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="all">
<!--
ol li  {
	float:left;
	text-align:center;
	list-style:none;
	width: 140px;
 
}
ol a img  {
	display: block;
	margin: 0 auto 10px;
	border:none;
	}
ol a {
	display:block;
	padding: 10px 5px;
	text-decoration:none;
	color:#222;
	border: 1px solid #FFF;
}
ol a:hover, ol a:focus, ol a:active {	border: 1px solid #CD8383;}
 
ol span {
	display:block;
	font-size: .9em;
	color: #9E0B0C;
}
-->
</style>
</head>
<body>
<h2>Matchs aller - Télétecharger les vidéos</h2>
<ol>
	<li>
		<a href="MilanAC-Palerme.avi">
			<img src="lematchvideo20092010_fichiers/lematch_marseille_2c1.jpg" height="80" width="81" alt="">
			<strong>Milan AC - Palerme</strong> <span>16ème journée</span> (format <abbr title="Audio Video Interleave" lang="en">AVI</abbr> - 2 <abbr title="Méga-octets">Mo</abbr>)
		</a>	 
 	</li>
	<li>
		<a href="MilanAC-Palerme.avi">
			<img src="lematchvideo20092010_fichiers/lematch_marseille_2c1.jpg" height="80" width="81" alt="">
			<strong>Milan AC - Palerme</strong> <span>16ème journée</span> (format AVI- 2 Mo)
		</a>	 
 	</li>
</ol>
</body>
</html>

Dans ton exemple on ne sait pas que le lien pointe sur une vidéo à télécharger:
> Le titre d'une section devrait être plus précis (il faudrait ajouter ici "Télécharger...")
Cela évite de voir ajouter l'action "Télécharger" à chaque lien)
> La fonction du lien (si présente) doit être ajoutée à la fin de celui-ci
avec le format du fichier associée (si non HTML) et son poids.

> Il vaut mieux dans ton cas, utiliser un élément OL (Ordored List) puisque les matchs sont ordonnés selon une certaine logique

> Toujours ajouter un attribut alt (contenu alternatif reproduisant le contenu de l'image si nécessaire) aux images : alt="" vide ou pas.

> la première occurrence d'une abréviation à l'intérieure du document doit être ajoutée via l'élément abbr, pas les suivantes.

Voila je n'ai pas le temps de tout t'expliquer.

Dis moi plutôt ce que tu ne comprends pas (si tu es perdu au niveau du CSS c'est normal même si tu peux comprendre sans trop de difficulté certaines déclarations).

Bon courage

Un tableau (Image)

HTML

Vue hybride

Discussions similaires

Partager

Partager