Newbie in Sachen Grid und div

Sempervivum

Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.

@all: Ist da schon jemand dran?

basti1012

Ja aber ich kann das nicht so gut sehe hier https://jsfiddle.net/2g4mgg1m/1/ .Auserdem ist meine Vorstellungs Kraft nicht so gut wie das aussehen tut.Und ohne Originalbilder kann ich das sowieso nicht gut.

Mach du mal Sempervivum ,du kannst das besser als ich.

Sempervivum

Ich habe da mal schnell etwas ausgearbeitet. Hoffe, ich habe deine Beschreibung richtig verstanden. Farben, Abstände etc. muss Du noch verfeinern. Und natürlich die Bilder gegen deine austauschen. Wenn es nicht passt, melde dich wieder.

Code

<body>
    <style>
        body {
            display: flex;
            flex-direction: row;
        }

        .container {
            display: flex;
            flex-direction: column;
            flex-basis: 50%;
        }

            .container figure {
                display: inline-block;
                width: calc(100% - 20px);
                margin: 10px;
                position: relative;
            }

                .container figure img {
                    width: 100%;
                    height: auto;
                    vertical-align: top;
                }

                .container figure figcaption {
                    text-align: center;
                    width: 80%;
                }

        img.logo.left {
            align-self: flex-start;
        }

        img.logo.right {
            align-self: flex-end;
        }

        img.logo {
            margin: 10px;
            max-width: 80%;
        }
        .overlay {
            position: absolute;
            width: 80%;
            bottom: 0;
            text-align: center;
            background-color: rgba(0,0,0,0.4);
            color: white;
        }
        .overlay.left {
            left: 0;
        }
        
        .overlay.right {
            right: 0;
        }
    </style>
    <div class="container" id="left">
        <img class="logo left" src="images/catimage11.png" />
        <figure>
            <img src="images/dia0.jpg" />
            <figcaption class="overlay left">Overlay links</figcaption>
        </figure>
    </div>
    <div class="container" id="right">
        <img class="logo right" src="images/catimage12.png" />
        <figure>
                <img src="images/dia1.jpg" />
                <figcaption class="overlay right">Overlay rechts</figcaption>
        </figure>
    </div>
</body>

Alles anzeigen

basti1012

Das finde ich ja interesant

Code

<figure>
            <img src="images/dia0.jpg" />
            <figcaption>Dies ist die Bildbeschriftung</figcaption>
            <div class="overlay">Overlay links</div>
        </figure>

Im Html steht die Beschriftung unten ,obwohl im Quelltext oben ist.Wie kommt den das? Konnte in der Css auch kein Hinweiss drüber finden. Oder bringt das das neue HTML5 das schon mit sich ?

Sempervivum

Der Grund ist, dass ich das Overlay absolut positioniert habe mit top:0 an der oberen Kante. Generell ist zwar zu empfehlen. auf abs. Pos. zu verzichten, aber wenn man Elemente überdecken will wie bei einem Overlay ist es doch angebracht.

Man kann aber auch die Reihenfolge der Elemente bei Flexbox ändern durch das Attribut "order".

Sempervivum

Warum nicht auch für die Logos figure-Tags benutzen?

Ich habe versucht, es anzupassen. Schau, ob es jetzt deine Anforderungen trifft:

Code

<style>
        h1 {
            font-size: 30px;
        }

        h2 {
            font-size: 24px;
        }

        h3 {
            font-size: 16px;
            display: inline-block;
        }

        body {
            display: flex;
            flex-direction: row;
            font-family: arial;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            flex-basis: 50%;
        }

            .container.left {
                background-color: #fff;
            }

            .container.right {
                background-color: #333;
            }

            .container figure.bottom {
                margin: 0;
                padding: 0;
                display: inline-block;
                width: 100%;
                position: relative;
            }

                .container figure.bottom img {
                    width: 100%;
                    height: auto;
                    vertical-align: top;
                }

                .container figure.bottom figcaption {
                    text-align: left;
                    width: 80%;
                }

        figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        figure.logo.left {
            justify-content: flex-start;
            color: #333;
        }
        figure.logo.right {
            justify-content: flex-end;
            color: white;
        }
        figure.logo.left figcaption {
            padding-right: 10px;
        }
        figure.logo.right figcaption {
            text-align: right;
            padding-left: 10px;
        }
        figure {
            margin: 0;
            padding: 0;
        }

        img.logo {
            margin: 20px;
            max-width: 80%;
        }

        .overlay {
            position: absolute;
            width: 80%;
            bottom: 0;
            left;
            color: white;
        }

            .overlay.left {
                left: 0;
                background-color: rgba(245, 130, 32, 1.0);
            }

            .overlay.right {
                right: 0;
                background-color: rgba(102, 174, 64, 1.0);
            }
    </style>
    <div class="container left">
            <figure class="logo left">
                <img class="logo left" src="images/buttonleftp.png" alt="Hauff Ladenbau Logo" />
                <figcaption>
                    <h3>
                        Digitale Verkaufslösungen für den Baustoffhandel
                    </h3>
                </figcaption>
            </figure>
            <figure class="bottom">
                <img src="images/dia0.jpg" alt="Hauff Digital" />
                <figcaption class="overlay left">
                    <h3>
                        Wir planen und bauen erfolgreiche Verkaufsausstellungen.
                        Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.
                    </h3>
                </figcaption>
            </figure>
    </div>
    <div class="container right">
        <figure class="logo right">
            <figcaption>
                <h3>
                    Digitale Verkaufslösungen für den Baustoffhandel
                </h3>
            </figcaption>
            <img class="logo right" src="images/buttonrightp.png" alt="Hauff Ladenbau Logo" />
        </figure>
        <figure class="bottom">
            <img src="images/dia1.jpg" alt="Hauff Digital" />
            <figcaption class="overlay right">
                <h3>
                    Wir planen und bauen erfolgreiche Verkaufsausstellungen.
                    Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.
                </h3>
            </figcaption>
        </figure>
    </div>

Alles anzeigen

Sempervivum

PS: Sollten die Overlays nicht halbtransparent sein? Würde ich hübscher finden.

basti1012

den Background hätte ich so gemacht ,da währe das problem nicht mit höhe und co

Aber jetzt zu ändern währe auch sinnlos

Code

