IMG wird nicht richtig positioniert

  • HTML

    IMG wird nicht richtig positioniert

    Hallo Leute... ich hab mal angefangen mich ein bissl mit HTML, JS und CSS zu beschäftigen (auch php).

    Hier geht es jetzt um das ausrichten eines Img.

    Im folgenden Fenster sieht es so aus wie ich es haben möchte:
    Spoiler anzeigen

    Der Code dazu wie folgt: (relevant ab Zeile 24)
    Spoiler anzeigen

    HTML-Quellcode

    1. <div class="content" id="content" style="margin-top: 62px;">
    2. <div id="breadCrums">
    3. Du bist hier:
    4. <a onclick="render('home')">Start - </a>
    5. <a onclick="render('createNew')">Neuer Skin - </a>
    6. <a onclick="render('createNew')">Standard-Skin - </a>
    7. <a onclick="render('skinCreate/selectSection')">Wähle Übersicht - </a>
    8. <a onclick="render('skinCreate/editSection')">skinIni</a>
    9. </div>
    10. <select id="sectionDropDown" class="sectionDropDown" onchange="switchTo(this.selectedIndex)">
    11. <option value="Skin.ini">Skin.ini</option>
    12. <option value="4K.ini">4K.ini</option>
    13. <option value="5K.ini">5K.ini</option>
    14. <option value="6K.ini">6K.ini</option>
    15. <option value="7K.ini">7K.ini</option>
    16. <option value="8K.ini">8K.ini</option>
    17. </select>
    18. <div id="v0" class="editWidget" style="display: block;">allgemein</div>
    19. <div id="v1" class="editWidget" style="display: none;">4k</div>
    20. <div id="v2" class="editWidget" style="display: none;">5k</div>
    21. <div id="v3" class="editWidget" style="display: none;">6k</div>
    22. <div id="v4" class="editWidget" style="display: none;">7k</div>
    23. <div id="v5" class="editWidget" style="display: none;">8k</div>
    24. <a onclick="render('skinCreate/selectSection')" id="goBack" style="top: 707.5px;">
    25. <img src="file:///C:/php/osc/api/v01/images/buttons/menu-back.png" id="goBackIMG">
    26. </a>
    27. </div>


    Im zweiten Screen wird die unten angezeigte "Back"-Grafik auf die selbe Weiße eingebunden und angezeigt, allerdings ist sie hier immer auf der Horizontale an das rechte Ende der oberen Select-Box geschoben:
    Spoiler anzeigen

    Der Code dazu hier: (relevant ab zeile 15)
    Spoiler anzeigen

    HTML-Quellcode

    1. <div class="content" id="content" style="margin-top: 62px;">
    2. <div id="breadCrums">
    3. Du bist hier:
    4. <a onclick="render('home')">Start - </a>
    5. <a onclick="render('createNew')">Neuer Skin - </a>
    6. <a onclick="render('createNew')">Dateien explizit auswählen - </a>
    7. <a onclick="render('skinCreate/editSingle')">Einzeln editieren</a>
    8. </div>
    9. <select id="sectionDropDown" class="sectionDropDown" onchange="renderSubSection(this.selectedIndex)">
    10. <option value="approachcircle">approachcircle</option>
    11. <option value="button-left">button-left</option>
    12. <option value="button-middle">button-middle</option>
    13. <option value="button-right">button-right</option>
    14. </select>
    15. <a onclick="render('createNew')" id="goBack" style="top: 707.5px;">
    16. <img src="file:///C:/php/osc/api/v01/images/buttons/menu-back.png" id="goBackIMG">
    17. </a>
    18. </div>


    Es wird in allen Fällen diese (recht kurze) CSS verwendet (relevant ab Zeile 47):
    Spoiler anzeigen

    PHP-Quellcode

    1. body {
    2. background: #a9a9ff;
    3. background-image: url(http://kagurame.rpg-studio.de/api/v01/images/bg.png);
    4. background-repeat:repeat-x;
    5. }
    7. .vInfo {
    8. position: fixed;
    9. font-size: 12;
    10. }
    12. #versionClient {
    13. top: 3px;
    14. left: 3px;
    15. }
    17. #versionWeb {
    18. top: 23px;
    19. left: 3px;
    20. }
    22. #content {
    23. border-radius: 19px;
    24. background-color:rgba(0,0,0,0.3);
    25. width: 1024px;
    26. height: 786px;
    27. margin-left: auto;
    28. margin-right: auto;
    29. padding: 9px;
    30. }
    32. img#logo {
    33. display: block;
    34. margin-left: auto;
    35. margin-right: auto;
    36. margin-top: 8px;
    37. padding-bottom: 18px;
    38. }
    40. img#upperLogo {
    41. display: block;
    42. margin-right: 18px;
    43. margin-left: auto;
    44. float: right;
    45. }
    47. #goBack {
    48. position: absolute;
    49. }
    51. .complexContent {
    52. height: 540px;
    53. width: 770px;
    54. overflow: auto;
    55. }


    Die Vertikale Position des fragwürdigen img wird per JS ermittelt, da ich es ohne bisher nicht hinbekommen habe, dass es immer in der unteren linken Ecke der dunklen Box dargestellt wird :/
    Gibt es dazu einen besseren Weg?

    Naja, auf jeden Fall verstehe ich nicht, warum das Element im zweiten Screen weiter rechts dargestellt wird - in allen anderen Views funktioniert es einwandfrei. Ich wäre froh, wenn mir dort jemand kurz weiter helfen könnte.

    Das einzige was noch nicht funktioniert ist das beim ersten laden das Ding meistens zu weit unten gezeichnet wird, aber da glaube ich zu wissen wo ran es liegt (Berechnung Position JS )

    Edit:
    Ich habe es gelöst (ohne JS oder so)...
    Dennoch wäre es interessant zu wissen, warum es denn nicht ging...

    Naja, ich habe einfach mal im Browser selbst die CSS-Eigenschaften bearbeitet:

    Quellcode

    1. img#goBackIMG {
    2. border-bottom-left-radius: 19px;
    3. }
    5. #goBack {
    6. position: relative;
    7. width: 1024px;
    8. margin-left: auto;
    9. margin-right: auto;
    10. top: -156px;
    11. display: block;
    12. }

    Zusätzlich habe ich das Element aus dem content-Div heraus genommen (da es ohnehin nur indirekt dazu gehört)...

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Kagu-chan“ ()

Facebook