Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème de positionnement d'image

QuentinGauny
    13 mars 2020 à 17:26:00

    bonjour a tous, 

    je me suis lancé dans un projet de création de site web qui aura comme sujet le modélisme. Jusqu’à là, tout allait bien, mai j'ai rencontré un problème que je ne sait résoudre. En fait, sur mon site " pro10pancar.ddns.net ", je n'arrive pas a placer des image a gauche et a droite de la carte de France (qui est une image cliquable). Quand j'en rajoute une, il me le met en bas a gauche ou a droite mais tout en bas de la page et non juste à coté de cette carte.

    voici mon code HTML :

      
<!DOCTYPE html>

<html>

  <head>
    <title>pro10pancar.ddns.net</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles_index.css">
  </head>
  <body>
    <h1 class="headline" align="center" >
      bonjour
    </h1>
    <p class="msg_bienvenue">
      Bienvenue sur mon site. Vous pouvez y voir tous les clubs qui font des courses en 1/10 piste électrique et autre avec les courses à venir.
    </p>
        
              


      </header>
    </div>
  <br />
  <br />
  <h1 class="titre_tableau" align="center"  >
    les courses à venir
  </h1>
  
    <table align="center">
      <tr>
        <td>Lieu</td>
        <td>Date</td>
        <td>Catégorie</td>
      </tr>
      <tr class="impaire">
        <td>Montpellier</td>
        <td>12/04/2020</td>
        <td>1/10 pancar et DTM, 1/8 électrique</td>
      </tr>
      <tr class="paire">
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

  


<br>
<br>


<img src="/img/Pancar/P (1).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (2).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (3).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (4).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (5).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (6).jpg" width="15.9%" align="" >
<center> 
  <img src="/img/France_image3.jpg" width="800" height="822" border="0" usemap="#map" /> 
