Zwei Divs vertikal untereinander, wobei der erste dynamisch seine Größe ändern kann

luftzugdacke · 03.07.2024

Hallo alle zusammen,

Ich habe ein relativ simples Beispiel, aber aktuell steh ich wohl etwas auf dem Schlauch. Folgende Situation:
In einen Div wird ein Bild geladen, dieses Bild kann zwischen 500PX und 2000PX jede Größe haben. Direkt unter dem Bild soll dann der Titel stehen, also natürlich immer abhängig zur Höhe des ersten Divs. Ich bekomme es nicht hin, dass der zweite Div immer an der untere Kante des ersten Divs liegt. Ich möchte auch keine verschachtelten Divs haben, da ich nicht alles auf einmal ausblenden möchte bzw. möchte ich nicht alles mit dem gleichen Effekt ausblenden. Ein Traum wären zwei Divs unabhängig voneinander und der untere Div folgt immer der Größe des Divs mit dem Bild.

Ich hoffe ich habe das verständlich erklärt.

Vielen Dank und einen schönen Abend.

Sempervivum · 03.07.2024

Guten Abend und willkommen im Forum!

Direkt unter dem Bild soll dann der Titel stehen, also natürlich immer abhängig zur Höhe des ersten Divs. Ich bekomme es nicht hin, dass der zweite Div immer an der untere Kante des ersten Divs liegt.

Wie hast Du das denn versucht? Das Standardverhalten von Divs ist, dass sie übereinander liegen und das untere direkt an das obere anschließt. Ohne dass man etwas Besonderes dafür tun muss.
Oder ist das Problem, dass das obere automatisch seine Größe anpassen soll?
Versuche dies, ob es das macht, was Du dir vorstellst:

Code:

<!DOCTYPE HTML>

<html lang="de">

<head>

    <meta charset="utf-8">

    <title>Image Responsive</title>

    <style>
        figure img {
            width: 100%;
        }
    </style>

</head>

<body>
    <figure>
        <img src="images/dia0.jpg">
        <figcaption>Der Titel des Bildes</figcaption>
    </figure>
</body>

</html>

Wie Du siehst, habe ich keine Divs verwendet sondern ein figure-Tag, das ist für diesen Fall, ein Bild mit Titel dazu, semantisch angemessen. Und es muss auch kein Div oder sonst ein Container um das Bild herum sein.

luftzugdacke · 03.07.2024

Vielen Dank Sempervivum,

ich teste das morgen, aber ich habe jetzt schon ziemlich viel mit DIV Container gearbeitet und alles ist relativ weit fortgeschritten. Vor allem habe ich einige Klassen mit Position: absolute und Position: fixed. Ich denke da ist der Wurm drin. Wenn ich einen DIV Container habe und ein Bild hineinlade, dann lädt er das Image, aber obwohl ich darunter noch einen DIV habe, schiebt er den nicht mit. Beispiel:

<div><img id="URL" src=""></img></div>
<div> bla bla bla </div>

Sempervivum · 03.07.2024

Vor allem habe ich einige Klassen mit Position: absolute und Position: fixed. Ich denke da ist der Wurm drin.

Die Vermutung ist sehr berechtigt, position:absolute und position:fixed erfordern einiges an Aufmerksamkeit und sind fehleranfällig. Und in vielen Fällen nicht notwendig.
Poste am besten mal dein HTML und CSS, dann sieht man sicher schnell, woran es liegt.

luftzugdacke · 04.07.2024

Hey Sempervivum,

hier ist der simple code und tatsächlich ist es so, dass es ohne den CSS-Style theoretisch so ist wie du sagst. Div im Code unter anderem Div wird automatisch mitgeschoben, basieren auf der Größe des ersten Divs. Mit eingebundenem CSS-Style klappts nicht, dabei gehts hier nur um Animation und Font-Families. Vielleicht kannst du hier Licht ins Dunkel bringen - Bild 1 und Bild 2 musst du ersetzen mit einer URL aus dem Netz, weil ich erst ab 10 Beiträgen externe Links posten darf.

Code 1 (Mit CSS-Style) - Funktioniert nicht korrekt

<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>

<div>

<img class="fade-in-preloader" id="newsource" src=""></img>
<div class="fade-in-quote-headline"></div>
<div>asdfasdfadsf</div>

</div>

<script type="text/javascript">

var preloaderItems = [

"Bild 1",
"Bild 2"

]
// Get a random item of the "PreloaderItems"-Array
var randomPreloaderItem = preloaderItems[Math.floor(Math.random()*preloaderItems.length)]

// Set the item of the "PreloaderItems"-Array as new source
var suitableImage = document.getElementById('newsource');
suitableImage.src = randomPreloaderItem

</script>

<style>

