nicht angemeldet Felix Riesterer
Gunnar Bittersmann
JürgenB
Gunnar Bittersmann
Rolf B
Felix Riesterer
Hallo Forum,
da ich nicht ein komplettes Script installieren möchte, sondern nur die Gestaltung einer Confirm Message schön finde, habe ich habe versucht, diese aus einer Demo zu extrahieren und den Code zu nutzen.
Nun stehen aber im Original die beiden Buttons nebeneinander und bei mir untereinander und ich finde den Fehler nicht.
Kann mir bitte jemand auf die Sprpnge helfen?
Gruß, Pit
Lieber Pit,
und den Code zu nutzen.
Nun stehen aber im Original die beiden Buttons nebeneinander und bei mir untereinander und ich finde den Fehler nicht.
die Breite wird "fest" mit 50% angegeben. Da stellt sich die Frage "50% von was?". Ich habe quick&dirty folgende Änderung in Zeile 76 probiert:
.modal .modal-box .modal-buttons .modal-btn {
float: left;
width: calc(50% - 3em); /* Zeile 76 */
...
}
Liebe Grüße
Felix Riesterer
Hallo Felix,
.modal .modal-box .modal-buttons .modal-btn { float: left; width: calc(50% - 3em); /* Zeile 76 */ ... }
Ist zwar nicht Zeile 76, aber es funktioniert. 😉
Danke, Pit
@@Pit
… habe ich habe versucht, diese aus einer Demo zu extrahieren
Vergiss diesen Scheiß! Diese Demo taugt allenfalls dazu zu demonstrieren, wie man es nicht macht.
Dieser modale Dialog ist nicht tastaturbedienbar – also kurz gesagt: unbedienbar.
Wie man’s richtig macht, siehe Links in diesem Posting.
LLAP 🖖
Hallo Giunnar,
Vergiss diesen Scheiß! Diese Demo taugt allenfalls dazu zu demonstrieren, wie man es nicht macht.
Dieser modale Dialog ist nicht tastaturbedienbar – also kurz gesagt: unbedienbar.
Eigentlich gehts mir ausschließlich ums Design, nicht um die Funktionalität.
Im Grunde könte man das auch mit css-Grid nachbauen. Es geht mir, wie gesagt nur um die Anordnung der Elemente, wenn man diese dann auch ohne Maus bedienen kann, ist das umso besser.
Die Beispiele, die Du geschickt hast, habe ich angesehen, aber sie gefallen mir leider nicht.
Gruß, Pit
Hallo Pit,
Eigentlich gehts mir ausschließlich ums Design, nicht um die Funktionalität.
Funktionalität ist ein wichtiger Bestandteil des Designs. Oder entwirfst du gerade einen optischen Entwurf ohne Funktion, so wie ein Auto aus Lehm?
Gruß
Jürgen
Hallo Jürgen,
Funktionalität ist ein wichtiger Bestandteil des Designs. Oder entwirfst du gerade einen optischen Entwurf ohne Funktion, so wie ein Auto aus Lehm?
Was ich meinte ist eher: Diese Dialogboxen bringen meist neben dem Design auch eine Funktionalität mit, d.h. den fade-in-Prozess, das Abdunkeln der Hauptseite, die Reaktionen auf Buttonklicks, u.v.m Und genau diese benötige ich nicht, weil ich die Dialogbox bereits per Iframe in einer Lightbox einblende. Was ich benötige, ist quasi nur der HTML/CSS Teil selber, aus dem ich ein nett aussehendes Formular mache, was dann sozusagen meine Confirm-Box wird. Und warum ich das Formular in eine eigene Lightbox packe, liegt daran, dass ich diese Lightbox bereits häufig im Gesamtscript nutze und somit das Design insgesamt einheitlich bleibt.
Bisher nutze ich für diese Confirm-Geschichten lediglich ein Jacascript-Popup und das möchte ich gerade ersetzen.
Pit
@@Pit
Eigentlich gehts mir ausschließlich ums Design, nicht um die Funktionalität.
Design ist Funktionalität.
Ohne Funktionalität ist es nicht Design, sondern Dekoration.
Die Beispiele, die Du geschickt hast, habe ich angesehen, aber sie gefallen mir leider nicht.
Dann gestalte die funktionierenden Beispiele so, dass sie auch gefallen.
Wenn du sagst, dir ist nur wichtig, wie etwas aussieht, und nicht, ob das auch funktioniert, dann … viel Glück – du wirst es brauchen. Ich bin dann raus.
LLAP 🖖
Design ist Funktionalität.
Ohne Funktionalität ist es nicht Design, sondern Dekoration.
Wie siehts denn hiermit aus? Ist das, wenn ich es als Formular baue, per Maus bedienbar?
Die Beispiele, die Du geschickt hast, habe ich angesehen, aber sie gefallen mir leider nicht.
Dann gestalte die funktionierenden Beispiele so, dass sie auch gefallen.
Ich versuchs gerade... 😉
Wenn du sagst, dir ist nur wichtig, wie etwas aussieht, und nicht, ob das auch funktioniert, dann … viel Glück – du wirst es brauchen. Ich bin dann raus.
Was ich meinte ist eher: Diese Dialogboxen bringen meist neben dem Design auch eine Funktionalität mit, d.h. den fade-in-Prozess, das Abdunkeln der Hauptseite, die Reaktionen auf Buttonklicks, u.v.m Und genau diese benötige ich nicht, weil ich die Dialogbox bereits per Iframe in einer Lightbox einblende. Was ich benötige, ist quasi nur der HTML/CSS Teil selber, aus dem ich ein nett aussehendes Formular mache, was dann sozusagen meine Confirm-Box wird. Und warum ich das Formular in eine eigene Lightbox packe, liegt daran, dass ich diese Lightbox bereits häufig im Gesamtscript nutze und somit das Design insgesamt einheitlich bleibt.
Bisher nutze ich für diese Confirm-Geschichten lediglich ein Jacascript-Popup und das möchte ich gerade ersetzen.
Pit
Hallo Pit,
das ist erstmal nur ein Wireframe ohne Funktion.
Der Grundfehler bleibt: divs sind keine interaktiven Elemente. Man kann sie mit viel Arbeit interaktiv und bedienbar machen - aber das ist Zweckentfremdung der HTML Elemente und vom Aufwand her Blödsinn. Der Browser kann das von ganz allein, mit Buttons. Die kannst Du genauso stylen wie DIVs.
Rolf
Lieber Gunnar,
Wie man’s richtig macht, siehe Links in diesem Posting.
und was ist mit unserem eigenen Tutorial dazu in unserem Wiki?
Liebe Grüße
Felix Riesterer
@@Felix Riesterer
Wie man’s richtig macht, siehe Links in diesem Posting.
und was ist mit unserem eigenen Tutorial dazu in unserem Wiki?
Das HTML-Element dialog wurde (wird?) von Browsern stiefmütterlich behandelt, siehe Scott O’Hara: The current state of modal dialog accessibility. Ich weiß nicht, ob sich da im letzten Jahr seit Erscheinen dieses Artikels etwas Entscheidendes getan hat.
LLAP 🖖
@@Felix Riesterer
Wie man’s richtig macht, siehe Links in diesem Posting.
Und was hältst Du hiervon? Ich weiß... ggf. "Abstand" wegen JS-Voraussetzung. Aber unter Keystroke kann man ne ganze Menge einstellen.
Pit