texte dans image à écrire en bas de celle-ci [résolu]

texte dans image à écrire en bas de celle-ci [résolu] - HTML/CSS - Programmation

Marsh Posté le 23-10-2013 à 15:05:50    

Bonjour,
je veux créer un simple lien sur une page avec une image au centre de cette dernière. Du texte doit apparaître en bas de l'image, à gauche. Le code que voici fait bien apparaître le texte mais en haut de l'image, à gauche, malgré la présence du valign="bottom" dans le premier <td>. Quelqu'un voit-il où je commets une erreur ?
 
Merci d'avance !
 
Voici mon code :
 

Code :
  1. <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  2.    <A href="source/000000.textdbdict" target="_self">
  3.     <div class="mainImage">
  4.       <table border="0" cellpadding="0" cellspacing="0">
  5.         <tr>
  6.           <td width="100" height="100" valign="bottom">
  7.             <font color="red">
  8.                (texte)
  9.             </font>
  10.           </td>
  11.         </tr>
  12.       </table>
  13.     </div>
  14.    </A>
  15.   </body>


 
combiné à ce simple my.css :

Code :
  1. .mainImage {
  2. position: absolute;
  3. top: 25%;
  4. left: 25%;
  5. width: 50%;
  6. height: 50%;
  7. background-image: url(image.jpg);
  8. }


Message édité par suizokukan le 23-10-2013 à 15:57:38

---------------
rule #1 : trust the python
Reply

Marsh Posté le 23-10-2013 à 15:05:50   

Reply

Marsh Posté le 23-10-2013 à 15:57:00    

Je me réponds à moi-même : il fallait forcer la "table" à avoir une largeur et une hauteur maximale :

 
Code :
  1. <table border="0" cellpadding="0" cellspacing="0" width=100% height=100%>
 

Merci à ceux qui m'ont lu !


Message édité par suizokukan le 23-10-2013 à 15:57:58

---------------
rule #1 : trust the python
Reply

Marsh Posté le 23-10-2013 à 16:19:56    

[:delarue5] Aïe, aïe, la soupe de balise  [:cerveau sad] Pourquoi tant de haine, c'est tellement plusse mieux avec CSS:
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. .mainImage {
  6.    position: absolute;
  7.    display: block;
  8.    top: 25%;
  9.    left: 25%;
  10.    width: 50%;
  11.    height: 50%;
  12.    background-image: url(image.jpg);
  13. }
  14. .mainImage span {
  15.    position: absolute;
  16.    bottom: 0;
  17.    color: red;
  18. }
  19. body {
  20.    margin: 0;
  21.    background-color: #fff
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.  <a href="source/000000.textdbdict" target="_self" class="mainImage"><span>(texte)<span></a>
  27. </body>
  28. </html>


Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed