Version imprimable
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.
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:
Désolé plus le temps pour la partir CSS.Code:
2
3
4
5
6
Sans le css j'avais ramé lol, merci d'avoir répondu c'est sympa.
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:
Si tu ne sais pas à quoi correspondent ces balises, je te conseil de te former aux bases du HTML ;)Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
Le strict minimum (avec un doctype HTML4.01 Transitionnal dans ce cas)
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.Code:
2
3
4
5
6
7
8
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.
Dans ton exemple on ne sait pas que le lien pointe sur une vidéo à télécharger:Code:
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
> 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 ;)