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:
a {
text-decoration: none;
flex-basis: 50%;
}Und der Container:
.container {
display: flex;
flex-direction: column;
width: 100%;
}Und 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:
<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>Die einfachste Lösung ist, ein zentrales audio-Objekt zu verwenden, wie ich es früher vorgeschlagen habe: Posts 29 und 31.
PS: Sollten die Overlays nicht halbtransparent sein? Würde ich hübscher finden.
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>Versuche dieses:
aud = bird.getElementsByTagName("audio")[0]; // dies ist das Audio-Element
aud.play();
console.log(aud.src); // dies ist die URL des Clipsaudiourl.play - offenbar rufst Du die Funktion play() auf audiourl auf, das ist ein String. Du musst sie auf dem audio-Element aufrufen: aud.play()
Dann würde ich das Template so erweitern:
<script type="text/template" id="bird-list-entry">
<li class="bird-list-entry" bird-id="<%= id %>">
<img src="<%= imagePath %>" class="bird-image" />
<div class="bird-description">
<span class="bird-name"><%= name %></span>
<span class="bird-latin-name"><%= latinName %></span>
</div>
<span class="add-bird-button">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</span>
<span class="play-button" data-sound="<%= sound %>">
<i class="fa fa-play" aria-hidden="true"></i>
</span>
</li>
</script>Das Ersetzen des Platzhalters <%= sound %> kannst Du sicher selber machen.
Und der Eventlistener müsste dann so aussehen:
$("bird-list-entry span.play-button").on("click", function() {
var audiourl = $(this).data("sound");
aud.src = audiourl;
aud.play();
});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".
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>Hallo Heike, würde da etwas ausarbeiten, aber nicht gern doppelte Arbeit machen.
@all: Ist da schon jemand dran?
Ich empfehle folgendes:
Die URL der Sounddatei in einem data-Attribut ablegen. Leider sieht dein Template keinen Platzhalter dafür vor, aber Du könntest es so einfügen:
.replace('<img src=', '<img data-sound="' + dein_objekt.audioPath + '" src=')Dann ein Audio-Objekt anlegen:
var aud = new Audio();Und einen Eventhandler für Mouseover registrieren:
$("bird-list-entry img").on("mouseover", function() {
var audiourl = $(this).data("sound");
aud.src = audiourl;
aud.play();
});Und bedenke, dass es auf Touch-Geräten kein Mouseover gibt. Besser wäre es, jeweils einen Play-Button anzubringen und damit den Klang zu starten.
BTW: Astrofotografie? Cooles Hobby!
Einfach eine "normale" Tabelle?
| Vorname | Nachname | Alter | |
| Max | Muster | maxmuster@email.de | 30 |
| Erika | Mustemann | erikam@gmx.net | 50 |
Guten Abend Monice,
da fielen mir zunächst zwei Möglichkeiten ein, es zu realisieren: Die Hundeköpfe in die Weltkarte hinein zeichnen und mit Hilfe einer Imagemap die Links auf die Bilder legen.
Oder: Die Hundeköpfe jeweils in ein a-Tag einbetten und dieses auf der Karte absolut positionieren. Die a-Tag bilden jeweils einen Link, der die betr. Seite öffnet.
Beides ist zunächst mal nicht responsiv. Eine responsive Lösung mit SVG wird hier beschrieben:
https://wiki.selfhtml.org/wiki/SVG/Tutor…nsive_Imagemaps
Eine SVG-Grafik ist ohnehin zu empfehlen, da sie beliebig vergrößert und verkleinert werden kann.
Nein, ich bin sehr sicher, dass jCanvas die Funktion drawImage der Canvas-API benutzt. Die API ist im Browser eingebaut und man kann sie benutzen, ohne etwas einzubinden. Diese Funktion hat für die Abmessungen und die Position die selben Parameter. Offenbar liegt es daran, wie das Verkleinern im Browser implementiert ist. Das ist eine Wissenschaft für sich und es gibt verschiedene Methoden, die sich in Qualität und Schnelligkeit unterscheiden.
Ah ja, interessante Information, danke! Ich benutze Opera, werde es mal mit anderen Browsern testen.
Aber natürlich. Du brauchst nur etwas Ausdauer und Beharrlichkeit. Nicht gleich bei den ersten Problemen aufgeben und wenn es gar nicht geht, im Forum fragen.
Und Schritt für Schritt vorgehen. Das Kontaktformular z. B. ist eine Wissenschaft für sich. Ich empfehle, es zunächst zurückzustellen.
Wenn ich jetzt ein 7x7 grosen Würfel habe in Regenbogen Farbe ,wie kann man das den verkleinern .Das währen ja 7 Farben auf ein Pixel. Nur wie siehts da aus .Gemischt ,unsortiert oder wie original
Das ist schlicht unmöglich. Ein Pixel kann nur eine Farbe haben.
Für die Bilder in drei Spalten habe ich mal ein Beispiel gemacht, weil es aus den Links oben nicht so einfach ersichtlich ist, wie es geht.
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container figure {
display: inline-block;
flex-basis: calc(33% - 1em);
margin: 0.5em;
}
.container figure img {
width: 100%;
height: auto;
}
.container figure figcaption {
text-align: center;
}
</style>
<div class="container">
<figure>
<img src="images/dia0.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
<figure>
<img src="images/dia1.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
<figure>
<img src="images/dia2.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
<figure>
<img src="images/dia3.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
<figure>
<img src="images/dia4.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
<figure>
<img src="images/dia5.jpg" />
<figcaption>Dies ist die Bildbeschriftung</figcaption>
</figure>
</div>