Rechercher : dans
Par :

Cellule transparente en HTML

Dernière réponse le 13 jan 2008 à 15:36:59 Thoronn, le 12 jan 2008 à 20:33:37 
 Signaler ce message aux modérateurs

Bonjour,
J'ai un petit problème et j'espère que vous pourrez m'aider, voilà je suis entrain de créer un site web, et pour la mise en page j'ai utilisé un tableau, sauf que je voudrais que la cellule du milieu soit transparente, sa donne sa :

http://img504.imageshack.us/img504/6325/sanstitre4qs5.gif

Je voudrais que le fond du tableau de la cellule du milieu soit transparent mais que celui des autres cellule reste bleu, j'espère que c'est faisable :s

Configuration: Windows XP
Firefox 2.0.0.11

Meilleures réponses pour « Cellule transparente en HTML » dans :
[Site web] Vérifier, optimiser et nettoyer son code HTML VoirLes logiciels WYSIWYG de création de pages web produisent parfois du contenu HTML rempli de balises HTML inutiles, voire incompatibles avec les recommandations du W3C. Les outils proposés ci-dessous permettent de vérifier la validité du code HTML...
[Excel] Colorer des cellules sur conditions VoirIl existe dans Excel des fonctions très pratiques mais peu connues et peu utilisées. Exemple : vous souhaitez qu'une cellule se colore automatiquement en rouge (ou autre mise en forme de police, de bordure, de trame) selon une condition : un...
[Gimp] Créer des images transparentes VoirCette vidéo va vous expliquer comment utiliser The Gimp pour créer des images transparentes, les problèmes que cela peut poser dans certains navigateurs et comment contourner le problème. Vidéo de 2 Mo (Flash)
Télécharger HTML Tidy VoirHTML Tidy est un utilitaire permettant de vérifier et d'optimiser tout code HTML. La version originale de cet utilitaire s'utilise en mode de commande uniquement. La présente version, appelée "GUI Tidy", possède une interface graphique. Notez...
Mise en forme de données VoirStyles de données Que la cellule contienne une valeur littérale saisie par vous-même ou le résultat d’une formule, vous affectez un style aux données de cette cellule en définissant ce que l’on appelle le format de la cellule : cela conditionne...
Caractères spéciaux HTML VoirCodage des caractères spéciaux Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage particulier. Pour...
Tableaux HTML VoirUtilisation de tableaux Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes. Un...

1

bibi675, le 12 jan 2008 à 20:44:48

Salut,

<table>
   <tr>
      <td>
         Première ligne : blabla (image, etc...).
      </td>
   </tr>
   <tr>
      <td>
         Deuxième ligne : première cellule.
      </td>
      <td style="background-color: transparent;">
         Deuxième ligne : deuxième cellule transparente.
      </td>
      <td>
         Deuxième ligne : troisième cellule.
      </td>
   </tr>
</table>


@++

Répondre à bibi675

2

Thoronn, le 12 jan 2008 à 20:50:17

Merci pour la réponse super rapide, Je viens d'essayer et sa ne marche pas, mais comme c'est du java, je doit peut être rajouter un truc en plus non ? J'ai sa actuelement :


<TABLE BORDER bgCOLOR=#336699 WIDTH=1000 HEIGHT=178>

<TR><TD width=15%><A HREF="page2.htm" onmouseover="bouton.src='http://img184.imageshack.us/img184/2218/bouton1bisde7.gif';" onmouseout="bouton.src='http://img110.imageshack.us/img110/5346/bouton1dq4.gif';">
    <IMG SRC="http://img110.imageshack.us/img110/5346/bouton1dq4.gif" name="bouton" border=0>
   </A></TD><td align=center valign=top width=70% ROWSPAN=4 style="background-color: transparent;">Je voudrais rendre cette zone transparente !</td><td width=15% ROWSPAN=4 align=center><script type="text/javascript" src="http://www.service-gratuit-fr.com/horloges.php?id=134479&w=120&h=120"></script>
   </body></td></TR>
<TR><TD><A HREF="page2.html" onmouseover="bouton2.src='http://img236.imageshack.us/img236/1073/bouton2xz2.gif';" onmouseout="bouton2.src='http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif';">
    <IMG SRC="http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif" name="bouton2" border=0>
   </A></TD></TR>
<TR><TD><A HREF="page2.html" onmouseover="bouton3.src='http://img170.imageshack.us/img170/493/bouton3bisjpgum6.gif';" onmouseout="bouton3.src='http://img225.imageshack.us/img225/2571/bouton3vb7.jpg';">
    <IMG SRC="http://img225.imageshack.us/img225/2571/bouton3vb7.jpg" name="bouton3" border=0>
   </A></TD></TR>