.fade-in-preloader
{
animation: fadeIn 10s;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: fixed;
top: 50%;
left: 50%;
}

@keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>

</body>
</html>

Code 2 (Ohne CSS-Style): Funktioniert

<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>

<div>

<img id="newsource" src=""></img>
<div class="fade-in-quote-headline"></div>
<div>asdfasdfadsf</div>

</div>

<script type="text/javascript">

var preloaderItems = [

"Bild 1",
"Bild 2"

]
// Get a random item of the "PreloaderItems"-Array
var randomPreloaderItem = preloaderItems[Math.floor(Math.random()*preloaderItems.length)]

// Set the item of the "PreloaderItems"-Array as new source
var suitableImage = document.getElementById('newsource');
suitableImage.src = randomPreloaderItem

</script>

<style>

.fade-in-preloader
{
animation: fadeIn 10s;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: fixed;
top: 50%;
left: 50%;
}

@keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>

</body>
</html>

Sempervivum · 04.07.2024

Ah ja, mit CSS ist das Bild zentriert und Du möchtest, dass auch der Text bzw. Titel unter dem Bild steht, nicht wahr?
Das kannst Du sehr leicht erreichen, wenn Du die Klasse für die Animation nicht dem Bild zuweist, sondern dem Container, der das Bild und die Texte umschließt:

Code:

    <div class="fade-in-preloader">

        <img id="newsource" src=""></img>
        <div class="fade-in-quote-headline"></div>
        <div>asdfasdfadsf</div>

    </div>

luftzugdacke · 04.07.2024

Ja das habe ich auch so gehabt und funktioniert, aber: Wenn ich jetzt weiter gehen möchte und den Text später ausblenden möchte dann springt der text immer in die Mitte des bildes bzw. des Screens. Ich dachte daher ein darüberliegender Div macht vielleicht Probleme, wenn ich darin die anderen Divs einzeln ausblenden möchte.
Hier ein Beispiel:

<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body>

<div class="fade-in-preloader">

<img id="newsource" src=""></img>
<div>BlaBlaBla</div>
<div>BlaBlaBla</div>

</div>

<script type="text/javascript">

var preloaderItems = [

"Bild 1",
"Bild 2"

]
// Get a random item of the "PreloaderItems"-Array
var randomPreloaderItem = preloaderItems[Math.floor(Math.random()*preloaderItems.length)]

// Set the item of the "PreloaderItems"-Array as new source
var suitableImage = document.getElementById('newsource');
suitableImage.src = randomPreloaderItem

setTimeout(function(){
document.getElementById('newsource').className = "fade-out-preloader";
},stick_preloader_time);

</script>

<style>

.fade-in-preloader
{
animation: fadeIn 10s;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: fixed;
top: 50%;
left: 50%;
}

@keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}

.fade-out-preloader
{
animation: fadeIn 10s;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: fixed;
top: 50%;
left: 50%;
}

@keyframes fadeOut
{
0% { opacity: 1; }
100% { opacity: 0; }
}
</style>

</body>
</html>

Wahrscheinlich darf es kein position tag geben in "fade-out-preloader". hmmm ... teste ich mal. Vielleicht habe ich mir gerade selber die antwort gegeben.

Sempervivum · 04.07.2024

Da musste ich erst Mal zwei Fehler korrigieren:

Die Verzögerungszeit stick_preloader_time war nicht definiert
Für das Fadeout muss auch die Animation fadeOut genommen werden:
Code:
```
.fade-out-preloader{
animation: fadeOut 10s;
```

(Ich nehme mal an, die sind bei der Übertragung ins Forum hinein gekommen)

Dass der Text auf ein Mal zentriert wird, liegt daran, dass Du das position: fixed; mit dem Drumherum auch auf das Bild anwendest. Wenn Du es weg lässt, funktioniert es wie gewünscht, die Texte bleiben an ihrem Platz:

Code:

        .fade-out-preloader {
            animation: fadeOut 10s;
            /* -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%; */
        }

luftzugdacke · 04.07.2024

Ach super Sempervivum,

hat einwandfrei geklappt!

Fehler waren das nicht, da hat nur was vom Code gefehlt. Aber der Hinweis mit "position: fixed" war mega. Vielen lieben Dank.

luftzugdacke · 06.07.2024

Hey nochmal eine Nachfrage, ich hoffe, dass das OK ist - folgendes:

Bei diesem Code werden die DIVs wie geplant ordentlich untereinander dargestellt. Das funktioniert aktuell bei der Bildgröße von 500 x 500 Pixeln super. Lade ich ein Bild rein, dass 100 x 100 Pixel groß ist schauts anders aus (Siehe Anhang). Alles ist gleich, nur "Position: fixed" wurde benutzt. Ändere ich das zu "Position: relative" und arbeite bei den Werten Top, Left usw. mit Pixeln und nicht mit Prozenten klappt alles. Mich interessiert nur gerade warum sich das so verhält wie es sich verhält!

