Newbie in Sachen Grid und div

  • 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.

  • 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 ?

  • 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".

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

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

  • 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;
  • 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

    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>?

  • 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.

  • 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>
  • 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%;
            }
  • 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:

    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!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!