Résolu Probleme avec css/html

Solutions (9)
Tags :
  • Html
  • CSS
  • Programmation
|
bien le bonjour
je recherche le moyen de déplacé une image a un endroit précis j'ai donc cherché longtemps :??:  sur google comment faire et la miracle :ange:  je trouve la réponse sur ce forum mais bon, faut croire que le sors s'acharne sur moi j'ai bien retapé le code donné:

CSS:-------------------------------------------------------------------------------------------------------------------------
  1. img.1 {
  2. position: absolute;
  3. display: block;
  4. margin-left: 535px;
  5. margin-top: 380px;
  6. }


HTML:-----------------------------------------------------------------------------------------------------------------------------
  1. <img class="1" src="CHEMIN.jpg" name="UNNOM" alt="" border="0px" />



mais rien a faire sa ne marche pas, l'image ne bouge pas d'un pixel :fou:  :fou:  par contre quand je modifie le nombre de pixel de la bordure la sa marche mais je n'est que faire de la bordure. :sweat: 
donc je post ce topic avec mon codage "css" et "html" et jesper que l'ont poura me dire ce qui ne va pas :D 

merci d'avance. ;) 



HTML:------------------------------------------------------------------------------------------

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmtns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <head><link href="page_menu.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  6.  
  7. <title>
  8. page 1
  9. </title>
  10.  
  11. <body>
  12. <div id="page_entete">
  13. </div>
  14.  
  15.  
  16. <div id="marge_gauche">
  17. <img src="alliance.jpg" height=240 width=240 />
  18. <br><br>
  19. <img src="alliance_flag.png"/>
  20. <img class="1" src="logo_humaine.jpg" border="0px" ="1000px" />
  21. </div>
  22.  
  23.  
  24. <div id="marge_droite">
  25. <img src="horde.jpg" height=240 width=240 />
  26. <br><br>
  27. <img src="horde_flag.png"/>
  28. </div>
  29.  
  30.  
  31. <div id="contenu">
  32. </div>
  33.  
  34.  
  35. <div id="page_pied">
  36. </div>



CSS:-----------------------------------------------------------------------------------------------------
  1. #body {
  2. width: 1440px;
  3. text-align: center;
  4. background: #cccccc;
  5. margin-left: 0;
  6. margin-right: 0,5em;
  7. }
  8.  
  9. #page_entete {
  10. width:1424px;
  11. height: 101px;
  12. background-image:url(entete.jpg);
  13. text-align: center;
  14. clear: both;
  15. }
  16.  
  17. #marge_gauche {
  18. width:240px;
  19. height:650px;
  20. background-image:url(margeg.jpg);
  21. float: left;
  22. }
  23.  
  24. img.1 {
  25. position: absolute;
  26. display: block;
  27. margin-left: 535px;
  28. margin-top: 380px;
  29. }
  30.  
  31. #marge_droite {
  32. width:240px;
  33. height:650px;
  34. background-image:url(marged.jpg);
  35. float: right;
  36. }
  37.  
  38. #contenu {
  39. width: 1400px;
  40. height:650px;
  41. background-image:url(fond.jpg);
  42. float: center;
  43. }
  44.  
  45. #page_pied {
  46. width:1424px;
  47. height: 40px;
  48. background-image:url(piedpage.jpg);
  49. text-align: center;
  50. clear: both;
  51. }

Contenus similaires
Meilleure solution
partage
, Modérateur |
Bah c'est le code pour placer une image n'importe où...
  1. <html>
  2. <head>
  3. <title>title</title>
  4. </head>
  5. <body>
  6. <img src="c.png" style="position:absolute; left:150px; top:150px;" />
  7. </body>
  8. </html>


Place l'image à 150px à gauche et 150px en haut.
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par coldis33740.
  • Commenter cette réponse |
Score
0
òh
òi
|
merci mille fois, sa marche enfin ;)  :bounce:  :bounce:  :na:  :pt1cable: 
  • Commenter cette réponse |
Score
0
òh
òi
|
MOUIIIINNNN :'(  :'(  :'(  :'(  :'(  sa marche pas "se lève, va cherché une corde pour se pendre" nan mais la je crois que je vais devenir dingue, en + de fair des bétises sa marche pas :'( . il n'y aurai pas un autre code pour placer une image n'importe ou sur la page au pixel pres?siouplais
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Encore quelques soucis :
- Le <head> se ferme avant l'ouverture du <body>
- Le <html> se ferme après le <body>
- Il ne faut pas mettre de "px" dans un attribut HTML (dans border dans ce cas pour ton image). Il faut mettre directement border="0"
  • Commenter cette réponse |
Score
0
òh
òi
|
efectivement je n'avai rien fermé et un atribut sans nom de 1000px n'était pas éffacé mais mtn que tous sa est réparé et bien .....ca marche tjr pas :'(  :'(  je sens que je vais craqué :@

voici mes code actuel:

CSS:

  1. #body {
  2. width: 1440px;
  3. text-align: center;
  4. background: #cccccc;
  5. margin-left: 0;
  6. margin-right: 0,5em;
  7. }
  8.  
  9. #page_entete {
  10. width:1424px;
  11. height: 101px;
  12. background-image:url(entete.jpg);
  13. text-align: center;
  14. clear: both;
  15. }
  16.  
  17. #marge_gauche {
  18. width:240px;
  19. height:650px;
  20. background-image:url(margeg.jpg);
  21. float: left;
  22. }
  23.  
  24. img.1 {
  25. position: absolute;
  26. display: block;
  27. left: 500px;
  28. top: 500px;
  29. }
  30.  
  31.  
  32. #marge_droite {
  33. width:240px;
  34. height:650px;
  35. background-image:url(marged.jpg);
  36. float: right;
  37. }
  38.  
  39. #contenu {
  40. width: 1400px;
  41. height:650px;
  42. background-image:url(fond.jpg);
  43. float: center;
  44. }
  45.  
  46. #page_pied {
  47. width:1424px;
  48. height: 40px;
  49. background-image:url(piedpage.jpg);
  50. text-align: center;
  51. clear: both;
  52. }




HTML:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmtns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  4. <head><link href="page_menu.css" type="text/css" rel="stylesheet" />
  5. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  6.  
  7. <title>
  8. </title>
  9.  
  10.  
  11. <body>
  12.  
  13.  
  14. <div id="page_entete">
  15. </div>
  16.  
  17.  
  18. <div id="marge_gauche">
  19. <img src="alliance.jpg" height=240 width=240 />
  20. <br><br>
  21. <img src="alliance_flag.png"/>
  22. <img class="1" src="logo_humaine.jpg" border="0px"/>
  23.  
  24. </div>
  25.  
  26. </div>
  27.  
  28.  
  29. <div id="marge_droite">
  30. <img src="horde.jpg" height=240 width=240 />
  31. <br><br>
  32. <img src="horde_flag.png"/>
  33. </div>
  34.  
  35.  
  36. <div id="contenu">
  37. </div>
  38.  
  39.  
  40. <div id="page_pied">
  41. </div>
  42. </html>
  43. </head>
  44. </body>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
A noter que dans le code que tu donnes, tu ne fermes pas le <head>, ni le <body>, ni le <html>...
Et que ton image avec la classe 1 a un attribut sans nom qui a une valeur de 1000px, je suis pas sûr que le navigateur aime trop afficher des trucs comme ça :) 
  • Commenter cette réponse |
Score
0
òh
òi
|
je vient de testé mais rien a fair sa marche pas :'( 
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Utilises plutôt "left" et "top" plutôt que margin-left et margin-top. et ça devrait être bon ;) 
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS