lasse ich in einer Selectbox nun eine vereinfachte Auswahl durchführen ...
in der Selectbox sollte nun - wenn man z.B. Relation 100 auswählt
Zwei Fragen:
1. Ich nehme an, die erste Selectbox soll ebenfalls automatisch aufgebaut werden?
2. Soll die Auswahl in der ersten Selectbox nur die Felder 'Relation' enthalten?
Wenn Du in den Quelltext siehst, erkennst Du, dass bei action eine URL angegeben ist:
<form method="post" action="https://css-tricks.com/examples/DragAndDropFileUploading//?" enctype="multipart/form-data" novalidate class="box">Wie die PHP-Datei aussehen muss, kannst Du dir hier ansehen:
Wenn Du wenig Zeit hast, kannst Du die Bilder ganz schnell etwas hübscher machen, indem Du sie rund machst:
Hier ist etwas für den Upload:
Das geht mit border-collapse: collapse;
vertical-align funktioniert außerhalb einer Tabellenzelle nur für Bilder. Zuverlässiger ist Flexbox und align-items:center.
Fragen wir mal Sempervivum .vieleicht weiss er das was ich falsch mache
Dein Vertrauen ehrt mich, Basti, aber ich möchte in dieses Thema nicht einsteigen:
1. Wenn ich dies machen müsste, würde ich Fancybox verwenden.
2. Ich bin bisher nicht in Bootstrap eingestiegen und habe es auch nicht vor.
Mit jQuery-UI-draggable war es eine Kleinigkeit:
http://webentwicklung.ulrichbangert.de/weltkarte-hunde-draggable.html
Einen der Köpfe mit der Maus ziehen und das Ausgabefeld links unter der Karte beobachten.
Ja, das ist ein Demo, das ich für dich gemacht habe. Die Bilder bereitstellen und die Köpfe freistellen musst Du selber machen. Freistellen kann je nach Motiv eine Wissenschaft für sich sein, bist Du damit vertraut?
Was die Positionierung betrifft, kann ich dich unterstützen, indem ich ein Tool baue, mit dem man die Köpfe verschieben kann und die Position ablesen. Du müsstest nur die Karte bereit stellen, vielleicht als Dateianhang, und die Größe der Köpfe angeben. Am einfachsten wäre es natürlich, wenn sie alle die selbe Größe hätten.
bitte nehm jetzt diesen gerade ermittelten Text und nutze ihn um die richtige ID zu suchen und aufzurufen".
Wenn ich dich da richtig verstehe, sollte dieses es tun:
function zeile(){
var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
rows[i].addEventListener('click', function() {
var row = this.rowIndex + 1;
var idPlus = "_" + row + "_IMG";
var newId = "ID_imageactioncontrol735BC564" + idPlus;
$("img #" + newID).trigger("click"); // Klick auf den Button simulieren
return true;
});
}
}Ich habe jQuery verwendet, weil das Triggern eines Klicks u. U. problematisch sein kann, siehe z. B. hier:
mit welchen befehlen positioniere ich die Balken und die Kreise
Siehe z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://stackoverflow.com/questions/3255…856609#33856609
Damit kannst Du die Elemente positionieren und, wenn Du es richtig machst, sind Position und Größe abhängig von der Auflösung des Bildschirms.
Größe in Prozent zu definieren ist ebenfalls schon ein guter Ansatz
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.
Diese Aussage muss ich revidieren: Verwendet man konsequent Prozentangaben für Abmessungen und Positionen, kann diese Lösung sehr wohl responsiv sein, siehe hier:
Dafür würdest Du eval() brauchen, aber in den meisten Fällen ist das nicht zu empfehlen, sondern es gibt bessere Lösungen, so auch hier: ein Array oder ein Objekt verwenden:
function test1(i){
// Array
var pD = [
"Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
"Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
"Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
"Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
"Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD[i];
alert(a);
return a;
}
function test2(i){
// Objekt
var pD = {
pD1: "Peter1,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
pD2: "Peter2,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
pD3: "Peter3,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
pD4: "Peter4,Müller,Mann,10a,12.12.1999,1,2,3,6,2",
pD5"Peter5,Müller,Mann,10a,12.12.1999,1,2,3,6,2"
];
var a = pD["pD" + i];
alert(a);
return a;
}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>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.
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>