Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.
@all: Ist da schon jemand dran?
Jetzt das HTML-Seminar als
Video-Tutorial
mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign
Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.
@all: Ist da schon jemand dran?
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.
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
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:
PS: Sollten die Overlays nicht halbtransparent sein? Würde ich hübscher finden.
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
mit dein Bildabstand von Links . Versuch doch mal das .
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.
ZitatUnd wie kriege ich Text und Slogan nebeneinander mit jeweils 20 px Abstand?
Das Problem ist, dass das img-Tag innerhalb von figcaption liegt:
Es gehört außerhalb:
Links:
Rechts:
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:
Und der Container:
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.