Problème dans mon programme

Fermé
Joonhy - 11 oct. 2013 à 09:36
mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 12 oct. 2013 à 23:10
Bonjour j'ai du faire un jeu de l'oie en html. Voila une partie mon code :

<table border="1">
<tr>
<td>1 Départ <img src="lol2.jpg" alt="image non disponible"/><h1 align="right">→</h1></td>
<td>2 Caitlyn <img src="caitlyn.jpg" alt="image non disponible"/><h1 align="right">→</h1></td>
<td>3 Annie <img src="annie.jpg" alt="image non disponible"/><h1 align="right">→</h1></td>
<td>4 Draven <img src="draven.jpg" alt="image non disponible"/><h1 align="right">↓</h1></td>
</tr>

Le problème est que quand je vais sur w3.validator ils me disent que le h1 après l'image ce n'est pas top. Je le savais déjà mais je ne trouve pas de moyen d'écrire un texte en dessous de mon image sinon (en l'occurrence faire des flèches).

Savais vous comment faire par hasard? Sinon j'ai déjà un fichier css pour la mise en forme de mon tableau

4 réponses

La balise <br /> revient à la ligne. Met la entre ta fleche et ton image.

Je te conseille de reprendre les bases avant de te lancer dans un gros projet, tu risque d'être très souvent bloqué pour des choses somme toute assez simple.
0
salut , tu met dans des balises p et ça reviens à la ligne ou tu met un span avec un <br />

le mieux c'est des balises p

de plus align="right" c'est pas valide, tu met <p style="text-align: right">?</p>


׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
0
Utilisateur anonyme
11 oct. 2013 à 09:49
tes balises h ne doivent pas servir à cela mais plus pour le positionnement dans les moteurs de recherche
0
Salut,

les tableaux ne doivent plus être utilisés pour la mise en page.
Tout comme le positionnement et la présentation agréable de n'importe quel élément de la page vous devez utiliser CSS exclusivement. HTML est là pour intégrer des éléments à travers les balises mais pour les afficher, pour la mise en page, pour la PAO la typo bref pour l'affichage correct vous devez utiliser CSS.

Donc pour positionner une image par rapport à son titre il faut que vous le fassiez en CSS.

Cela m'étonnerait que le w3C validator vous dise que mettre h1 après une image ne soit pas top, il serait bien d'indiquer le message(avertissement ou erreur) exact.
Par rapport au W3C il faut
utiliser le bon doctype, plus il est récent mieux ce sera, le doctype transitional (qui permet l'ancienne méthode HTML mélangée avec les ^possibilités CSS) est plus trop recommandée en tout cas la balise table est à utiliser uniquement pour un affichage de données(et uniquement données) tabulaires donc pas comme vous l'utilisez, cela ne sera jamais valide W3C.

Outre les td qui ne doivent pas être présents:
<td>1 Départ <img src="lol2.jpg" alt="image non disponible"/><h1 align="right">?</h1></td>
Le texte 1 Départ n'a aucun container, s'il s'agit d'un paragraphe il doit donc être indiqué par la balise p.
La balise h1 indique un titre donc doit être placé avant l'élément/article/sujet dont il est le titre.
Même remarque pour l'image elle n'est contenu dans aucun élément et devrait se trouver dans le même élément qui contient le texte si ils vont ensemble(et non une cellule de tableau qui comme déjà stipulé ne sert plus à ça).

Autre remarque:
L'attribut alt de la balise image sert à indiquer ce que représente l'image. Il sert à l'origine pour les navigateurs textuels et les malvoyants à indiquer ce que représente l'image même si au fil des utilisations son rôle à évolué.
Il ne doit donc absolument pas indiquer image non disponible. Vous pouvez remarquer qu'en fonction des navigateurs si vous passez la souris sur l'image il va s'afficher 'image non disponible' ce qui n'aura aucun sens et risque de perdre l'utilisateur pensant que l'image affichée n'est pas la bonne ou qu'il en manque une.
0
mpmp93 Messages postés 6648 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
12 oct. 2013 à 23:10
Bonjour,

Utiliser FIGURE et y intégrer IMG et FIGCAPTION:
http://html5.immo-scope.com/index.php?page=html5/elementFigure

Le CSS:

figure {
display: block;
float: right;
width: 200px;
text-align: center;
margin: 0px;
padding: 4px;
border: 1px solid #cfcfcf;
}

figure img {
width: 100%;
margin: 0px;
padding: 0px;
}
figure figcaption {
font-style: italic;
text-align:right;
}

et le code HTML:

.......
<td>
<figure>
<img src="lol2.jpg" alt="image non disponible"/>
<figcaption>?</figcaption>
</figure>
</td>
......


A+
0