Responsive Reaktion bei schmalem Display

lagraf · 23. Juli 2020

Hallo Leute,

ich spiele mich schon seit 2 Tagen mit einem responsive Design, welches auf breiten Displays 2 Blöcke nebeneinander darstellt (links Modeldaten, rechts Foto). Dabei soll der Block "box_size" auf der Unterkante des Fotos abschließen, unabhängig davon, wieviele Zeilen er beinhaltet (vertical-align: bottom oder bottom: 0px), was ich aber nicht hinbringe.

Wird das Browserfenster in der Breite verkleinert, springen die Blöcke um, wobei einige Layoutänderungen erfolgen sollen:

Der Leerraum vor Block "box_name", zwischen "box_name" und "box_size" und nach "box_size" soll verschwinden. Letzterer wird wahrscheinlich durch korrektes Anbringen von vertical-align: bottom oder bottom: 0px schon weg sein.
Die Textblöcke "box_name" und "box_size" sollen zentriert über dem Foto stehen und der Text zentriert sein.

Ich habe ein minimales Testfile erstellt und zur Erleichterung die Blöcke farbig hinterlegt. Vielleicht hat jemand Lust und kann mir dabei weiterhelfen.

LG

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style>
/* magenta */
body { margin: 0; background-color: #ffc0ff; color: black; font-size: 16px; font-weight: 400; line-height: 1.5; }
/* violett */
.main-content { padding: 5; background-color: #c0c0ff; }
/* türkis */
.page { padding: 10; background-color: #c0ffff; }
/* hellgrün */
.container { margin-right: auto; margin-left: auto; padding: 15; *zoom: 1; background-color: #c0ffc0; }
.container:after { content: " "; clear: both; display: block; overflow: hidden; height: 0; }

/* hellgelb */
.box {float: left; height: 494px; margin-right: 2%; padding: 20px; -moz-box-sizing:border-box; box-sizing: border-box; background-color: #ffffc0; }
.box:first-child { width: 39%; min-width: 200px; text-align: right; }
.box:last-child { width: 59%; min-width: 380px; margin-right: 0; }
.box_name { padding: 0; margin: 0; font-size: 200%; margin-top: 160px; background-color: #ffc0c0; }
.box_size { bottom: 0px; background-color: #ffc0c0; }
.box_size span { font-size: 80%; }

/* hellrosa */
.box_foto { position: relative; height: 454px; width: auto; background-color: #ffc0c0; }
</style>

<body>

<main class="main-content">
    <div class="page">
        <div class="container">

            <div class="box">
                <div class="box_name">Sarah</div>
                <br>
                <div class="box_size">
                    <div>178cm size 34</div>
                    <div>88-62-92 C75</div>
                    <div>shoes 38</div>
                    <div>&nbsp;</div>
                    <span>specials: Tattoos / Narben</span>
                </div>
            </div>

            <div class="box">
                <div class="box_foto">
                    <img src="http://www.rachbauer.org/test/Visage-white/dummy/adina_big.jpg" style="height: 454px; width: auto;">
                </div>
            </div>

        </div> <!-- container -->
    </div> <!-- page -->
</main>

</body>
</html>

Alles anzeigen

Sempervivum · 23. Juli 2020

Ich sehe da ein float. Daher die übliche (fast schon reflexhafte) Empfehlung: Mach dich mit Flexlayout vertraut und realisiere dein Layout damit. Damit kann man viele Anforderungen viel leichter umsetzen.

% statt px ist schon mal ein guter Ansatz aber mit Flex kann man auf viele solcher Berechnungen und Größenangaben auch verzichten.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

lagraf · 25. Juli 2020

Mit Flex würde das Layout so aussehen:

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<style>
/* magenta */
.content { display: flex; flex-wrap: wrap; padding: 5px; justify-content: center; background-color: #ffc0ff; }

/* violett */
.col { display: flex; flex-direction: row; padding: 10px; background-color: #c0c0ff; }

/* türkis */
.box { padding: 15px; background-color: #c0ffff; }
.box_foto { position: relative; padding: 15px; background-color: #c0ffff; }

/* rosa */
.box_name { padding: 5px; margin: 0; font-size: 200%; margin-top: 160px; text-align: right; background-color: #ffc0c0; }
.box_size { padding: 5px; vertical-align: bottom; margin-bottom: 15px; text-align: right; background-color: #ffc0c0; }
.box_size span { font-size: 80%; }

/* Plus im Kreis */
#toggle { position: absolute; height: 32px; top: 20px; left: 25px; opacity: 0.7}
#toggle:hover { cursor: pointer; }
</style>

<body bgcolor="grey">
    <div class="content">
        <div class="col">
            <div class="box">
                <div class="box_name">Sarah</div>
                <br>
                <div class="box_size">
                    <div>178cm size 34</div>
                    <div>88-62-92 C75</div>
                    <div>shoes 38</div>
                    <div>&nbsp;</div>
                    <span>specials: Tattoos / Narben</span>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="box_foto">
                <img src="http://www.rachbauer.org/test/Visage-white/dummy/adina_big.jpg" height=454>
                <img id="toggle" src="http://www.rachbauer.org/test/Visage-white/images/kreis_plus.png">
            </div>
        </div>
    </div>
</body>
</html>

Alles anzeigen

Allerdings habe ich dabei die gleichen Probleme wie im ursprünglichen Layout wenn die Browserbreite kleiner wird und das Layout umspringt:

Der Text in "box" soll zentriert erscheinen
Der vertikale Freiraum in "box" soll verschwinden

Außerdem soll der Block "box_size" sich am unteren Rand des Div befinden (vertical-align bzw. margin-bottom). Das sind alles keine Probleme mit der Entscheidung flex oder nicht flex zusammenhängen.

Wie kann man das steuern?

Lupus_III · 25. Juli 2020

Du solltes mal in Deinen Styles diesen Code benutzen

@media screen and (max-width: xxxpx) {
/* Breite beträgt höchstens xxx px */
.content .col .box .box_name {

hier kommen deine Parameter rein

}

.content .col .box .box_size {

hier kommen deine Parameter rein

}

xxxp = bei welcher Bildschirmgröße die CSS-Anweisungen verändert werden sollen. Ich denke mit Änderungen der margins, paddings und text-align sollte es gelingen.

Sempervivum · 25. Juli 2020

Zitat

Der vertikale Freiraum in "box" soll verschwinden

Das kannst Du erreichen, indem Du Flex konsequent einsetzt:

Statt eines festen vertikalen Abstandes:

Code

.box_name {
    padding: 5px;
    margin: 0;
    font-size: 200%;
    /* margin-top: 160px; */
    text-align: right;
    background-color: #ffc0c0;
}

die beiden Container mit Flex vertikal zentrieren:

Code

.box {
    padding: 15px;
    background-color: #c0ffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Zitat

Außerdem soll der Block "box_size" sich am unteren Rand des Div befinden

Auch kein Problem mit auto-margin in der Vertikalen:

Code

.box_name {
    padding: 5px;
    margin: 0;
    font-size: 200%;
    /* margin-top: 160px; */
    text-align: right;
    background-color: #ffc0c0;
    margin-top: auto;
    margin-bottom: auto;
}

Zitat

Der Text in "box" soll zentriert erscheinen

Dafür musst Du dann wohl eine Mediaquery verwenden, wie von Lupus_III beschrieben.

BTW: Dies ist ein klassischer Anwendungsfall für das figure-Tag:

https://wiki.selfhtml.org/wiki…Textstrukturierung/figure

lagraf · 27. Juli 2020

Wenn ich sempervivums Code von .box und .box_name verwende, dann steht der ganze Block (.box_name und .box_size) am unteren Rand des Fotos. Es soll aber .box_name mittig und nur .box_size am unteren Rand des Fotos stehen. Die Anweisungen margin-top: auto und margin-bottom: auto ändern nichts. Müßte nicht zusätzlich .box_size positioniert werden?

Die Mediaquery habe ich eingebaut:

Code

.box { padding: 15px; padding-bottom: 0px; display: flex; flex-direction: column; justify-content: center; background-color: #c0ffff; }
.box_name { padding: 5px; margin: 0; font-size: 200%; text-align: right; margin-top: auto; margin-bottom: auto; background-color: #ffc0c0; }
.box_size { padding: 5px; text-align: right; vertical-align: bottom; margin-bottom: 15px; background-color: #ffc0c0; }
.box_size span { font-size: 80%; white-space: nowrap; }

@media screen and (max-width: 608px) { .box_name, .box_size { text-align: center; } }

608 ist genau die Breite, wo die Columns umspringen. Ist gewährleistet, dass die Angabe von 608 auf allen Geräten und Browsern passt oder sollte man die Columns händisch schon vorher, z.B. bei 768 zum umspringen zwingen? Wie würde man das anstellen?

figure hilft mir bei diesem Foto nichts, denn der Name und die Modeldaten sollen genauso dargestellt werden, wie gewünscht. Allerdings kann ich figure in der Übersicht der gesamten Models gut verwenden.

Wird flex nur von neuen Browsern unterstützt?

Sempervivum · 27. Juli 2020

Zitat

Wenn ich sempervivums Code von .box und .box_name verwende, dann steht der ganze Block (.box_name und .box_size) am unteren Rand des Fotos. Es soll aber .box_name mittig und nur .box_size am unteren Rand des Fotos stehen. Die Anweisungen margin-top: auto und margin-bottom: auto ändern nichts.

Einen Hinweis hatte ich noch vergessen: In deinem HTML fehlt der Doctype: <!doctype html> Mein Browser (Opera) zeigt das Layout auch ohne richtig an, aber möglicher Weise sieht deiner das strenger. Sieht dann so aus:

html-seminar.de/woltlab/attachment/2567/

Wenn es bei dir nicht so aussieht, dann poste mal, welchen Browser Du benutzt.

Zitat

figure hilft mir bei diesem Foto nichts, denn der Name und die Modeldaten sollen genauso dargestellt werden, wie gewünscht.

Auch mit dem figure-Tag kannst Du die Elemente genau so darstellen. Sind ja nur andere Namen für die Container.

lagraf · 28. Juli 2020

Auch doctype ändert nichts, der Block .box steht entweder zentriert (justify-content: center) oder unten (justify-content: flex-end) bei .col, aber immer der gesamte Block (.box_name und .box_size).

Ich habs probiert mit

Google Chrome Version 84.0.4147.105 (Offizieller Build) (32-Bit) und

Firefox 78.0.2 (32-Bit)

Ich stelle nochmal die aktuellen Styles rein, vielleicht habe ich was übersehen:

Code

/* magenta */
.content { display: flex; flex-wrap: wrap; padding: 5px; justify-content: center; background-color: #ffc0ff; }

/* violett */
.col { display: flex; flex-direction: row; align-self: center; padding: 10px; background-color: #c0c0ff; }

/* türkis */
.box { display: flex; flex-direction: column; justify-content: center; padding: 15px; padding-bottom: 0px; background-color: #c0ffff; }
.box_foto { position: relative; padding: 15px; background-color: #c0ffff; }

/* rosa */
.box_name { padding: 5px; margin: 0; font-size: 200%; text-align: right; margin-top: auto; margin-bottom: auto; background-color: #ffc0c0; }
.box_size { padding: 5px; text-align: right; vertical-align: bottom; margin-bottom: 15px; background-color: #ffc0c0; }
.box_size span { font-size: 80%; white-space: nowrap; }

@media screen and (max-width: 608px) { .box_name, .box_size { text-align: center; } }

Alles anzeigen

Sempervivum · 28. Juli 2020

Die Ausrichtung, Name in der Mitte und Infos unten, funktioniert nur, wenn freier Raum vorhanden ist. Mit dem align-self machst Du das zunichte. Wenn ich das deaktiviere, ist die Darstellung sofort OK:

Code

.col {
    display: flex;
    flex-direction: row;
    /* align-self: center; */
    padding: 10px;
    background-color: #c0c0ff;
}

lagraf · 28. Juli 2020

Super, jetzt klappt es!

Vielen Dank!

Responsive Reaktion bei schmalem Display

Jetzt mitmachen!

Teilen

Tags