Tom's Guide > Forum > Programmation > background image

background image

Forum Programmation : background image

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
CrazyJester   15-06-2005 à 08:46:45

B O N J O U R S !

alors voila c'est tout simple:
j'ai ca:
<div style="background: url(test2_fichiers/image005.jpg); position:absolute;margin-left:27.8pt;margin-top:-30.75pt;width:681.75pt; height:1233.75pt"></div>
et je desire mettre cette image sous le text (paske la elle se met par dessus tout et on vou plus qu'elle :P)

merci d'avance !

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Mileskabal   15-06-2005 à 10:22:49
- 0 +

Je crois qu'il faut que tu rajoutes la fonction z-index en ce qui concerne les calques...
"
Placer entre les balises <body> et </body>

<div id="Layer1" style="position: absolute; overflow: auto; left: 150px; top: 150px; width: 639px; height: 389px; z-index: 1; background: #999999; vertical-align: middle">

Explications complémentaires :
Layer1 : Nom du calque, à changer pour en utilisez plusieurs
Overflow :auto : effacer ce code si vous ne voulez pas qu’il y ait une scollbar dans votre calque
Top : Position en nombre de pixel à partir du haut de la page
Left : Position en nombre de pixel à partir de la partie gauche de la page
width=639px : largeur du calque
height=389px : hauteur du calque.
z-index :x : remplacer x par un chiffre, le calque de z-index : 1 se trouve en dessous du z-index :2 qui se trouve en dessous du z-index :3 et ainsi de suite….
background: #999999 : Couleur du fond du calque
"

Répondre à Mileskabal
CrazyJester   15-06-2005 à 12:12:42
- 0 +

rha ouai big thx Mileskabal, en fait j'ai juste mis "z-index: -1" et sbon ca marche !

M E R C I !

Répondre à CrazyJester
gccyrillus   15-06-2005 à 12:23:41
- 0 +

salut, j'ai vu ton post sur sdz, mais les "dns" de free me renvoie sur un autre site !

essaie ceci:

Code :
  1. <div style="background: url(test2_fichiers/image005.jpg);position:absolute; margin-left:27.8pt;margin-top:-30.75pt;width:681.75pt; height:1233.75pt">mon texte dans mon div, blabla bla bla bli bloup !</div>



ton position:absolute fixe ton div sur ta page en le sortant du flux(ce qui le superpose au reste de ton code html qui lui est dans le flux), et sur le code que tu presente ton div n'a rien d'autre qu'une image d'arriere plan, donc si tu veux afficher un texte sur l'image d'arriere plan tu dois le mettre dans le div pour qu'il se retrouve en avant plan !

j'espere etre clair et avoir mis le doigt sur ta petite erreur

a plus

Répondre à gccyrillus
CrazyJester   15-06-2005 à 12:56:49
- 0 +

(lol mois aussi je vieny la paske le sdz merde ^^)
oui mais le pb c'est que le texte que je vais mettre entre les <div>et</div> contien lui aussi des <div>et</div>, donc qu premier </div> venu, le <div style='...'> sera fini ! (y'a quand meme tout un site sur l'image !)

le truc du z-index: -5 marche bien... mais que sur IE :P

help ! comment je fait sur FF ?!

Répondre à CrazyJester
gccyrillus   15-06-2005 à 13:08:03
- 0 +

salut,

tu as lien vers ta page ? histoire de la bricoler en local
le z-index devrait fonctionner sous FF aussi, ...

a plus

Répondre à gccyrillus
CrazyJester   15-06-2005 à 14:41:02
- 0 +

c'est par ici: http://tipaldi.free.fr
ligne 30

(ne te souci pas de l'erreur du minichat, OSEF ^^)

Répondre à CrazyJester
gccyrillus   15-06-2005 à 15:13:51
- 0 +

salut,

ou lalala le css sortie de la page html c'est lisible la c'est prise tete, je jetterais un oeil ce soir !

pour aller sur le SDZ utilise ton fichier hosts pour rediriger sur la bonne ip

ajoute cette ligne dedans et l'acces au site du zero marche a nouveau !


Citation :

213.186.41.156 www.siteduzero.com



a plus

Répondre à gccyrillus
CrazyJester   15-06-2005 à 15:16:55
- 0 +

ok thx

edt: mais répond ici quand meme stp paske le sdz merde kan meme :P

Répondre à CrazyJester
gccyrillus   15-06-2005 à 21:14:43
- 0 +

voilou :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <style>
  4. p.MsoNormal, li.MsoNormal, div.MsoNormal
  5.     {
  6.     mso-style-parent:"";
  7.     margin:0cm;
  8.     margin-bottom:.0001pt;
  9.     mso-pagination:widow-orphan;
  10.     font-size:12.0pt;
  11.     font-family:"Times New Roman";
  12.     mso-fareast-font-family:"Times New Roman";
  13.     }
  14. body {background-color:#999999;}
  15. #aa {
  16. background: url(http://tipaldi.free.fr/CJTV/test2_fichiers/image005.jpg);
  17. position:absolute;
  18. margin-left:27.8pt;
  19. margin-top:-30.75pt;
  20. width:681.75pt;
  21. height:1233.75pt;
  22. z-index: -0;/* ici la difference ! */
  23. </style>
  25. <body>
  28. <head>
  30. <meta name="keywords" content="CJTV, Arthur, TIPALDI, fun, videos, parodies, gratuit, CrazyJester, cj, COINTIN" />
  31. <meta name="description" content="Un site de ouf', mon premier site en PHP avec
  32. toutes mes videos de merde et bien sur aussi comme partout des videos pompées sur d'autres sites.
  33. Fun, délire, par Arthur TIPALDI alias CrazyJester ou cj" />
  34. <meta name="author" content="cj" />
  35. <meta name="copyright" content="Copyright © pas de copyright: amusez-vous !" />
  38. <title>[CJTV] :: BIENVENU.wmv</title>
  41. <div id ="aa"></div>
  44.   <embed src="BIENVENU.wmv" loop="false" controller="true" autoplay="true" alt="CJTV" style='position:absolute;
  45. margin-left:247pt;margin-top:98.6pt;width:258.15pt;height:230.0pt;z-index:5'>
  50. <fieldset style="background-color: orange; color: black; font-size: 11px; font-family:arial; padding: 5px;
  51. margin-top: 75px; margin-right: 5px; width:100pt; position: fixed; text-align: justify">
  52. <legend style="font-size: 14px; color: grey; font-weight: bold;"> NewsLetter : </legend>
  53. <form method="post" action="newsletter.php">
  54. <textarea name="ouinon" cols="13" rows="1" value="oui">oui</textarea>
  55. je souhaite recevoir un mail m'informant de l'ajout d'une nouvelle video...
  58. mon e-mail ou hotmail:<br/>
  59. <textarea name="mail" cols="13" rows="1"></textarea>
  61. <input type="submit" value="------inscription------" />
  62. </fieldset></form>
  64. <p style="margin-left:140.4pt; margin-top:486.15pt; width:300pt; height:461.95pt; position: absolute;
  65. overflow: auto; border-right:1px solid black; text-align: justify">
  66.     <br align=center><u><span
  67.     style='font-size:14.0pt;font-family:"Arial Black"'>Tipaldi-Cointin :<o:p></o:p></span></u></br>
  68.     <br><o:p> </o:p></br>
  69.     <br/>
  73.     <span style='font-size:9.0pt;font-family:Arial;color:red'>14/06 - 15 h 54 :<o:p></o:p></span>
  74.     <br/><b style='font-size:12.0pt;font-family:Arial;'> <a href="CJTV00.php?video=BilLard.wmv">BilLard</a> <o:p></o:p></b>
  75.     <br/><span style='font-size:10.0pt'>C'est notre premiere video, bien a l'arrache ^^
  76. Celle qui nous a lancée dans le tournages de films pourris<o:p></o:p></span>
  77.     <br/><a>  </a><br/>
  85.     <span style='font-size:9.0pt;font-family:Arial;color:red'>14/06 - 16 h 05 :<o:p></o:p></span>
  86.     <br/><b style='font-size:12.0pt;font-family:Arial;'> <a href="CJTV00.php?video=Boules.wmv">Boules</a> <o:p></o:p></b>
  87.     <br/><span style='font-size:10.0pt'>Une deuxieme video qu'on a tournée dans la foulée le meme jour.
  88. Toujours a l'arrache, mais ca nous fait bien marrer :P<o:p></o:p></span>
  89.     <br/><a>  </a><br/>
  97.     <span style='font-size:9.0pt;font-family:Arial;color:red'>14/06 - 16 h 07 :<o:p></o:p></span>
  98.     <br/><b style='font-size:12.0pt;font-family:Arial;'> <a href="CJTV00.php?video=CS.wmv ">ParodieCS #1</a> <o:p></o:p></b>
  99.     <br/><span style='font-size:10.0pt'>Notre premiers film "reflechit" qui parodie le célebre jeux Counter-Strike<o:p></o:p></span>
  100.     <br/><a>  </a><br/>
  108.     <span style='font-size:9.0pt;font-family:Arial;color:red'>14/06 - 16 h 08 :<o:p></o:p></span>
  109.     <br/><b style='font-size:12.0pt;font-family:Arial;'> <a href="CJTV00.php?video=nuuul.wmv ">Nous en Vrac</a> <o:p></o:p></b>
  110.     <br/><span style='font-size:10.0pt'>Ben voila quoi... c'est un peut nous en vrac quoi, du bon n'importe quoi<o:p></o:p></span>
  111.     <br/><a>  </a><br/>
  119.     <span style='font-size:9.0pt;font-family:Arial;color:red'>14/06 - 16 h 08 :<o:p></o:p></span>
  120.     <br/><b style='font-size:12.0pt;font-family:Arial;'>
  121. <a href="CJTV00.php?video=PasQueDeLaChatte.wmv ">Pas Que De La Chatte! #1</a> <o:p></o:p></b>
  122.     <br/><span style='font-size:10.0pt'>On s'est mis au BasketBall !
  123. Pas de trucages, on s'est juste vu tous les apres-midis pendant 3 semaines...
  124. d'autres paniers encors plus fous a venir !..<o:p></o:p></span>
  125.     <br/><a>  </a><br/>
  131. <a name="fin"></a>
  132. </p>
  135. <p style="margin-left:445pt; margin-top:486.15pt; width:241pt; height:461.95pt;
  136. position: absolute; overflow: auto; border-left:0px solid black; text-align: justify">
  137.     <br align=center><u><span
  138.     style='font-size:14.0pt;font-family:"Arial Black"'>Liens :<o:p></o:p></span></u></br>
  139.     <br><o:p> </o:p></br>
  140. </p>
  142. </body>
  146. <p class=MsoNormal align='center' style='font-size:10.0pt;color:orange'><a>en cours:</a> BIENVENU.wmv<o:p> </o:p></p>
  148. <p size=18 align='center' class=MsoNormal style='font-size:14.0pt'>
  149. <a>---</a><a target="_BLANK" href="BIENVENU.wmv">telecharger la video</a><a>---</a>
  150. <a target="_BLANK" href=mailto:cj_cacom@hotmail.com>m'ecrire</a><a>---</a>
  151. <a target="_BLANK" href="livreor.php?page=1">livre d'or</a><a>---</a>
  153. <o:p> </o:p></p>
  155. <p class=MsoNormal style='font-size:2.0pt;color:orange'><o:p> </o:p></p>
  157. <p class=MsoNormal><o:p> </o:p></p>
  159. <p class=MsoNormal><o:p> </o:p></p>
  161. <p class=MsoNormal><o:p> </o:p></p>
  163. <p class=MsoNormal><o:p> </o:p></p>
  165. <p class=MsoNormal><o:p> </o:p></p>
  167. <p class=MsoNormal><o:p> </o:p></p>
  169. <p class=MsoNormal><o:p> </o:p></p>
  171. <p class=MsoNormal><o:p> </o:p></p>
  173. <p class=MsoNormal><o:p> </o:p></p>
  175. <p class=MsoNormal><o:p> </o:p></p>
  177. <p class=MsoNormal><o:p> </o:p></p>
  179. <p class=MsoNormal align='center' style='font-size:18.0pt;color:orange'><o:p> </o:p></p>
  181. <p class=MsoNormal align='center' ;color:orange'><o:p> </o:p></p>
  183. <p class=MsoNormal align='center' style='font-size:5.0pt;color:orange'><o:p> </o:p></p>
  185. <p class=MsoNormal><o:p> </o:p></p>
  187. <p class=MsoNormal><o:p> </o:p></p>
  189. <p class=MsoNormal><o:p> </o:p></p>
  191. <p class=MsoNormal><o:p> </o:p></p>
  193. <p class=MsoNormal><o:p> </o:p></p>
  195. <p class=MsoNormal><o:p> </o:p></p>
  197. <p class=MsoNormal><o:p> </o:p></p>
  199. <p class=MsoNormal><o:p> </o:p></p>
  201. <p class=MsoNormal><o:p> </o:p></p>
  203. <p class=MsoNormal align='center' style='font-size:0.0pt;color:orange';><o:p> </o:p></p>
  205. <p class=MsoNormal><o:p> </o:p></p>
  207. <p class=MsoNormal><o:p> </o:p></p>
  209. <p class=MsoNormal><o:p> </o:p></p>
  211. <p class=MsoNormal><o:p> </o:p></p>
  213. <p class=MsoNormal><o:p> </o:p></p>
  215. <p class=MsoNormal><o:p> </o:p></p>
  217. <br style='mso-ignore:vglayout' clear=ALL>
  221. <p class=MsoNormal><span style='mso-tab-count:15'>     
  222.              
  223.              
  224.              
  225.              
  226.              
  227.              
  228.              
  229.       </span></p>
  235. <p style="margin-left:430pt; margin-top:0pt; position: absolute; border-left:0px solid black" class=MsoNormal>
  236. <span style='mso-tab-count:13'> </span><span
  237. > </span><b style='mso-bidi-font-weight:
  238. normal'><span style='font-family:"Arial Black";color:red'>
  239. 15/06/2005 - 20 h 47<o:p></o:p></span></b></p>
  245. <p class=MsoNormal align='center' style='font-size:16.0pt;color:orange';><o:p> </o:p></p>
  247. <p class=MsoNormal><o:p> </o:p></p>
  249. <p class=MsoNormal><o:p> </o:p></p>
  251. <p class=MsoNormal><o:p> </o:p></p>
  253. <p class=MsoNormal><o:p> </o:p></p>
  255. <p class=MsoNormal><o:p> </o:p></p>
  257. <p class=MsoNormal><o:p> </o:p></p>
  259. <p class=MsoNormal><o:p> </o:p></p>
  261. <p class=MsoNormal><o:p> </o:p></p>
  263. <p class=MsoNormal><o:p> </o:p></p>
  265. <p class=MsoNormal><o:p> </o:p></p>
  267. <p class=MsoNormal><o:p> </o:p></p>
  269. <p class=MsoNormal><o:p> </o:p></p>
  271. <p class=MsoNormal><o:p> </o:p></p>
  273. <p class=MsoNormal><o:p> </o:p></p>
  275. <p class=MsoNormal><o:p> </o:p></p>
  277. <p class=MsoNormal><o:p> </o:p></p>
  279. <p class=MsoNormal><o:p> </o:p></p>
  281. <p class=MsoNormal><o:p> </o:p></p>
  283. <p class=MsoNormal><o:p> </o:p></p>
  285. <p class=MsoNormal><o:p> </o:p></p>
  287. <p class=MsoNormal><o:p> </o:p></p>
  289. <p class=MsoNormal><o:p> </o:p></p>
  291. <p class=MsoNormal><o:p> </o:p></p>
  293. <p class=MsoNormal><o:p> </o:p></p>
  295. <p class=MsoNormal><o:p> </o:p></p>
  297. <p class=MsoNormal><o:p> </o:p></p>
  299. <p class=MsoNormal><o:p> </o:p></p>
  301. <p class=MsoNormal><o:p> </o:p></p>
  303. <p class=MsoNormal><o:p> </o:p></p>
  305. <p class=MsoNormal><o:p> </o:p></p>
  307. <p class=MsoNormal><o:p> </o:p></p>
  309. <p class=MsoNormal><o:p> </o:p></p>
  311. <p class=MsoNormal><o:p> </o:p></p>
  313. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  315. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  317. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  319. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  323. <p class=MsoNormal align=center style='text-align:center'><span
  324. style='mso-tab-count:1'> </span><b
  325. style='mso-bidi-font-weight:normal'><span style='color:black'> <a href="CJTV.php?video=CJTV.gif"> </a> <span
  326. style='mso-tab-count:7'> </span> <a href="CJTV.php?video=CJTV.gif"> </a> <span style='mso-tab-count:2'> </span>
  327. <o:p></o:p></span></b></p>
  329. <p class=MsoNormal align=center style='text-align:center'><b style='mso-bidi-font-weight:
  330. normal'><span style='font-size:10.0pt;color:black'><span
  331. style='mso-tab-count:7'></span>
  335. </span> </b><span style='font-size:10.0pt'><o:p></o:p></span></p>
  339. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  341. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  343. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  345. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  347. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  349. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  351. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  353. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  355. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  357. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p>
  359. <p class=MsoNormal align=center style='text-align:center'><o:p> </o:p></p><a name="minichat"></a>
  366. </div>
  368. </body>
  370. </html>



bon, maintenant pour faire ta page vraiment dans l'idée du xhtml il faut que tu sorte tout le style (css) de la page et que tu mette ça dans un fichier css, tu verra ce sera beaucoup plus facile a faire.
bon courage
a plus

Répondre à gccyrillus
CrazyJester   16-06-2005 à 14:03:10
- 0 +

rha merci je t'aiiiiiiiiiime !

Répondre à CrazyJester
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > background image
Aller à :

Il y a 1983 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 1,859 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens