ArcGIS JavaScript Custom Logo

Question

Je tente d'insérer un logo personnalisé pour une application de cartographie ArcGIS. L'application est livrée avec un moyen original de télécharger un petit logo qui est entièrement contenu dans l'en-tête. Cependant, je voulais insérer un logo plus grand qui «recouvre» l'en-tête.

J'ai réussi à faire en sorte que cela fonctionne, en partie, en utilisant les commandes de positionnement absolu et d'index z pour placer l'image devant l'en-tête. Cependant, une fois que j'ai fait cela, le titre qui se trouvait au centre de l'en-tête s'est déplacé à l'extrême gauche et les boutons d'analyse sur la droite ont disparu.

Le téléchargement de modèle Web AppBuilder contient plusieurs fichiers html, .js, .json et .css. J'ai utilisé le fichier index.html pour placer le logo.

Des réflexions sur les raisons du déplacement du titre vers la gauche et les boutons de l'outil d'analyse ont-ils disparu de l'en-tête une fois que j'ai inséré un logo dans le fichier .html? Dois-je avoir inséré le logo dans un autre fichier?

Merci.

Exemple de code à partir du fichier index.html:

 <!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href="jimu.js/css/jimu-ie.css" /> 
<![endif]--> 
    <style type="text/css"> 
    img { 
     position: absolute; 
     left: 0px; 
     top: 0px; 
     z-index: 3; 
     } 
    *{box-sizing: border-box;} 
     body,html { 
      width:100%; 
      height:100%; 
      margin:0; 
      padding:0; 
      overflow:hidden; 
     } 
     #main-loading{ 
      width: 100%; 
      height: 100%; 
      background-color: #2E3F60; 
      text-align: center; 
      overflow: hidden; 
     } 
     #main-loading #app-loading, #main-loading #ie-note{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    } 
    #main-loading #app-loading{ 
    width: 100%; 
    height: 100px; 
    } 
    #main-loading .app-name{ 
    font: 36px arial; 
    font-weight: bold; 
    position: absolute; 
    z-index: 2; 
    } 
     #main-loading img{ 
      position: relative; 
      display: block; 
      margin: auto; 
     } 
     #main-loading .loading-info{ 
      font: 14px 'arial'; 
      margin-top: 50px; 
      overflow: hidden; 
      position: relative; 
     } 
     #main-loading .loading-info .loading{ 
      width: 260px; 
      height: 4px; 
      border-radius: 2px; 
      background-color: #15203B; 
      margin: auto; 
     } 
     #main-loading .loading-info .loading-progress{ 
      height: 4px; 
      border-radius: 2px; 
      background-color: #ABB2BF; 
     } 
     #main-loading #ie-note { 
    width: 586px; 
    height: 253px; 
    background-image: url('images/notes.png'); 
    padding: 0 30px 40px 30px; 
    font-size: 14px; 
    color: #596679; 
    } 
    #ie-note .hint-title{ 
    height: 40px; 
    line-height: 48px; 
    text-align: left; 
    font-weight: bold; 
    } 
    #ie-note .hint-img{ 
    background-image: url('images/hint.png'); 
    background-position: left; 
    padding-left: 40px; 
    margin-top: 20px; 
    background-repeat: no-repeat; 
    height: 30px; 
    text-align: left; 
    line-height: 30px; 
    font-weight: bold; 
    } 
    #ie-note span{ 
    display: block; 
    line-height: 14px; 
    } 
     #main-page{ 
      display: none; 
      width: 100%; 
      height: 100%; 
      position: relative; 
     } 

     #jimu-layout-manager{ 
      width: 100%; 
      height: 100%; 
      position: absolute; 
     } 
    </style> 

Answer 1

C'est parce que vous avez utilisé le positionnement absolu, et maintenant il n'y a rien à « pousser » le texte à droite. Il suffit de mettre la bonne marge sur l'élément de texte du titre et vous êtes prêt à partir.

Voir ceci:

img {height: 60px;} 
 
span {height: 60px;display: inline-block;} 
 
#p {position:absolute;} 
 
#o {margin-left: 30px;}

<img src="http://www.mariogame.info/images/icon-facebook.png" id="p" /><span>Absolutely positioned</span> 
 
<hr /> 
 
<img src="http://www.mariogame.info/images/icon-facebook.png" /><span>Normally positioned</span> 
 
<hr /> 
 
<img src="http://www.mariogame.info/images/icon-facebook.png" /><span id="o">Absolutely positioned - text offset</span>