Div an Bild ausrichten


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.

HTML:
<div class="div_display">
<img class="display" src="../files/grundbild.png" alt="Bild nicht gefunden"/>
<div class="contentDisplay"></div>   
</div>
CSS:
.div_display{
    width: 100%;
    height: 100%;
    position: absolute;
}

.contentDisplay {
    background-color: grey;
    width: 42.6%;
    height: 71%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 10;
    margin-top: 58px;
}

.display{
    width: auto;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
}

:)
 

Anhänge

boecoa13

Grünschnabel
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/
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:

Pack doch contentDisplay in div_display und richte die Abstände mit Margin aus.
dann habe ich leider noch immer das gleiche Problem wie bei Sempervivum :(


hoffe ihr versteht was ich meine:rolleyes:
 

Sempervivum

Erfahrenes Mitglied
nur, dass der Inhalt auch beim Verändern der Größe des Browserfensters immer noch so ausgerichtet und nicht alles irgendwo verschoben sein soll
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.
 

Neue Beiträge