<div class="fade-in-preloader">

<img id="newsource" src=""></img>
<div class="fade-in-quote-headline"></div>
<div>asdfasdfadsf</div>

</div>

Mit DIESEM CSS-Code klappt alles:

animation: var(--animation_fadein_quote_headline);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: relative;
top: 25px;
left: var(--transformX_preloader);
font-family: Tahoma, sans-serif;
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
width: 100%;
text-align: center;
z-index: 200;

Mit DIESEM CSS-Code klappts nicht, wenn die Bildgröße sich ändert:

animation: var(--animation_fadein_quote_headline);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: fixed;
top: 103%;
left: var(--transformX_preloader);
font-family: Tahoma, sans-serif;
color: rgba(255, 255, 255, 0.3);
font-size: 13px;
width: 100%;
text-align: center;
z-index: 200;

Hier gehts garantiert einfach nur um fehlendes Wissen in Bezug auf "fixed" und "relative".

Vielen Dank für eure Hilfe und einen schönen Tag.

Andreas

Sempervivum · 06.07.2024

Hallo Andreas!
Was "fixed" und "relative" betrifft, das kannst Du hier nachlesen:
https://www.w3schools.com/css/css_positioning.asp

Die gängige Anwendung sieht so aus: Mit "relative" legt man fest, dass das Element der Bezugspunkt für ein anderes Element darin ist, das mit "position:absolute" absolut positioniert wird. Bei "position:fixed" wird die Position jedoch relativ zum Viewport bzw. dem Browserfenster fest gelegt, deshalb ist dabei "position:relative" für das Elternelement nicht erforderlich.

Du schreibst, dass mit dem ersten CSS bei dir alles klappt. Bei mir tut es das leider nicht. Erst Mal musste ich die Variablen ersetzen:

Code:

        .fade-in-preloader {
            animation: fadeIn 10s;
            /* animation: var(--animation_fadein_quote_headline); */
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: relative;
            top: 25px;
            left: 25px;
            /* left: var(--transformX_preloader); */
            font-family: Tahoma, sans-serif;
            color: rgba(255, 255, 255, 0.3);
            font-size: 13px;
            width: 100%;
            text-align: center;
            z-index: 200;
        }

Damit hängt dann jedoch das Bild links oben in der Ecke und ist, wegen "translate(-50%, -50%)" halb verdeckt.

Lasse ich das CSS so, wie ich es in meiner Testdatei von deinen früheren Postings hatte, ist alles OK, Bild und Text sind horizontal und vertikal zentriert, egal wie groß das Bild ist:

Code:

        .fade-in-preloader {
            animation: fadeIn 10s;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
        }

Bei deinem zweiten CSS, das nicht funktioniert, sehe ich das Problem, dass Du "top" auf 103% gesetzt hast. Damit wird das Bild an den unteren Rand des Browserfensters verschoben.

luftzugdacke · 06.07.2024

Hmmm, also bei klappt das, aber das sind auch nur Ausschnitte aus dem Code und mir geht's auch gerade mehr um relative und absolute. Also ein elelemt, wie ein simpler DIV ohne Verschachtelung und ohne Bezug auf etwas anderes kann nicht mit relativ platziert werden? Der zweite DIV unter dem IMG Tag zum Beispiel:

<img id="newsource" src=""></img>
<div class="fade-in-quote-headline"></div>
<div>asdfasdfadsf</div>

luftzugdacke · 06.07.2024

Ich dachte immer relativ bedeutet, vom Wortursprung her einfach, relativ in Bezug zu dem DIV der drumherum liegt. Was heißt denn bzw. was ist denn die "normal Position"?

"An element with position: relative; is positioned relative to its normal position."

Sempervivum · 06.07.2024

Also ein elelemt, wie ein simpler DIV ohne Verschachtelung und ohne Bezug auf etwas anderes kann nicht mit relativ platziert werden?

Doch, kann es. Beim "position:relative" positioniert man in Bezug auf das Element selbst. Bei position:absolute ist dagegen das Elternelement der Bezug, wie Du geschrieben hast:

vom Wortursprung her einfach, relativ in Bezug zu dem DIV der drumherum liegt.

luftzugdacke · 07.07.2024

