1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Div an Bild ausrichten

Dieses Thema im Forum "CSS" wurde erstellt von boecoa13, 4. September 2017.

  1. boecoa13

    boecoa13 Grünschnabel

    Hallo,

    habe folgendes Problem:
    ich habe ein Div erstellt in dem in der Mitte ein Bild von einem Handy ist und nun brauche ich über dem Handy noch ein Div.
    Soweit so gut. Allerdings muss das Div welches über dem Handy ist, genau an den Displaybereich des Handys angepasst werden, da dort später dann noch diverser Inhalt folgen wird. Zum besseren Verständnis ist noch ein Bild angefügt wie es schlussendlich ausschauen soll (abgesehen von den Farben :D)
    Das Div über dem Bildschirm soll sich je nach Veränderung des Browserfensters und somit auch je nach Veränderung der Größe des Handys ebenso wieder anpassen und gleich positioniert sein wie bei meinem Beispiel.

    Code (HTML5):
    1. <div class="div_display">
    2. <img class="display" src="../files/grundbild.png" alt="Bild nicht gefunden"/>
    3. <div class="contentDisplay"></div>  
    4. </div>
    Code (CSS):
    1. .div_display{
    2.     width: 100%;
    3.     height: 100%;
    4.     position: absolute;
    5. }
    6.  
    7. .contentDisplay {
    8.     background-color: grey;
    9.     width: 42.6%;
    10.     height: 71%;
    11.     margin-left: auto;
    12.     margin-right: auto;
    13.     left: 0;
    14.     right: 0;
    15.     position: absolute;
    16.     z-index: 10;
    17.     margin-top: 58px;
    18. }
    19.  
    20. .display{
    21.     width: auto;
    22.     height: 100%;
    23.     margin-left: auto;
    24.     margin-right: auto;
    25.     left: 0;
    26.     right: 0;
    27.     position: absolute;
    28. }

    :)
     

    Anhänge:

  2. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wie ist das zu verstehen? Soll dieses div das Bild überdecken, so dass es aussieht, als ob sein Inhalt auf dem Bildschirm des Handys angezeigt wird?
    https://jsfiddle.net/Sempervivum/5thkwjd6/3/
     
    Zuletzt bearbeitet: 5. September 2017
  3. FormFollowsFunction

    FormFollowsFunction Grünschnabel

    Pack doch contentDisplay in div_display und richte die Abstände mit Margin aus.
     
  4. boecoa13

    boecoa13 Grünschnabel

    Ja genau so, nur, dass der Inhalt auch beim Verändern der Größe des Browserfensters immer noch so ausgerichtet und nicht alles irgendwo verschoben sein soll :confused:

    dann habe ich leider noch immer das gleiche Problem wie bei Sempervivum :(


    hoffe ihr versteht was ich meine:rolleyes:
     
  5. Sempervivum

    Sempervivum Erfahrenes Mitglied

    Wenn ich dich richtig verstehe, soll auch der Text im Div seine Größe ändern, so dass das Erscheinungsbild immer gleich ist, d. h. die Zeilenumbrüche sollen immer an der gleichen Stelle sein? Berücksichtige, dass sich dann die Lesbarkeit bei kleinem Bildschirm verschlechtert.
     
  6. boecoa13

    boecoa13 Grünschnabel

    Ja genau das meine ich :)
     
  7. Sempervivum

    Sempervivum Erfahrenes Mitglied

  8. FormFollowsFunction

    FormFollowsFunction Grünschnabel

    Das sieht doch gut aus ! :)
    Ab 30% und weniger, bekomme ich allerdings den Scrollbalken zu sehen.
     
  9. Sempervivum

    Sempervivum Erfahrenes Mitglied

  10. boecoa13

    boecoa13 Grünschnabel

    Vielen vielen Dank, ist genau das was ich erreichen wollte :):):)
     
Die Seite wird geladen...