</center> 
<br>
<img src="/img/Pancar/P (7).jpeg" width="7.5%" align="left">

 


  <map name="map">
 
  <area shape="circle" coords="12,226,10" href="www.amco29.fr/" />
  <area shape="circle" coords="22,210,11" href="https://mbg-guipavas.forumgratuit.org/" />
  <area shape="circle" coords="83,201,11"  nohref="nohref" />
  <area shape="circle" coords="125,227,12" href="http://mini.bolide22.free.fr/" />
  <area shape="circle" coords="115,297,11" href="http://amcg.meilleurforum.com/" />
  <area shape="circle" coords="193,130,11" href="https://clt-tmb.org/" />
  <area shape="circle" coords="251,230,15" href="https://www.ffvrc-normandie.fr/Clubs/Ferrier_Etangs.pdf" />
  <area shape="circle" coords="341,174,12" href="https://trc-modelisme.jimdofree.com/" />
  <area shape="circle" coords="375,106,11" href="https://www.facebook.com/LoisirModelisme/" />
  <area shape="circle" coords="467,47,15" href="http://www.lcml.fr/" />
  <area shape="circle" coords="424,70,15" href="http://macdemarles.ovh/" />
  <area shape="circle" coords="435,107,10" href="http://amac-207.fr/news.php" />
  <area shape="circle" coords="420,117,10" href="https://www.facebook.com/Race80Amiens" />
  <area shape="circle" coords="414,196,9" href="http://www.rc-argenteuil.com/" />
  <area shape="circle" coords="434,199,10" href="https://rsma.pagesperso-orange.fr/le%20club.html" />
  <area shape="circle" coords="420,223,12" href="https://www.mrte.fr/index.php" />
  <area shape="circle" coords="525,170,12" href="http://reims.emc/" />
  <area shape="circle" coords="660,160,16" href="http://www.modelclubthionvillois.com/" />
  <area shape="circle" coords="751,203,17" href="http://miniautoherrlisheim.free.fr/" />
  <area shape="circle" coords="675,271,15" href="http://omslc-remiremont.e-monsite.com/pages/sports/choisy-model-club.html" />
  <area shape="circle" coords="700,297,12" href="http://www.sam-rc.com/" />
  <area shape="circle" coords="693,320,11" href="https://amcc25.fr/" />
  <area shape="circle" coords="669,350,15" href="http://www.carbesancon.com/" />
  <area shape="circle" coords="568,434,18" href="http://rcclyon.com/" />
  <area shape="circle" coords="378,388,15" href="http://www.masc36.com/" />
  <area shape="circle" coords="310,349,14" href="https://amct.fr/" />
  <area shape="circle" coords="330,384,12" href="https://maci.pagesperso-orange.fr/" />
  <area shape="circle" coords="219,346,14" href="https://www.facebook.com/pommerayeminiracingcar/?ref=bookmarks" />
  <area shape="circle" coords="190,357,13" href="http://www.nantesracingclub.fr/" />
  <area shape="circle" coords="241,271,14" href="http://www.lavalminiautoclub.fr/" />
  <area shape="circle" coords="245,391,11" href="http://rmcm.e-monsite.com/" />
  <area shape="circle" coords="295,401,15" href="http://www.modelespace.com/fr" />
  <area shape="circle" coords="257,432,11" href="https://mr79niort.wordpress.com/" />
  <area shape="circle" coords="363,466,12" href="http://lmrc.free.fr/" />
  <area shape="circle" coords="285,488,15" href="https://arca16.forumactif.org/" />
  <area shape="circle" coords="209,502,13" href="https://www.facebook.com/MRCG-Mini-Racing-Club-Grayannais-830689063669712/?fref=ts" />
  <area shape="circle" coords="253,675,14" href="http://clubmrcp.blogspot.com/" />
  <area shape="circle" coords="272,695,13" href="http://192.168.1.48/villes/BOURS.html" />
  <area shape="circle" coords="594,536,15" href="http://www.bmvrc.com/Home/" />
  <area shape="circle" coords="548,525,13" href="http://www.minicars43.com/" />
  <area shape="circle" coords="531,494,15" href="www.facebook.com/AMCM42/" />
  <area shape="circle" coords="504,452,13" href="https://www.mbvcb.club/page/22047-presentation" />
  <area shape="circle" coords="488,480,13" href="http://armcafacebook%20%28voiture%20orange%29/" />
  <area shape="circle" coords="429,656,11" href="http://192.168.1.48/villes/PAULINET.html" />
  <area shape="circle" coords="450,647,11" href="https://msa-modelisme.forumsactifs.com/" />
  <area shape="circle" coords="523,671,13" href="http://192.168.1.48/inscription.html" />
  <area shape="circle" coords="529,619,11" href="http://camisard-rc.forumactif.org/" />
  <area shape="circle" coords="573,603,13" href="http://192.168.1.48/villes/RADIO%20MODEL%20CLUB%20PIERRELATTE.html" />
  <area shape="circle" coords="588,630,12" href="http://www.pmo84.fr/" />
  <area shape="circle" coords="568,638,10" href="http://villeneuvmodels/" />
  <area shape="circle" coords="573,658,11" href="http://www.rmcc13.net/" />
  <area shape="circle" coords="599,664,10" href="https://lma935.wixsite.com/mrcm" />
  <area shape="circle" coords="613,679,11" href="http://www.marseille-mini-modeles.fr/" />
  <area shape="circle" coords="725,662,13" href="https://www.facebook.com/Mini-Racing-Cannes-la-Bocca-2659829854087446/?hc_ref=ARQxOwB7wa1oyzxsVJxhCep3O10ut7dOHj6HByCCLhzF20lG_FMbNZO5Nth9tkWvCS8&amp;fref=nf&amp;__xts__[0]=68.ARAHcRfLw5KiIvmIRKbYW9IDp2C9gQgBftTjyFk-B01We2qu1HJaAr_42RDKua1eh27Vq_IRb2YVxABu9DJTIDkeCCE2uITNk7hp8Sq-VcxZwg188_l9o_qXhYc26n7F7tEh8M8lK42Z8UjakWAnaUVlF57w5c-5SdObFyYes1nPHeU52FivOgiddC7EH5rb6wBBWUsDvH2pZ454VXhMWs_ICxmMUaWi87qIvFjC8wRkRF3a3273cG4feWYMh109YsL9fnjMYxX2oAjJ_2eH-mSbGHQJ5A2Zx8hmS_Y74YbgAgpxL1wMcxs9zdXbhr8T5ggHchO_aNJMIYcZ77YCP5_sBUzj&amp;__tn__=kC-R" />
  </map>






  </body>

</html>

    voici mon code CSS : 

    body {
  font-family: 'Open Sans' , sans-serif;
  

}
.msg_bienvenue{
  text-align: center;
}



}
table{
  border-collapse: collapse;
}   


td{
  border: 1px solid black;
  padding: 10px
}

.paire{
  background-color: orange;
}

.impaire{
  background-color: #069;
}

