Aller au contenu

Image de fonds dans une cellule d'un tableau


Sujets conseillés

Posté

Bonjour à tous

Je suis actuellement entrain de recréer totalement mon site, dans le but d'éliminer les cadres qui le composent et surtout pour avoir la certifification W3C

Aimant bien l'apparence actuel de mon menu, j'ai décidé de la garder, hors, malheureusement son code n'est pas valide

dans chacune des cellules du tableau j'ai mis image de fonds, dreamweaver me code ça ainsi

<td height="32" background="r5.gif"><div align="center"><strong>programmation</strong></div></td>

Lorsque je passe au validateur, il me dit que l'attribut "background" n'est pas valide

Du coups j'ai éssayé ceci sans trop d'illusion

<td height="32"><img src="r5.gif"><div align="center"><strong>programmation</strong></div></td>

Je me retrouve avec mon texte en dessous de mon image

Je voudrai savoir si il existe un moyen de mettre une image dans une cellule et pouvoir écrire un texte dessus et que ce soit validable

J'ai toujours la possibilitée de créer les images avec le texte correspondant pour chacunes de mes cellules, mais si je pouvez éviter ça serait très bien

Merci d'avance à tout ceux qui pourront m'aider

Posté

Pour mettre ton site aux normes W3C tu devra recourir aux CSS (si tu n'es pas familiarisé avec ceux-ci je te conseil de lire cet article du Hub : Les feuilles de style)

Ci-dessous le code CSS appliqué à toutes les cellules de tes tableaux (si tu ne veut pas appliquer le même style à toutes tes cellules tu peut leur définir une classe, voir l'article ci-dessus) :

td {
height:32px;
background-image:url(r5.gif);
text-align:center;
font-weight:bold;
}

Et le code de ta cellule :

<td>programmation</td>

Voila, n'hésite pas à poser d'autres questions si tu as un problème ;)

Posté

Merci Country de ta réponse

Effectivement mon tableau fait 7 lignes, et il y a 3 gifs à y intégrer, J'ai lu l'article dont tu m'as passé le lien, je dois donc créer des classes pour chacuns de mes gifs

Dis moi si au niveau du code c'est correct?

.cel1 {
height:32px;
background-image:url(r1.gif);
text-align:center;
font-weight:bold;
}

.cel2 {
height:32px;
background-image:url(r2.gif);
text-align:center;
font-weight:bold;
}

.cel3 {
height:32px;
background-image:url(r5.gif);
text-align:center;
font-weight:bold;
}

Je pense avoir compris le principe de classe, mais c'est encore un peu flou, le CSS est quasiment complétement à découvrir par contre je commence à comprendre grâce à l'article l'utilitée de si mettre

Le code CSS je suis obligé de le mettre dans un feuille de style séparé ou je peux l'incorporer à ma page html ?

En ce qui concerne le code du tableau là je sèche un peu voilà mon idée, mais elle est surement fausse

<table width="60%"  border="0">
<tr>
<td class="cel1">texte 1</td>
</tr>
<tr>
<td class="cel2">texte 2</td>
</tr>
<tr>
<td class="cel3">texte 3</td>
</tr>

etc...

Merci de prendre le temps de m'aider, car dreamweaver ne comble plus mes lacunes, il est sympa il m'écrit un code faux mais me le signale quand même lorsque j'utilise son validateur :fou:

Rien à voir

J'ai visité ton site Country , j'ai trouvé son design très sympa, le graphisme son très bien fait et donne un ton humoristique :clap:

Bonne chance pour vos compétitions à venir

Posté

Sauf ton respect, je crois que tu fais fausse route, zave ;)

Si ce que tu cherches est juste une icône w3c, c'est un peu dommage: l'intention de refondre ton site aux normes actuelles est une bonne idée, une bonne intention.. et un petit surcroît de travail avec à la clé un changement des vieilles méthodes à la papa.

Les tableaux (<table><tr><td></td></tr></table>) ne doivent servir que pour les tableaux.

En bref, un code valide passe aussi par une bonne sémantique.

Donc un menu devrait en tout état de cause être .. un menu (logique implacable), soit une liste ordonnée.

-> <ul><li></li></ul>

De plus, tu auras plus de possibilités de style CSS

L'adresse de référence à ne pas manquer: http://css.maxdesign.com.au/listamatic/

Bon courage ;)

Posté

Bonjour Dudu

Je ne cherche pas à optenir l'icône w3c, ce que je veux c'est améliorer mes connaissance et faire bien les choses, la validation je la veux pour moi pour ma fiertée personnel

Le travail surtout quand ça concerne l'informatique ne me fais pas peur, au contraire, je ne demande qu' a améliorer mes connaissances, malheureusement quand tu apprends en autodidacte les bonnes infos ne te tombe pas forcément devant le nez

Je me suis donc renseigné sur les listes, j'ai trouvé cette adresse qui me permet de mieux comprendre ce que tu as voulu me dire, et son sens car l'anglais c'est pas trop ma tasse de thé

http://www.chez.com/starshoot/html/liste.htm

tu me dis que j'aurais plus de possiblitées en utilisant les listes, j'image que je peux donc incorporer une image à chaque élément de ma liste? si est ce possible de m'aider pour la syntaxe ça serait sympa, car j'ai pas réussis à trouver beaucoups d'info sur le sujet

J'ai commencé les cours sur le CSS sur le site pour les zéros, mais j'en suis qu'au début, de plus l'utilisation des listes et nouveau pour moi

Je voulais savoir aussi si il est possible d'éliminer le point devant chaque éléments ?

Merci à tout ceux qui prendront mes problèmes et mes interrogations de débutant en considération :)

Posté

Oui, tu peux avoir une puce différente par item.

Mais là n'est pas le problème car dans un menu, les puces sont souvent désactivées ;)

Sérieusement, retournes sur le lien que je t'ai donné: il pourrait être en mandarin, en thaï, en peul, ou en norvégien c'est la même chose: tout y est purement visuel

Ouvres tous les liens dans de nouveaux onglets, choisis le menu qui se rapproche le plus de ce que tu veux obtenir, copies-colle le code.

Et ensuite tu l'adapteras aux couleurs de ton site: pour commencer c'est ce qu'il y a de mieux à faire. Et ce site a été fait dans ce but.

Posté

Franchement, un grand merci Dudu

Surtout pour avoir insisté sur le fait que j'explore ton lien, j'aurai vraiment étais con de rater ça ;)

J'en suis même resté pantoi, je n'aurai jamais imaginé que le CSS offre autant de capacité, et pourtant tu me l'avais bien dis :up:

J'ai acheté le magazine "Linux Pratique" sur le développement web, grâce à lui et aux liens que vous avez eux la gentilesse de donné, j'ai de quoi occuper mes soirées, car de nouveaux horizons s'ouvrent à moi :D

Merci encore pour l'aide que vous avez apporté à un ignard borné, fini les tableaux ;)

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...