ZitatNUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus,
Kann ich bei deiner Beispielseite nicht bestätigen, bei mir ragt nichts heraus. Sieht gut aus. Hast Du das Problem inzwischen gelöst?
ZitatNUR bleibt eben mein Text (vom <p> und das <a>) NICHT innerhalb des <footer> sondern ragt darüber hinaus,
Kann ich bei deiner Beispielseite nicht bestätigen, bei mir ragt nichts heraus. Sieht gut aus. Hast Du das Problem inzwischen gelöst?
Du hast Recht, das benutzt SVG und passt nicht unmittelbar auf deine Anwendung. Es ginge sicher auch mit JPG, müsste aber umgestellt werden.
Mit Strg+F5 werden auch externe css- und js-Dateien neu geladen.
Wird es bei dir vielleicht anders dargestellt? Welchen Browser benutzt Du?
Verstehe nicht, genau da, wo das gelbe Kreuz in deinem Bild ist, ist das schwarze in meinem Codpen?
Wo möchtest Du das Kreuz denn hin haben? Weil Du ursprünglich top: 50% hattest, hatte ich vermutet, dass Du es vertikal zentriert haben willst?
Vermutlich ist dies der Grund:
https://css-tricks.com/forums/topic/p…fter-page-load/
ZitatI’m assuming that this “trick” requires a known height for the parent.
Aber Du willst ja wahrscheinlich nur das Plus-Zeichen vertikal zentriert zwischen die Bilder legen. Das kannst Du einfacher erreichen, wenn Du das Plus-Zeichen zwischen die beiden figure-Tags legst:
<div id="conti">
<figure role="group">
<img src="http://puschelreich.de/Akira/Akira-4Jahre.jpeg">
<figcaption>
<b>Champion</b> vom Pfotenreich Akira<br><br>
Geburtsdatum: 03.03.2015<br><br>
Farbe: black torbie/MC
</figcaption>
</figure>
<img id="plus" src="http://puschelreich.de/Bilder/plus.png">
<figure role="group">
<img src="https://www.puschelreich.de/Balou/Balou-2018-06-03-15-04-41%20(2).jpg">
<figcaption>
Balou vom Puschelreich<br><br>
Geburtsdatum: 29.01.2015<br><br>
Farbe: black silver tabby
</figcaption>
</figure>
</div>
Alles anzeigen
und mit Flex geeignet ausrichtest:
Da gibt es mehrere Möglichkeiten, einen String über mehrere Zeilen hinweg zu definieren:
Rückwärts-Strichlein verwenden:
var Rahmen = `<div class="rahmen">
<img class="rahmen-4" src="1EK8_0668.jpg" alt="Rahmendemo" title="Rahmendemo"width="300" height="225">
<span> <font size="3.5">(Titel)</font></span>
</div> `;
Normale Hochkommas verwenden und die Zeilen mit "+" verknüpfen:
var Rahmen = '<div class="rahmen">'
+ '<img class="rahmen-4" src="1EK8_0668.jpg" alt="Rahmendemo" title="Rahmendemo"width="300" height="225">'
+ '<span> <font size="3.5">(Titel)</font></span>'
+ '</div> '
Und für das, was Du als Rahmen bezeichnest, empfiehlt es sich, ein figure-Element zu verwenden, denn darin befindet sich
ein Bild und eine Beschreibung.
Was die URL aus Post #22 betrifft: Hier stehen die Daten bereits im Quelltext, d. h. sie werden serverseitig bereit gestellt und nicht über Ajax mit Anfrage und Antwort. Entweder dieser Server hat selbst eine Datenbank oder er greift die Daten von einer anderen Site ab.
In Post #21 schreibst Du:
ZitatAber mit API habe ich verstanden anfrage stellen und sagen was man wissen möchte Anfrage geht an die url Aber ich weiß icht was ich schreiben muss um die Antwort auf eine Anfrage auch erhalten
Sieh dir meinen Code in Post #15 noch Mal an:
$.ajax({
url: "https://raider.io/api/v1/guilds/profile?region=eu&realm=Norgannon&name=Infinitum%20animus&fields=name,faction,region,realm,profile_url,raid_rankings",
dataType: "json",
success: function (output) {
console.log(output);
An die Funktion $.ajax wird die URL übergeben, von wo die Daten geholt werden sollen. D. h. der Browser schickt eine entspr. Anfrage an den Server. Trifft die Anwort darauf ein, wird die Funktion aufgerufen, die bei success notiert ist. Ihr Eingangsparameter, den ich hier output genannt habe, enthält die Antwort vom Server bzw. die Daten die dieser zurück liefert.
Das this in der anonymen Funktion des onload ist ein anderes als das this im Objekt testImg, nämlich das img-Element, auf das das onload registriert wurde.
Lösung, indem Du das this einer Variablen zuweist und diese in der Funktion ansprichst:
Wie ich schon schrieb, konsequent relative bzw. Prozenangaben verwenden:
Das Problem ist, dass mit transform immer alle Optionen gesetzt werden. Setzt du transform: translateX(900px); wird die Drehung auf 0 Grad gesetzt anstatt den zuletzt gesetzten Wert beizubehalten. Du musst immer beide Werte angeben, jedenfalls die die vom Grundzustand abweichen.
Versuche, ob dies deinem Wunsch entspricht:
@keyframes Tiger {
0% {
transform: translateX(900px) rotateY(0deg);
}
30% {
transform: translateX(-100px) rotateY(0deg);
}
50% {
transform: translateX(-100px) rotateY(180deg);
}
80% {
transform: translateX(900px) rotateY(180deg);
}
100% {
transform: translateX(900px) rotateY(0deg);
}
}
Alles anzeigen
Zitatmanche pngs halb übereinander stehen und der Aufbau in einer ganz bestimmten Art und Weise sein muss
Wie meinst Du das denn? Dass sie nicht genau in einer Reihe stehen sollen sondern nach oben/unten/links/rechts versetzt?
Du kannst sie z. B. mit transform:translate von ihrer ursprünglichen Position wegrücken oder absolut positionieren.
ZitatSo jetzt muss das ganze aber auch Responsive sein, am besten indem sich alle pngs vergrößern und verkleinern, so dass alle Verhältnisse die gleichen bleiben.
Auch bei absoluter Positionierung ist das möglich, wenn Du konsequent mit relativen Angaben bzw. Prozentwerten arbeitest.
Das PHP_EOL fügt einen Zeilenumbruch ein, damit die Tags untereinander stehen, nur damit das HTML besser lesbar ist. Der Zeilenumbruch ist ein wenig vom Betriebssystem abhängig und diese Konstante fügt immer die richtige Version ein.
In checkdir.php die img-Tags generieren:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
if (isset($_POST['dir'])) {
if (file_exists($_POST['dir'])) {
$imgs = glob($_POST['dir'] . "*.jpg");
foreach ($imgs as $img) {
echo '<img src="' . $img . '">' . PHP_EOL;
}
}
}
?>
Alles anzeigen
In der Lightbox einen Container für die Bilder hinzu fügen:
<!-- Wird aktiviert wenn ein Verzeichnis (ArtNr) bereits vorhanden ist -->
<div id="frage">
<span id="dir"></span>
<div id="imgs-on-server"></div>
<form>
<p>Der Ordner ist vorhanden, was soll mit den Dateien passieren:</p>
<fieldset>
<input type="radio" id="ueberschreiben" name="doppelt" value="ueberschreiben">
<label for="ueberschreiben"> bestehende Bilder überschreiben</label>
<input type="radio" id="anhaengen" name="doppelt" value="anhaengen">
<label for="anhaengen"> neue Dateien anhängen</label>
<div id="ok" name="doppelt">OK</div>
</fieldset>
</form>
</div>
Alles anzeigen
Und in der Funktion check() die img-Tags dort eintragen:
// Prüft ob das Verzeichnis bereits existiert
function check(text) {
var vval = ($("#text").val());
var vdir = './upload/' + vval + '/';
$.ajax({
url: "checkdir.php",
method: "post",
data: { dir: vdir }
}).done(function (output) {
if (output != "") {
console.log(output)
document.getElementById("dir").innerHTML = vdir;
$('#output').val(output);
$('#frage').animate({ "opacity": "1" }, 500);
$('#background').animate({ "opacity": ".70" }, 500);
$('#background, #frage').css({ "display": "block", "margin": "1% auto" });
$("#imgs-on-server").html(output);
} else console.log(vdir + " existiert nicht");
$('#output').val(output);
});
}
Alles anzeigen
Wie so häufig ist auch hier Flexlayout dein Freund. Den Container #conti so ändern, dass er die beiden Bilder umschließt und mit display: flex; und justify-content: center; nebeneinander anordnen:
OK, wenn ich dich richtig verstehe, willst Du die Bilder in einer Lightbox anzeigen. Dann sehe ich zwei Möglichkeiten:
Was möchtest Du denn für eine Lightbox verwenden, vorgefertigt wie Fancybox oder selbstgemacht?
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.