Image adapté a un div et son contenu

Image adapté a un div et son contenu - HTML/CSS - Programmation

Marsh Posté le 03-09-2012 à 20:03:37    

Bonjour, j'ai un soucis, j'ai un titre contenant du texte, avec un fond, et une image sur la droite
http://image.noelshack.com/minis/2012/36/1346694882-titre.png
 
J'aimerais que l'image s'adapte au texte (variable), j'ai essayé avec une table, mais rien.
 
Le code:

Code :
  1. <table class="titregl" CELLPADDING="0" CELLSPACING="0">
  2.    <tr><td>
  3.     <h1 class="titre" id="critere">
  4.      '.$aff_titre.'
  5.     </h1>
  6.    <div class="titreimg">
  7.    <img height="100%" width="100%" style="overflow:hidden;" src="'.$dir.'/titre.png" />
  8.    </div>
  9.    </td></tr>
  10.   </table>


 
Le style:

Code :
  1. .titre {
  2. margin-top: 10px;
  3. font-size: 18px;
  4. background: #8c1f3e;
  5. position: relative;
  6. float: left;
  7. color: #fff;
  8. padding-top: 5px;
  9. padding-bottom: 5px;
  10. padding-left: 10px;
  11. width: 591px;
  12. border: none;
  13. }
  15. .titregl {
  16. width:800px;
  17. position: relative;
  18. float: left;
  19. }
  21. .titreimg {
  22. float: left;
  23. position: relative;
  24. margin-top: 10px;
  25. width: 141px;
  26.  height:100%;
  28. }


 
Aidez moi s'il vous plait.


Message édité par mentosoc le 03-09-2012 à 20:50:16
Reply

Marsh Posté le 03-09-2012 à 20:03:37   

Reply

Marsh Posté le 04-09-2012 à 11:25:15    

Si j'ai bien compris tu as un titre qui a un fond uni et une image sur la droite c'est bien ça ?
 
Si oui il te suffit d'utiliser la propriété background en css
 
h1{background: #tacouleurdefond url('tonimage.jpg') no-repeat right;}
 
Du coup il ne faut pas lui donner de width fixe
 
 

Reply

Marsh Posté le 04-09-2012 à 12:00:28    

C'est exactement ça, je vais faire comme tu m'as conseillé, merci de ta réponse!

Reply

Sujets relatifs:

Leave a Replay

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