<TR><TD><A HREF="page2.html" onmouseover="bouton4.src='http://img518.imageshack.us/img518/4935/bouton4sk9.gif';" onmouseout="bouton4.src='http://img519.imageshack.us/img519/8144/bouton4biszp3.gif';">
    <IMG SRC="http://img519.imageshack.us/img519/8144/bouton4biszp3.gif" name="bouton4" border=0>
   </A></TD></TR>
</TABLE>

Répondre à Thoronn

3

bibi675, le 12 jan 2008 à 21:30:35

<TABLE BORDER WIDTH=1000 HEIGHT=178>
<TR><TD width=15%  bgCOLOR=#336699 ><A HREF="page2.htm" onmouseover="bouton.src='http://img184.imageshack.us/img184/2218/bouton1bisde7.gif';&
quot; onmouseout="bouton.src='http://img110.imageshack.us/img110/5346/bouton1dq4.gif';"
;>
    <IMG SRC="http://img110.imageshack.us/img110/5346/bouton1dq4.gif" name="bouton" border=0>
   </A></TD><td align=center valign=top width=70% ROWSPAN=4>Je voudrais rendre cette zone transparente !</td><td width=15% ROWSPAN=4 align=center><script type="text/javascript" src="http://www.service-gratuit-fr.com/horloges.php?id=134479&w=120&h=120&quo
t;></script>
   </body></td></TR>
<TR><TD  bgCOLOR=#336699 ><A HREF="page2.html" onmouseover="bouton2.src='http://img236.imageshack.us/img236/1073/bouton2xz2.gif';&qu
ot; onmouseout="bouton2.src='http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif';&
quot;>
    <IMG SRC="http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif" name="bouton2" border=0>
   </A></TD></TR>
<TR><TD  bgCOLOR=#336699 ><A HREF="page2.html" onmouseover="bouton3.src='http://img170.imageshack.us/img170/493/bouton3bisjpgum6.gif
';" onmouseout="bouton3.src='http://img225.imageshack.us/img225/2571/bouton3vb7.jpg';&quo
t;>
    <IMG SRC="http://img225.imageshack.us/img225/2571/bouton3vb7.jpg" name="bouton3" border=0>
   </A></TD></TR>
<TR><TD><A HREF="page2.html" onmouseover="bouton4.src='http://img518.imageshack.us/img518/4935/bouton4sk9.gif';&qu
ot; onmouseout="bouton4.src='http://img519.imageshack.us/img519/8144/bouton4biszp3.gif';&
quot;>
    <IMG SRC="http://img519.imageshack.us/img519/8144/bouton4biszp3.gif" name="bouton4" border=0>
   </A></TD></TR>
</TABLE>

Répondre à bibi675

4

Thoronn, le 12 jan 2008 à 21:37:44

Euh je voit pas bien ce qu'il y a de changer bibi, pourrais tu indiquer ce qu'il faut que je rajoute ou enlève steup

Répondre à Thoronn

5

Gihef, le 12 jan 2008 à 22:28:20

Bonjour,

La différence “bgCOLOR=#336699”.


++
Avec un code pourri comme ça, tu vas avoir beaucoup de mal à faire ce que tu veux.

--

Répondre à Gihef

6

Thoronn, le 13 jan 2008 à 02:40:52

Ah ok ben c'est direct comme ça ^^, il a quoi de pourri mon code ? y a peut être quelque truc foireu mais de la à être pourri je veut bien des explication.

Répondre à Thoronn

7

Gihef, le 13 jan 2008 à 03:37:00

Quelques exemples.

</script>
   </body></td></TR>
Le </body> est perdu ici, ce n'est pas sa place.

<TABLE BORDER bgCOLOR=#336699 WIDTH=1000 HEIGHT=178>
Choisis, tout en majuscules ou tout en minuscules.

BORDER, border quoi ? Il est prévu d'indiquer quelque chose border="1"

Il est préférable de placer les indications entre " et " WIDTH="1000".
Partout, pas de temps en temps name="bouton4" border=0

Tout est présenté sur la même ligne <TR><TD><A HREF="…</A></TD><td align=center…
Un peu de structuration ne gêne pas
<TR>
  <TD>
    <A HREF="…
  </TD>
  <td align="center"…
  </td>
</TR>

À part le BORDER, ce n'est pas que c'est faux, mais à lire…
Pour ceux qui veulent aider, avec en plus du Javascript (qu'on pourrait éviter) qui vient s'y insérer, c'est vraiment pénible de s'y retrouver… On est obligé de faire le ménage avant.
Respecte-nous, ne balance pas ton code comme ça, en vrac.
<table BORDER="0" width="1000" HEIGHT="178">
  <tr>
    <td width="15%" BGCOLOR="#336699">
      <a HREF="page2.htm"
      onmouseover="bouton.src='http://img184.imageshack.us/img184/2218/bouton1bisde7.gif';"
      onmouseout="bouton.src='http://img110.imageshack.us/img110/5346/bouton1dq4.gif';">
        <img SRC="http://img110.imageshack.us/img110/5346/bouton1dq4.gif" name="bouton" border="0">
      </a>
    </td>
    <td align=center valign="top" width="70%" ROWSPAN="4" style="background-color:transparent;">
      Je voudrais rendre cette zone transparente !
    </td>
    <td width="15%" ROWSPAN="4" align="center" BGCOLOR="#336699">
      <script type="text/javascript" src="http://www.service-gratuit-fr.com/horloges.php?id=134479&w=120&h=120"></script>
    </td>
  </tr>
  <tr>
    <td BGCOLOR="#336699">
      <a HREF="page2.html"
      onmouseover="bouton2.src='http://img236.imageshack.us/img236/1073/bouton2xz2.gif';"
      onmouseout="bouton2.src='http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif';">
        <img SRC="http://img236.imageshack.us/img236/1495/bouton2bisnq3.gif" name="bouton2" border="0">
      </a>
    </td>
  </tr>
  <tr>
    <td BGCOLOR="#336699">
      <a HREF="page2.html"
      onmouseover="bouton3.src='http://img170.imageshack.us/img170/493/bouton3bisjpgum6.gif';"
      onmouseout="bouton3.src='http://img225.imageshack.us/img225/2571/bouton3vb7.jpg';">
        <img SRC="http://img225.imageshack.us/img225/2571/bouton3vb7.jpg" name="bouton3" border="0">
      </a>
    </td>
  </tr>
  <tr>
    <td BGCOLOR="#336699">
      <a HREF="page2.html"
      onmouseover="bouton4.src='http://img518.imageshack.us/img518/4935/bouton4sk9.gif';"
      onmouseout="bouton4.src='http://img519.imageshack.us/img519/8144/bouton4biszp3.gif';">
        <img SRC="http://img519.imageshack.us/img519/8144/bouton4biszp3.gif" name="bouton4" border="0">
      </a>
    </td>
  </tr>
</table>

++
Un petit outil utile avant de poster http://infohound.net/tidy/

--

Répondre à Gihef

8

bibi675, le 13 jan 2008 à 11:06:48

Tu as raison, Gihef, le code est... pourrit ^^. Mais essaye le code que je t'ai donné, ça devrait fonctionner.

Répondre à bibi675

9

Thoronn, le 13 jan 2008 à 13:53:31

Merci beaucoup pour tout ces conseil, ton code marche super bien bibi et je comprend maintenant pourquoi mon code est pourri, je debute dans le domaine et j'avais pas penser a organiser le code et tout, et pour le BORDER je pensais que par default BORDER=1 donc pour moi BORDER et BORDER=1 c'était la même chose.

Répondre à Thoronn

10

Thoronn, le 13 jan 2008 à 14:59:49

Une dernière petite chose, avec le logiciel Tidy, il corrige les erreurs automatiquement ? Enfin il suffit que je copie le code qu'il me donne, ou c'est un exemple et faut que je corrige moi même ?

Répondre à Thoronn

11

RAD ZONE, le 13 jan 2008 à 15:03:26

SALUT
J ai fais un tidy.exe en francais si tu veux ?

RAD
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE

12

Thoronn, le 13 jan 2008 à 15:09:02

Ah ben oui je veut bien merci :p mais le code qui me rend ne contiendra aucun erreurs ?

Répondre à Thoronn

13

 RAD ZONE, le 13 jan 2008 à 15:36:59

Il vas corriger 90% des erreurs !! Tu passe ensuite ta page au W3C pour verifier !!

fais juste attention au accent !! mais comme il est en francais , il est + facile a configurer !!

RAD ZONE tu vas dans les "Webmaster Tools " et dans les "editors & tools" tu le telecharge ! ou si tu veux le "webmaster package" tu as tout (y compris des liens vers des tuto ) pour faire un site !!

RAD
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Répondre à RAD ZONE