p{
  text-align: center;
}


    merci

    • Partager sur Facebook
    • Partager sur Twitter
    Lartak
    • HTML / CSS
      13 mars 2020 à 20:26:26

      Bonsoir.

      Commences par supprimer les balises inutiles, lignes 21 et 22.

      La balise center  et l'attribut align sont obsolètes.

      Tes images n'étant pas situées dans des blocs parents, tu vas avoir du mal à les styliser avec du CSS.

      • Partager sur Facebook
      • Partager sur Twitter

      Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

      QuentinGauny
        13 mars 2020 à 21:48:37

        c'est bon, j'ai trouvé !!!

        merci de ta réponse @Lartak

        PS : j'ai fait ce que tu m'as dit 

        voici mon code 

        HTML : 

          
<!DOCTYPE html>

<html>
<div id="corp">
  <head>
    <title>pro10pancar.ddns.net</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles_index.css">
  </head>
  <body>
    <h1 class="headline" align="center" >
      bonjour
    </h1>
    <p class="msg_bienvenue">
      Bienvenue sur mon site. Vous pouvez y voir tous les clubs qui font des courses en 1/10 piste électrique et autre avec les courses à venir.
    </p>
        
  <br />
  <br />
  <h1 class="titre_tableau" align="center"  >
    les courses à venir
  </h1>

  
    <table align="center">
      <tr>
        <td>Lieu</td>
        <td>Date</td>
        <td>Catégorie</td>
      </tr>
      <tr class="impaire">
        <td>Montpellier</td>
        <td>12/04/2020</td>
        <td>1/10 pancar et DTM, 1/8 électrique</td>
      </tr>
      <tr class="paire">
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

  


<br>
<br>

<img src="/img/Pancar/P (1).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (2).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (3).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (4).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (5).jpg" width="16.4%" align="" >
<img src="/img/Pancar/P (6).jpg" width="15.9%" align="" >

<div id="image">
  <img src="/img/France_image3.jpg" width="800" height="822" border="0" usemap="#map" /> 
</div>

<br>
<div id="P7">
  <img src="/img/Pancar/P (7).jpeg" width="15.9%">
