Über den Bildern ist aber auch noch jeweils Text? Ohne den hättest Du wahrscheinlich die Probleme mit der Ausrichtung nicht.
Beiträge von Sempervivum
-
-
Ich bekomme das HTML nicht mit dem Screenshot zusammen: Im HTML kommt erst ein Bild, dann ein Textabsatz und dann ein div mit einem Bild drin. Im Screen dagegen oben Text, dann je ein Bild und dann darunter Text mit Überschrift?
-
Den Code hast Du vergessen, HTML und CSS.
-
Zitat
es funktioniert alles wieder.
Bezieht sich das auch auf das Ausblenden? Ich war mir nämlich nicht ganz sicher, ob es an der Platzierung von div und form liegt, weil mein Editor es nicht als fehlerhaft erkannte.
Bootstrap für das Layout zu benutzen ist sicher eine gute Wahl, wenn Du gewohnt bist, damit zu arbeiten. Auf jeden Fall besser als ein Tabellenlayout.
-
PS: Bin ein wenig verunsichert: Mein Editor, den ich eigentlich als zuverlässig kenne, markiert dies nicht als Fehler, der W3C-Validator jedoch schon:
ZitatAlles anzeigen-
Error: Start tag
divseen intable.From line 37, column 18; to line 38, column 17
</tr>↩ <div>↩ -
Fatal Error: Cannot recover after last error. Any further errors will be ignored.
From line 37, column 18; to line 38, column 17
</tr>↩ <div>↩
-
-
Zitat
Weiteres was ich mir nicht erklären kann ist, dass im Quellcode das div und das form rot markiert ist.
Der Grund ist, dass diese Elemente an dieser Stelle, zwischen </tr> und <tr> nicht zulässig sind. Innerhalb einer Tabelle nur in den Zellen. Du musst das Layout umstellen.
-
Dein Code funktioniert bei mir, das Problem muss irgend wo anders liegen. Ein Kandidat ist das window.onload: Wird es irgend wo überschrieben?
-
Probier mal, ob dies deinen Absichten einiger Maßen nahe kommt:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head></head> <body> <div id="bildwrapper"> <img src="images/dia0.jpg"> <input type="text" id="textfeld"> </div> <style> body { padding: 0; margin: 0; } #bildwrapper { width: 100vw; height: auto; position: relative; } #bildwrapper img { width: 100%; height: auto; } #textfeld { position: absolute; left: 60%; top: 20%; transform: translate(-50%); } </style> </body> </html>Ich bin dabei davon ausgegangen, dass das Eingabefeld nicht mit skaliert werden soll.
-
Zitat
Punkt 1: Die Größe des Bildes ist relativ egal, es soll sich jedoch an die Auflösung anpassen, heißt es soll nicht größer sein wenn die Auflösung geringer ist.
Das verstehe ich immer noch nicht. In welcher Form soll es sich an die Auflösung anpassen?
ZitatPunkt 4&5: Nein es soll nicht zwingend zentriert sein, es soll sich an einer bestimmten Stelle befinden: 500 vom linken Rand und 200 von oben, dass das vertikal genau das Zentrum ist, ist Zufall
Auch das verstehe ich noch nicht. Die 500 und 200 (ich nehme an, Du meinst px) sollen sich auf die Originalgröße des Bildes beziehen? Denn wenn das Ganze responsiv sein soll, kann man dies nicht absolut angeben.
-
Ich bin ganz optimistisch, dass man das auch mit CSS machen kann, aber mir ist nicht ganz klar, wie Du es haben willst:
- Soll das Bild das Browserfenster ganz ausfüllen?
- Das Seitenverhältnis des Bildes soll erhalten bleiben?
- Was ist der Sinn beim Drehen des Eingabefeldes um 90 Grad?
- Das Eingabefeld soll vertikal zentriert sein?
- Das Eingabefeld soll horizontal nicht zentriert, sondern mehr zum rechten Rand hin platziert werden?
-
Ich sehe nicht, warum Du das mit echo ausgeben musst. Du kannst den Code so, wie er ist, auf einer PHP-Seite einfügen, in Code-Tags natürlich.
-
Zitat
Ich möchte gerne das man auf dem Button klickt und und dann auf eine andere Seite geleitet wird.
Genau das tut der Code, den ich gepostet habe.
-
Zitat
Nur ich muss da ja nicht nur 2 mal hochgehen. Sondern muss nach dem 2 mal hoch gehen in user/images rein.
Genau das tut mein Code doch:
../../ zwei Stufen hoch gehen
users/images von da aus in users hinein und von da aus in images hinein gehen.
Du schreibst einmal user und einmal users. Liegt da vielleicht ein Fehler?
-
So funktioniert es, jedenfalls, wenn ich deine Absicht richtig verstehe:
CodesetTimeout(function () { swal({ title: 'Wow!', text: 'Message!', type: 'success' }) .then(function () { window.location = 'redirectURL'; }); }, 2000);Du hattest als Zeit 1 angegeben, die wird in Millisekunden definiert, so dass der Alert praktisch sofort kommt. In dem Code oben habe ich 2000 ms bzw. 2 sec verwendet.
Und den Sinn, das Ganze mit echo auszugeben, sehe ich nicht.
-
Heißt "aufrufen" in einem img-Tag anzeigen? Oder als BG in CSS? Hast Du dies schon versucht?
../../users/images/test.png
-
Zu deiner Testseite http://kahn.8sf.de/subtabs-test.html
Dein 4. vertikaler Tab funktioniert nicht, weil Du ihn nicht initialisiert hast. Ergänze das Javascript auf diese Weise und er funktioniert:
Code
Alles anzeigen<script> $(document).ready(function() { //Horizontal Tab $('#parentHorizontalTab').easyResponsiveTabs({ type: 'horizontal', //Types: default, vertical, accordion width: 'auto', //auto or any width like 600px fit: true, // 100% fit in a container tabidentify: 'hor_1', // The tab groups identifier activate: function(event) { // Callback function if tab is switched var $tab = $(this); var $info = $('#nested-tabInfo'); var $name = $('span', $info); $name.text($tab.text()); $info.show(); } }); // Child Tab $('#ChildVerticalTab_1').easyResponsiveTabs({ type: 'vertical', width: 'auto', fit: true, tabidentify: 'ver_1', // The tab groups identifier activetab_bg: '#fff', // background color for active tabs in this group inactive_bg: '#F5F5F5', // background color for inactive tabs in this group active_border_color: '#c1c1c1', // border color for active tabs heads in this group active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border }); // Child Tab 4 $('#ChildVerticalTab_4').easyResponsiveTabs({ type: 'vertical', width: 'auto', fit: true, tabidentify: 'ver_1', // The tab groups identifier activetab_bg: '#fff', // background color for active tabs in this group inactive_bg: '#F5F5F5', // background color for inactive tabs in this group active_border_color: '#c1c1c1', // border color for active tabs heads in this group active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border }); }); </script>Damit funktioniert der vierte vertikale Tab auf meiner Testseite. Wahrscheinlich müsste man noch den tab groups identifier anpassen und eindeutig machen.
-
Für background-color ist rgba möglich, dann ist nur der Hintergrund transparent:
https://jsfiddle.net/Sempervivum/g0ynznfy/2/
(klick auf das Bild)
-
Meinst Du das Springen am Ende des Verschiebens? Das kann ich nur beim jetztigen Dreieck beobachten und es hat folgenden Grund:
x für links oben ist 0-deltax
Beim dragstop wird die x-Position von jCanvas gelesen (diese ist bei links oben ebenfalls -deltax) und diese wird in die Settings eingetragen.
Beim redraw wird diese aus den Settings gelesen und beim Zeichnen nochmals deltax subtrahiert, d. h. der Wert ist jetzt -2*deltax
Ich habe mal versucht, dies zu beheben, indem ich layer.x+deltax (= 0 bei links oben) in die Settings eingetragen habe, dies ist der Wert, der für den Benutzer richtig ist und damit scheint das Springen behoben zu sein.
Code
Alles anzeigenfunction drawTriangle(fillColor, x, y, radius) { var deltax = (1 - Math.sin(Math.PI * 2 / 3)) * radius; console.log(deltax) canvas.addLayer({ name: 'triangle', type: 'polygon', draggable: true, fillStyle: fillColor, x: x - deltax, deltax: deltax, y: y,Code
Alles anzeigenfunction updatePosition(layer) { var xPos = parseInt(Math.floor(layer.x), 10); var yPos = parseInt(Math.floor(layer.y), 10); var settings = getSettings(); deltax = layer.deltax; if (!deltax) deltax = 0; settings.x = xPos + deltax; settings.y = yPos; redraw(settings); } -
Ein potenzielles Problem beim Verschieben sehe ich noch: Beim dragstop setzt Du ja die Koordinaten in den Eingabefeldern auf die neue Position. Diese haben jedoch je einen Eventlistener für "change" und der triggert natürlich auch, wenn Du mit Javascript etwas einträgst und veranlasst ein Neuzeichnen. Trägst Du die x-Koordinate ein, wird sofort neu gezeichnet, obwohl die y-Koordinate noch gar nicht gesetzt ist. Ich könnte mir vorstellen, dass das Probleme verursacht.
Weil ich es analysieren wollte, habe ich ein Demo ohne den ganzen Overhead gemacht und dort funktioniert das Verschieben und die Ausgabe der Koordinaten einwandfrei:
-
Ich habe eine Weile suchen müssen, aber jetzt habe ich die Ursache für die zu kleine Schrift gefunden:
Die Schriftgröße wird in global.css so fest gelegt:
CSS.g-font-size-15--xs { font-size: 0.9375rem !important; }Wie man hier nachlesen kann, ist die Basis für rem die Fontsize, die im html-Element definiert ist:
https://die-netzialisten.de/wordpress/em-u…er-unterschied/Im html-Element wird die Fontsize sowohl von Bootstrap mit 10px als auch in style.css mit 16px definiert. Auf der problematischen Seite
http://kahn.8sf.de/nested-tabs-test/menu-tabs-footer.html
wird zunächst style.css und dann das Bootstrap-CSS eingezogen, so dass die 10px von Bootstrap die 16px von style.css überschreiben. Auf der Seite, wo die Schriftgröße passt, ist es umgekehrt, so dass style.css mit 16px wirksam ist.
Deaktiviert man die Definition von Bootstrap ist alle OK:
html-seminar.de/woltlab/attachment/1514/
D. h. wenn Du die Reihenfolge von style.css und Bootstrap-CSS tauschst, sollte alles wieder OK sein.
D. h. auch, dass das Problem nicht durch die Nested Tabs verursacht wird.