Responsive Funktion bei Div's mit z-index

  • Hallo,


    Ich bin gerade am verzweifeln^^


    Ich habe einen Rahmen, in welchen sich überlappende Grafiken befinden (ähnlich wie hier die Karten: http://de.html.net/tutorials/css/lesson15.php )


    Jetzt will ich natürlich das gesamte Design des Projekt gleich responsiv machen was ja kein Problem ist (alles andere funktioniert ja auch)



    Im Headbereich sämtlicher Quatsch drin.. <meta name="viewport" content="width=device-width, initial-scale=1.0"> usw..




    usw.


    HTML:


    <div id="wrapper">
    <div id="grafik1"><img src="a1.jpg"></div>
    <div id="grafik2"><img src="a2.jpg"></div>
    </div>



    Jetzt ist es so, das diese Div's (#grafik1, #grafik2 usw.) mit den Grafiken drin, sich bei kleineren Bildschirmen nicht verkleinern---die bleiben stur auf ihrer Größe/Breite.


    Liegt es daran, das diese eine left und top Angabe haben? Geht das dann überhaupt responsiv? Das wäre schlecht weil alle Grafiken nebeneinander eine Breite von über 1600px hätten...


    Bei anderen Elementen auf der Seite funktionert alles ohne Probleme bis auf die Sachen mit den z-index...?

  • Da fehlt jeweils der Doppelpunkt nach dem "top".
    Ich habe deinen Code in eine Testseite eingebaut und ich kann machen was ich will, die Größen verändern sich einwandfrei abhängig von der Fensterbreite. Das Problem muss woanders liegen. Woanders eine CSS-Definition mit höherer Priorität, u. U. als Inlinestyle?
    Am besten postest Du mal die URL deiner Seite.

  • Ich glaube jetzt hab ich es ganz zerschossen^^


    Jetzt gehts auf mobilen Geräten gar nicht mehr ;(


    Ich mach erstmal ne Pause um den Kopf freizubekommen ;)


    Kannst es dir ja mal anschauen - bitte nicht auf das andere "Drumherum" schauen - ist erstmal nur ne Testseite ;)


    (Die einzelnen "Flächen" für die z-index Sachen werden durch PHP - einer While-Schleife erstellt - also die Daten wie left, top, z-index, grafiken usw. werden aus einer Datenbank gelesen... falls das wichtig ist)


    -> http://www.die-zunftmeister.de/game/game_on.php

  • So sieht bei mir momentan auf dem Desktop PC aus: So soll es auch aussehen...


    [Blockierte Grafik: http://www.die-zunftmeister.de/game/unbenannt.jpg]



    Aufm Handy schauts so aus: :cursing:


    [Blockierte Grafik: http://www.die-zunftmeister.de/game/screen.png]



    Auf mobilen Geräten soll es natürlich schon so aussehen wie auf dem Desktop-PC


    Ich hatte es auch mal soweit aber man mußte halt nach links und rechts auf dem Handy scrollen... Soll natürlich nicht sein.. die Map soll sich der Größe der versch. Bildschirme anpassen - tuts aber nicht! Die Menüs tun das nur alles was im map_wrapper drin ist nicht... die einzelnen Felder mit den Rohstoffgrafiken drin bleiben stur in ihrer Breite und Höhe...


    Weisst was ich meine?

  • Verstehe. So wie auf dem oberen Bild sieht es bei mir auf dem Desktop auch aus. Selbst wenn es gelingt, das Ganze responsiv zu mächen, so dass es vollständig auf den Bildschirm einen Handys passt, wird es doch dann so klein, dass man kaum noch etwas erkennen kann?
    Sieht so aus, als ob es ein Spiel werden soll?

  • Zitat

    wird es doch dann so klein, dass man kaum noch etwas erkennen kann?

    Jeep..ich weiß...


    allerdings hab ich keine Idee für eine andere Lösung...


    Man müßte dann halt im Handy alles vergrößern...


    Aber so wie es jetzt aufm Handy aussieht, kann ich es nicht lassen :)




    Jeep.. wird ein Spiel - das war vor einigen Jahren schonmal online aber jetzt möchte ich mein altes Projekt wieder neu umsetzen/starten


    Hab mir da ja was vorgenommen, da ich alles selber mache (Programmierung, Grafiken usw) - aber ein Hobby muß der Mensch ja haben :D

  • Wenn ich dem .field mit den Developertools eine relative Breite gebe:

    Zitat

    .field { max-width: 200px; height: auto; position: absolute; max-width: 10%;}


    und dem #map_wrapper ebenfalls:

    Zitat

    #map_wrapper { left: 50%; max-width: 1790px; margin-left: -895px; top: 0px; bottom: 0px; right: 0px; /* position: absolute; */ width: 100%;}

    passt sich die Breite der Grafiken an die Bildschirmbreite an. Das ist jedoch nur die halbe Miete, denn jetzt müsstest Du auch die Positionen relativ definieren und die Prozentwerte mit deinem PHP berechnen.
    Edit: Ich kann machen, was ich will, das Forum verschluckt konsequent die Zeilenumbrüche!

  • Also die einzelnen Felder passen sich jetzt an - Vielen Dank!


    Versteh ich das richtig, das ich die einzelnen Felder nicht mehr absolute positioneren soll sondern relative und top und left, welche aus der Datenbank gelesen werden jetzt Prozentangaben und nicht in Pixel machen muß?


    Ohje.. ;)

  • Nein, ich meinte weiterhin absolut positionieren und nur die Position top und left dynamisch mit Prozentangaben. Wenn es mit absoluten Werten möglich war, müsste es doch möglich sein, auch für die relativen Werte einen Algorthmus zu schreiben.

    Zitat

    left_relativ = (left_absolut / width_containter) * 100 . '%';

  • Okay... da mußt ich die Felder neu berechnen und eintragen.. dat dauert ein bissl...


    Wehe das funktionert nicht!!! :cursing: :D


    Und nochmal vielen Dank für die Hilfe bisher! :thumbup:

  • Ich habe die Map noch "etwas" ausgebaut - größer gemacht und das die einzelnen Felder noch ein wenig auseinander liegen...


    Im Handy ist es natürlich unmöglich zu steuern.. :S


    Ein bissl "Grafik" ist auch schon hinzu gekommen, obwohl ich da noch nicht richtig zufrieden bin (Hintergrund/Bäume)
    http://www.die-zunftmeister.de/game/game_on.php


    Wollte auch nochmal Danke für die Hilfe sagen! Beim nächsten Mal weiß ich Bescheid! :D