Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.
@all: Ist da schon jemand dran?
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.
<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
Das finde ich ja interesant
<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:
<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
PS: Sollten die Overlays nicht halbtransparent sein? Würde ich hübscher finden.
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
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>?
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:
<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:
<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:
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:
<!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.
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.