Gecheckt ... ist aber irgendwie immer ein "Try & Error"- Prinzip. Manchmal zumindest. Überhaupt finde ich CSS zwar sehr cool, aber auch umständlich. Vor allem, wenn man selber coded und das ohne WYSIWYG Editor. Aber das ist ja oft so beim Programmieren / Scripten. Auch jetzt habe ich mal wieder eine kleine Frage an euch und da das alles mit dem gleichen Thema zu tun hat, dachte ich, dass es sinn macht den Thread hier vorzuführen. Also, Weil wir gerade von umständlich sprechen: Entweder habe ich mir hier einfach eine "Tricky" Aufgabe gestellt oder ich stell mich einfach irgendwie an - HA HA! Von Editoren bin ich absolut gewohnt, dass die Größe eines Divs oder eine Gruppe automatisch an die maximale Größe des Inhalts angepasst wird. Tut es prinzipiell auch, wenn man ein Bild größer skaliert, aber wenn ich es kleiner skaliere dann leider nicht und genau das macht mich langsam wahnsinnig!

Mal wieder ein simpler Task für euch, aber ich muss wirklich dazu sagen, dass ich auch hier wieder seit Stunden versuche, dass Problem selber zu lösen, also folgendes: Das Bild im Anhang hat von mir eine Dotted Line bekommen, weil ich einfach nicht verstehen konnte, warum der Text unter dem Bild so weiter darunter ist obwohl ich das Bild nur von 1 auf 0.5 skaliert habe. Ich dachte dann eben auch, dass die maximalen Ausmaße des IMG Tags angepasst werden. Tun sie aber nicht, die IMG-Borders bleiben so wie das Bild in der Originalgröße war. Gestrichelte Linie ist Originalgröße und der Text wird daher auch korrekt platziert, nur eben nicht, wenn das Bild kleiner skaliert wird. Wie fixed man denn so etwas?

Nach wie vor ist das der Code für die DIVs und den IMG-Tag:

<div id="" class="fade-in-preloader">

<img id="newsource" src=""></img>
<div id="add_quote_headline" class="fade-in-quote-headline"></div>
<div id="add_quote" class="fade-in-quote"></div>

</div>

und für "newsource" habe ich ein simples CSS eingebunden:

#newsource
{
transform: scale(0.5);
}

Immerhin lerne ich hier in dem Forum einiges dazu von daher: Vielen lieben Dank mal wieder für eure Hilfe.

Sempervivum · 07.07.2024

Das ist auf den ersten Blick wirklich überraschend, aber man muss akzeptieren, dass es so ist: Wenn man ein Bild oder ganz allgemein ein Element mit transform verändert bleibt die Größe, die es auf der Seite einnimmt, so wie sie ursprünglich war. Der Grund ist vermutlich dieser: Stell dir vor, man dreht das Bild um 45°, dann überschreiten die Ecken den ursprünglichen Raum. Wie sollte man die Größe dann fest legen? Ebenfalls vergrößern? Und was macht man, wenn man es animiert und sich drehen lässt? Dann müsste man dynamisch laufend die Größe verändern. Du siehst, man würde vom Hundertsten ins Tausendste kommen, wenn man versuchen würde, die Größe an den neuen Zustand anzupassen.
Meistens will man jedoch, dass sich ein Bild an den verfügbaren Raum anpasst und dann ist transform nicht der richtige Weg sondern man setzt z. B. die Breite auf 100%.

luftzugdacke · 07.07.2024

OK, das ist nicht die Antwort die ich hören wollte.

Aber egal! HA HA!

Wie kann man denn dann aber den Text wieder höher bringen, also relativ zu der Größe der Dotted Line?

Sempervivum · 07.07.2024

Mir ist noch nicht ganz klar, was genau dein Ziel ist. Kannst Du ein grobes Bild zeichnen, wie es aussehen soll?

Sempervivum · 07.07.2024

Vermutung: Du hast ein Bild, das zu groß ist und möchtest es kleiner anzeigen als es in Wirklichkeit ist? Dann besteht eine Lösung darin, die Größe des umschließenden Containers festzulegen und dem Bild eine Breite von 100% zu geben:

Code:

        .fade-in-preloader {
            /* Breite dieses Containers auf 80% des umschließenden
            (body) einstellen: */
            width: 80%;
            animation: fadeIn 10s;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
        }

        .fade-in-preloader img {
            /* Das Bild soll sich an die Breite des
            umschließenden Containers anpassen: */
            width: 100%;
        }

luftzugdacke · 07.07.2024

Ja das teste ich auch mal! Cool, danke!

Was ich genau will erkläre ich nochmal anhand zweier Bilder, die genau mein Problem darstellen:

1.) So soll es sein und ist es auch bei scale 1.0, also Originalgröße - Die Distanz zwischen dem Bild und dem Text soll so sein.

2.) So ist es aber, wenn das Bild kleiner Skaliert wird, ganz einfach deshalb, weil die Bounding Box / Container Size immer noch so groß ist wie das Original. Das eigentliche Bild selber ist aber kleiner. Der Text sollte jetzt eigentlich bei der Lila Farbe sein, so mein Ziel. Er behält aber immer die Distanz bei und das möchte ich nicht.