Problème d'image background en CSS sortie d'Adobe...

Problème d'image background en CSS sortie d'Adobe... - HTML/CSS - Programmation

Marsh Posté le 23-06-2008 à 18:06:39    

Bonjour :)
 
Je rencontre quelques difficultés à mettre une image en arrière plan, même après avoir fait le tour de nombreux sites... -_-
 
Et je pense que cela est dû à l'imbrication que fait Adobe photoshop et aux positions absolute.
 
L'image que je voudrais mettre en arrière plan est la "SiteA1_07.gif" dont l'iframe devrait être au dessus.
 
Quel balise ou code dois je rajouter ? J'avoue ne pas du tout m'y connaître en CSS  :sweat: (J'ai testé background: no-repeat(ou repeat:y); -  background-image: url("..." ) - ... Je dois surement mal les placer :s ou ce n'est pas du tout le bon code : /)
 
Si quelqu'un pouvais m'aider  :ange:  Je lui en serais très reconnaissant  :jap:  
 
 
Voici les parties "intéressantes" du code :  :)  
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>SiteA1.com</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  9. #Tableau_01 {
  10. position:absolute;
  11. top:0%;
  12. left:50%;
  13. width:850px;
  14. height:1000px;
  15. margin-left: -425px;
  16. }
  18. #site-xp2-01_ {
  19. position:absolute;
  20. left:0px;
  21. top:0px;
  22. width:850px;
  23. height:91px;
  24. }
  26. ...
  28. #SiteA1-07_ {
  29. position:absolute;
  30. left:260px;
  31. top:234px;
  32. width:565px;
  33. height:675px;
  34. background: no-repeat;
  35. }
  37. ...
  39. #SiteA1-36_ {
  40. position:absolute;
  41. left:0px;
  42. top:952px;
  43. width:850px;
  44. height:48px;
  45. }
  47. -->
  48. </style>
  49. </head>
  50. <body style="background-color:#FFFFFF;">
  51. <div id="Tableau_01">
  52. <div id="site-xp2-01_">
  53.  <a href="http://SiteA1.com"
  54.   onmouseover="window.status='Site A1';  return true;"
  55.   onmouseout="window.status='';  return true;">
  56.   <img id="site_xp2_01" src="sccom/site-xp2_01.gif" width="850" height="91" border="0" alt="" /></a>
  57. </div>
  58. <div id="SiteA1-02_">
  59.  <img id="SiteA1_02" src="sccom/SiteA1_02.gif" width="850" height="75" alt="" />
  61. ...
  63. </div>
  64. <div id="SiteA1-07_">
  65.  <img id="SiteA1_07" src="sccom/SiteA1_07.gif" width="565" height="675" alt="" />
  66.  <iframe frameborder="0" width="520" height="1480" src="http://SiteA1.dv.tv/page.php"></iframe>
  68. </div>
  71. ...
  73. </div>
  74. <div id="SiteA1-36_">
  75.  <img id="SiteA1_36" src="sccom/SiteA1_36.gif" width="850" height="48" alt="" />
  76. </div>
  77. </div>
  78. </body>
  79. </html>


 
 
Merci d'avance  :jap:


Message édité par Duppy le 23-06-2008 à 18:08:34
Reply

Marsh Posté le 23-06-2008 à 18:06:39   

Reply

Marsh Posté le 23-06-2008 à 20:32:12    

background-image: url(chemin);
background-repeat: no-repeat;
 
Pas de guillemets ou de cotes pour les url en CSS.

Reply

Marsh Posté le 23-06-2008 à 21:25:06    

Ne fonctionne toujours pas avec :  :sweat:  
 

Code :
  1. #siteA1-07_ {
  2. position:absolute;
  3. left:260px;
  4. top:234px;
  5. width:565px;
  6. height:675px;
  7. background-color:#FFFFFF;
  8. background-image: url(sccom/siteA1_07.png);
  9. background-repeat: no-repeat;
  10. }


 
Edit : Ca fonctionne si je retire ceci :   :)  
 

Code :
  1. <img id="SiteA1_07" src="sccom/SiteA1_07.gif" width="565" height="675" alt="" />


 
Mais même avec repeat-y comme condition, elle ne se répète pas :s


Message édité par Duppy le 23-06-2008 à 22:50:18
Reply

Marsh Posté le 24-06-2008 à 01:40:22    

règle n°1 :
Ne jamais générer de code HTML/CSS avec Photoshop
règle n°2 :
Découper correctement son site à la main et intégrer le site à la main.
règle n°3 :
Ne jamais compter sur un logiciel KIFAITOUT car le résultat sera toujours de la merde inmaintenable
règle n°4 :
Apprendre les CSS et le HTML en se fiant aux normes W3C (elles sont pas là pour faire chier ni pour décorer) et ensuite monter son site à la main en mettant les mains dans le cambouis
règle n°5 :  
Aller sur les forums style HFR ou alsacreations afin d'avoir les meilleurs renseignements possible


Message édité par gatsu35 le 24-06-2008 à 01:41:08
Reply

Marsh Posté le 24-06-2008 à 13:52:28    

Ce n'est pas possible de mettre une image en arrière plan qui se répète si le code a été généré par Photoshop  :heink: ?
 
Rien n'est impossible, je vais continuer mes recherches sur google...  :sweat:

Reply

Marsh Posté le 24-06-2008 à 14:41:49    

Code :
  1. background:url(sccom/siteA1_07.png) repeat left top;


Mais rien que les exemples de codes que tu nous donnes font réellement peur, et je pense sincèrement que tu prends la plus mauvaise des directions, et qu'il faudrait que tu repartes de zéro

Reply

Sujets relatifs:

Leave a Replay

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