body{
    background-image:linear-gradient(to left, white 50%, #333 50%);
  margin: 0px;
  padding: 0px;
}

mit dein Bildabstand von Links . Versuch doch mal das .

Code

padding-left;50px;

basti1012

Code

figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        figure.logo.left {
            justify-content: flex-start;
            color: #333;
        }
        figure.logo.right {
            justify-content: flex-end;
            color: white;
        }
        figure.logo.left figcaption {
            padding-right: 10px;
        }
        figure.logo.right figcaption {
            text-align: right;
            padding-left: 10px;
        }
        figure {
            margin: 0;
            padding: 0;
        }

Alles anzeigen

Hast du vergessen den Code aus Sempervivum Beitrag zu kopieren . Weil dann solte der Abstand und die ausrichtung auch Funktionieren.

EDIT und das mit den 2 Farbigen Hintergrund löst sich ja auch mit Sempervivum sein Code

Code

body {
            display: flex;
            flex-direction: row;
            font-family: arial;
            margin: 0;
            padding: 0;
        }
        .container {
            display: flex;
            flex-direction: column;
            flex-basis: 50%;
        }
            .container.left {
                background-color: #fff;
            }
            .container.right {
                background-color: #333;
            }

Alles anzeigen

Warum hast du nicht sein Code komplett übernommen ? Ich glaube das er an alles gedacht hat .Habe das zwar nicht getestet aber sieht zumindest so aus .Am besten kann man immer mit Original Fotos testen und Code schreiben .(ich zumindest).

EDIT : Welcher text soll den in grau sein ? Der in <h2></h2>?

basti1012

Meinst du so https://jsfiddle.net/basti1012/wwxefet6/10/show/ .Besser bekomme ich es nicht hin auf der schnelle. An besten wartest du auf Sempervivum der kann das besser als ich. Vieleicht solltest du die Schrift noch etwas kleiner machen notfalls .Oder die Logos .Weiss ja nicht wie gross die Original bilder sind .

Die Schrift neben den Logo zu bekommen geht auch nur mit kleinen Trick( so nenne ich es mal,die Profis können das auch anders ) .Weil die <h1> Elemente haben von sich aus ja schon einen Zeilen sprung ,oder wie man das jetzt nennt ,Komme jetzt nicht auf Namen.

Sempervivum

Zitat

Und wie kriege ich Text und Slogan nebeneinander mit jeweils 20 px Abstand?

Das Problem ist, dass das img-Tag innerhalb von figcaption liegt:

Code

            <figure class="logo left">
                <figcaption>
                    <img class="logo left" src="images/logo-hauff.png" alt="Hauff Digital Logo" />
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>

Es gehört außerhalb:

Links:

Code

            <figure class="logo left">
                <img class="logo left" src="images/logo-hauff.png" alt="Hauff Digital Logo" />
                <figcaption>
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>

Rechts:

Code

            <figure class="logo right">
                <figcaption>
                    <h1>Ladenbau für den Baustoffhandel</h1>
                </figcaption>
                <img class="logo right" src="images/logo-hauff.png" alt="Hauff Ladenbau Logo" />
            </figure>

Sempervivum

Außerdem stimmen jetzt die Proportionen von linkem und rechtem Container nicht mehr. Der Grund ist, dass das a-Tag hinzugekommen ist. Dieses muss jetzt das flex-basis bekommen:

Code

        a {
            text-decoration: none;
            flex-basis: 50%;
        }

Und der Container:

Code

       .container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

Sempervivum

Danach bestand noch das Problem, dass die Höhe von linkem und rechten Logocontainer unterschiedlich war, abhängig von der Fensterbreite. Daher habe ich die Struktur umgestellt:

HTML

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Hauff Intro</title>
    <meta name="description" content="">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="http://www.hauff.com/" />
</head>
<body bgcolor="#a8a9ad">
    <style>
        h1 {
            font-size: 24px;
        }

        h2 {
            font-size: 18px;
            display: inline-block;
            margin: 20px;
            margin-top: 40px;
            margin-bottom: 40px;
        }

        a {
            text-decoration: none;
            flex-basis: 50%;
        }

        body {
            font-family: arial;
            margin: 0;
            padding: 0;
        }

        header, main {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        figure {
            width: 100%;
            position: relative;
        }

            figure.left {
                background-color: #fff;
            }

            figure.right {
                background-color: #282828;
            }

                main figure img {
                    width: 100%;
                    height: auto;
                    vertical-align: top;
                }

                main figure figcaption {
                    text-align: left;
                    width: 85%;
                }

        figure.logo {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

            figure.logo.right {
                justify-content: flex-end;
                color: #ffffff;
            }

            figure.logo.left {
                justify-content: flex-start;
                color: #a8a9ad;
            }

            figure.logo.right figcaption {
                text-align: left;
                padding: 20px;
            }

            figure.logo.left figcaption {
                text-align: right;
                padding: 20px;
            }

        figure {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        img.logo {
            max-width: 100%;
        }

        .overlay {
            position: absolute;
            width: 85%;
            bottom: 0;
            color: white;
        }

            .overlay.right {
                left: 0;
                background-color: rgba(245, 130, 32, 0.4);
            }

            .overlay.left {
                right: 0;
                background-color: rgba(102, 174, 64, 0.6);
            }
    </style>
    <header>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="logo left">
                <img class="logo left" src="Hauff-Digital.png" alt="Hauff Digital Logo" />
                <figcaption>
                    <h1>Digitale Verkaufslösungen für den Baustoffhandel</h1>
                </figcaption>

            </figure>
        </a>
        <a href="http://www.hauff.com" title="Hauff-Classic: Ladenbau für den Baustoffhandel">
            <figure class="logo right">
                <figcaption>
                    <h1>Ladenbau für den Baustoffhandel</h1>
                </figcaption>
                <img class="logo right" src="Hauff-Ladenbau.png" alt="Hauff Ladenbau Logo" />
            </figure>
        </a>
    </header>
    <main>
        <a href="https://www.hauffdigital.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <figcaption class="overlay left">
                    <h2>Wir planen und bauen erfolgreiche Verkaufsausstellungen. Denn wer heute Kunden begeistern will, muss Mehrwerte bieten – analog und digital.</h2>
                </figcaption>
                <img src="HauffDigital.jpg" alt="Hauff Digital" />
            </figure>
        </a>

        <a href="https://www.hauff.com/" title="Hauff-Digital: Digitale Verkaufslösungen für den Baustoffhandel">
            <figure class="bottom">
                <img src="HauffClassic.jpg" alt="Hauff Ladenbau" />
                <figcaption class="overlay right">
                    <h2>
                        Wir sind die Digitalpioniere der Baustoffbranche und machen Ihre Verkaufsräume fit für die Zukunft. So profitieren Sie und Ihre Kunden aus dem Besten aus Offline und Online!
                    </h2>
                </figcaption>
            </figure>
        </a>
    </main>
</body>
</html>

Alles anzeigen

Ich habe versucht, jetzt die selben Dateinamen für die Bilder zu verwenden wie Du.

Ist das Fenster zu schmal, werden jetzt die Logotexte nicht mehr optimal dargestellt. Dies könnte man noch verbessern, indem man mit eine Mediaquery Bilder und Texte jeweils untereinander anordnen würde bei schmalem Fenster.

Jetzt mitmachen!