</div>


 


  <map name="map">
 
  <area shape="circle" coords="12,226,10" href="www.amco29.fr/" />
  <area shape="circle" coords="22,210,11" href="https://mbg-guipavas.forumgratuit.org/" />
  <area shape="circle" coords="83,201,11"  nohref="nohref" />
  <area shape="circle" coords="125,227,12" href="http://mini.bolide22.free.fr/" />
  <area shape="circle" coords="115,297,11" href="http://amcg.meilleurforum.com/" />
  <area shape="circle" coords="193,130,11" href="https://clt-tmb.org/" />
  <area shape="circle" coords="251,230,15" href="https://www.ffvrc-normandie.fr/Clubs/Ferrier_Etangs.pdf" />
  <area shape="circle" coords="341,174,12" href="https://trc-modelisme.jimdofree.com/" />
  <area shape="circle" coords="375,106,11" href="https://www.facebook.com/LoisirModelisme/" />
  <area shape="circle" coords="467,47,15" href="http://www.lcml.fr/" />
  <area shape="circle" coords="424,70,15" href="http://macdemarles.ovh/" />
  <area shape="circle" coords="435,107,10" href="http://amac-207.fr/news.php" />
  <area shape="circle" coords="420,117,10" href="https://www.facebook.com/Race80Amiens" />
  <area shape="circle" coords="414,196,9" href="http://www.rc-argenteuil.com/" />
  <area shape="circle" coords="434,199,10" href="https://rsma.pagesperso-orange.fr/le%20club.html" />
  <area shape="circle" coords="420,223,12" href="https://www.mrte.fr/index.php" />
  <area shape="circle" coords="525,170,12" href="http://reims.emc/" />
  <area shape="circle" coords="660,160,16" href="http://www.modelclubthionvillois.com/" />
  <area shape="circle" coords="751,203,17" href="http://miniautoherrlisheim.free.fr/" />
  <area shape="circle" coords="675,271,15" href="http://omslc-remiremont.e-monsite.com/pages/sports/choisy-model-club.html" />
  <area shape="circle" coords="700,297,12" href="http://www.sam-rc.com/" />
  <area shape="circle" coords="693,320,11" href="https://amcc25.fr/" />
  <area shape="circle" coords="669,350,15" href="http://www.carbesancon.com/" />
  <area shape="circle" coords="568,434,18" href="http://rcclyon.com/" />
  <area shape="circle" coords="378,388,15" href="http://www.masc36.com/" />
  <area shape="circle" coords="310,349,14" href="https://amct.fr/" />
  <area shape="circle" coords="330,384,12" href="https://maci.pagesperso-orange.fr/" />
  <area shape="circle" coords="219,346,14" href="https://www.facebook.com/pommerayeminiracingcar/?ref=bookmarks" />
  <area shape="circle" coords="190,357,13" href="http://www.nantesracingclub.fr/" />
  <area shape="circle" coords="241,271,14" href="http://www.lavalminiautoclub.fr/" />
  <area shape="circle" coords="245,391,11" href="http://rmcm.e-monsite.com/" />
  <area shape="circle" coords="295,401,15" href="http://www.modelespace.com/fr" />
  <area shape="circle" coords="257,432,11" href="https://mr79niort.wordpress.com/" />
  <area shape="circle" coords="363,466,12" href="http://lmrc.free.fr/" />
  <area shape="circle" coords="285,488,15" href="https://arca16.forumactif.org/" />
  <area shape="circle" coords="209,502,13" href="https://www.facebook.com/MRCG-Mini-Racing-Club-Grayannais-830689063669712/?fref=ts" />
  <area shape="circle" coords="253,675,14" href="http://clubmrcp.blogspot.com/" />
  <area shape="circle" coords="272,695,13" href="http://192.168.1.48/villes/BOURS.html" />
  <area shape="circle" coords="594,536,15" href="http://www.bmvrc.com/Home/" />
  <area shape="circle" coords="548,525,13" href="http://www.minicars43.com/" />
  <area shape="circle" coords="531,494,15" href="www.facebook.com/AMCM42/" />
  <area shape="circle" coords="504,452,13" href="https://www.mbvcb.club/page/22047-presentation" />
  <area shape="circle" coords="488,480,13" href="http://armcafacebook%20%28voiture%20orange%29/" />
  <area shape="circle" coords="429,656,11" href="http://192.168.1.48/villes/PAULINET.html" />
  <area shape="circle" coords="450,647,11" href="https://msa-modelisme.forumsactifs.com/" />
  <area shape="circle" coords="523,671,13" href="http://192.168.1.48/inscription.html" />
  <area shape="circle" coords="529,619,11" href="http://camisard-rc.forumactif.org/" />
  <area shape="circle" coords="573,603,13" href="http://192.168.1.48/villes/RADIO%20MODEL%20CLUB%20PIERRELATTE.html" />
  <area shape="circle" coords="588,630,12" href="http://www.pmo84.fr/" />
  <area shape="circle" coords="568,638,10" href="http://villeneuvmodels/" />
  <area shape="circle" coords="573,658,11" href="http://www.rmcc13.net/" />
  <area shape="circle" coords="599,664,10" href="https://lma935.wixsite.com/mrcm" />
  <area shape="circle" coords="613,679,11" href="http://www.marseille-mini-modeles.fr/" />
  <area shape="circle" coords="725,662,13" href="https://www.facebook.com/Mini-Racing-Cannes-la-Bocca-2659829854087446/?hc_ref=ARQxOwB7wa1oyzxsVJxhCep3O10ut7dOHj6HByCCLhzF20lG_FMbNZO5Nth9tkWvCS8&amp;fref=nf&amp;__xts__[0]=68.ARAHcRfLw5KiIvmIRKbYW9IDp2C9gQgBftTjyFk-B01We2qu1HJaAr_42RDKua1eh27Vq_IRb2YVxABu9DJTIDkeCCE2uITNk7hp8Sq-VcxZwg188_l9o_qXhYc26n7F7tEh8M8lK42Z8UjakWAnaUVlF57w5c-5SdObFyYes1nPHeU52FivOgiddC7EH5rb6wBBWUsDvH2pZ454VXhMWs_ICxmMUaWi87qIvFjC8wRkRF3a3273cG4feWYMh109YsL9fnjMYxX2oAjJ_2eH-mSbGHQJ5A2Zx8hmS_Y74YbgAgpxL1wMcxs9zdXbhr8T5ggHchO_aNJMIYcZ77YCP5_sBUzj&amp;__tn__=kC-R" />
  </map>






  </body>
</div>
</html>

        CSS : 

        body {
  font-family: 'Open Sans' , sans-serif;
  

}
.msg_bienvenue{
  text-align: center;
}



}
table{
  border-collapse: collapse;
}   


td{
  border: 1px solid black;
  padding: 10px
}

.paire{
  background-color: orange;
}

.impaire{
  background-color: #069;
}

#image{
	position: relative;
	text-align: center;

}

#corp{
	width: 1400px;
	height: 2000px;
}

#P7{
	position: relative;
	top: -800px;
	left: 10px;
}


        bonne soirée

        • Partager sur Facebook
        • Partager sur Twitter

        Problème de positionnement d'image

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown