Da es viel Zeit kostet in jede Datei das händisch einzubinden suche ich nach einer Möglichkeit das automatisch zu machen.
Sofern sich die Position allgemein gültig angeben lässt, z. B. ganz am Anfang, vor </head> oder </body>, evtl. ganz anders: Mit dem Editor und Ersetzen über mehrere Dateien hinein editieren? (natürlich nur das Einbinden, nicht da ganze Skript)
Ich habe da auch etwas ausgearbeitet, ohne Float und ohne absolute Posiitonierung, so wie ich es in #8 beschrieben hatte:
http://jsfiddle.net/Sempervivum/o0e1s3rp/39/
Kann man noch etwas aufhübschen und das Bild austauschen, mir kam es zunächst nur auf die Funktion an.
Bild mit Text machst Du am besten mit dem figure-Tag: Darin ein img-Tag mit dem Bild und einem figcaption-Tag mit dem Text bzw. dem Link.
Und steuern, ob Elemente nebeneinander oder untereinander angeordnet werden, am einfachsten mit Flexlayout:
https://www.html-seminar.de/css-flexbox.htm
Und den hover-Effekt mit CSS-Transition für transform:translateX
Schnell getestet:
$.ajax({
url: "testget.php",
data: JSON.stringify({ name: "heinrich", alter: "48" }),
success: function (output) {
console.log("mit stringify: " + output)
}
});
$.ajax({
url: "testget.php",
data: "name=heinric&alter=48",
success: function (output) {
console.log("mit URL-Parametern: " + output)
}
});Das erste funktioniert nicht wie erwartet: Es gibt eine GET-Variable mit dem JSON-String als Name und leerem Wert.
Das zweite funktioniert: name und alter stehen als GET-Variablen zur Verfügung.
D. h. jQuery erwartet als data einen String von URL-Parametern (wenn es sich um einen String handelt).
Es könnte sein, dass Du hier JSON.stringify mit der jQuery-Funktion serialize verwechselst:
https://api.jquery.com/serialize/
Edit: Ich hatte die Parameter contentType und dataType übersehen. Letzterer bezieht sich auf die Antwort vom Server. Ersterer ändert offenbar nichts, denn mit diesem Code:
$.ajax({
url: "testget.php",
method: "GET",
contentType: 'application/json',
data: JSON.stringify({ name: "heinrich", alter: "48" }),
success: function (output) {
console.log("mit stringify: " + output)
}
});ist das Ergebnis das gleiche.
Das zweite habe ich noch nie gesehen und mir ist nicht klar, ob es funktionieren wird, habe mir jedoch nicht die Mühe gemacht, es zu testen.
Haupt-Anwendungsfall von JSON ist die Übergabe von Strukturen aus (assoziativen) Arrays z. B. von PHP nach Javascript. Im Falle von Ajax würde auf dem Server mit PHP und json_encode in einen JSON-String kodiert und auf dem Client mit Javascript und JSON.parse wieder dekodiert. Wobei in deinem Fall, wenn contentType mit application/json angegeben wird, jQuery das für dich übernimmt.
Freut mich zu lesen, dass es funktioniert.
Ich muss mich übrigens korrigieren: Bei deinem ersten Layout kann man problemlos auf die absolute Positionierung der Jahreszahlen verzichten, wenn man das betr. span innerhalb des div für die rote Linie anordnet. Weil deren Höhe gering ist erscheint die Jahreszahl dann darunter.
Soweit Du es gepostet hast, scheint es mir richtig zu sein. Du musst nur noch für den Container .chronikcontainerinhalt wieder die Elemente mit row, von links nach rechts anordnen.
Ja, sollte passen. Bei dem roten Balken musst Du wahrscheinlich zwischen links und rechts unterscheiden, denn der linke ragt nach rechts hinein (margin-right:5em;) und der rechte nach links.
Und das Jahr würde ich innerhalb der roten Balkens anordnen, dann kannst Du es leicht relativ dazu positionieren.
Und in der Mitte brauchst Du wahrscheinlich noch den grauen senkrechten Balken.
In CSS brauchen top und left eine Maßeinheit, wahrscheinlich meinst Du px.
Interessante Aufgabe! Mit Bootstrap habe ich keine Erfahrung, aber ich würde mit Flexlayout so vorgehen:
Informiere dich über Ajax, damit kannst Du deine Datenbank abfragen ohne die Seite neu zu laden. Dies ist für den Anfang ganz gut geeignet:
:confused: Wenn Du schreibst "Bildtitel", meinst Du dann in Wirklichkeit den Dateinamen des Bildes, z. B. "Bild.png"?
Und: Wenn du den Dateinamen des Bildes ohne ein weiteres Kriterium ermitteln willst, darf nur ein einziges Bild in dem Uploads-Ordner liegen?
Was jetzt noch ist, das im IE das #main-nav bis nach ganz unten "stretched", sowohl als Button als auch wenn das Untermenü sichtbar ist.
Das kannst Du leicht ändern, indem Du diesem Element ein align-self: flex-start; verpasst. Selber finde ich es aber schöner, wenn der dunklere Hintergrund die ganze Höhe ausfüllt.
Sollte kein Problem sein:
http://jsfiddle.net/Sempervivum/frujnhw9/6/
Das HTML ist original deines, ich habe nur den String "Datum" im Inhalt der Textareas gelöscht.
Das Javascript muss Du hinter dem HTML einfügen und in script-Tags einschließen:
<script>
// hier das JS aus dem jsfiddle
</script>Wo kommen denn die vorgefertigten Texte her? Sind die schon beim Laden der Seite drin? Dann könnte man einfach das Datum davor setzen. Aber Textarea ist ja eigentlich für Eingaben durch den Benutzer.
Ach ja, der IE mal wieder ...
Das mit der Nav wird hier diskutiert:
https://stackoverflow.com/questions/3223…t-working-in-ie
Bei mir funktioniert es, wenn ich das flex für die Nav ganz deaktiviere.
Und das mit dem verzerrten Logo kenne ich schon, wenn das Bild ein Flexitem ist, funktioniert es nur, wenn man einen Wrapper darum herum legt.
Das Problem mit Fontawesome habe ich noch nicht untersucht.
Ohne das Umfeld zu kennen, tippe ich mal ins Blaue: Du erhöhst die Variable h immer wieder und irgendwann wird die Grenze des Array überschritten.
Dann ist entweder der Rückgabewert kein Array oder es gibt darin kein Element unter dem Index h+1.
Das wird hier diskutiert, auch ein halbwegs zuverlässiger Workaround:
https://stackoverflow.com/questions/2339…g-async-or-sync