nicht angemeldet einsiedler
einsiedler
einsiedler
marctrix
einsiedler
Auge
einsiedler
marctrix
einsiedler
einsiedler
Hallo liebe Forumer,
mich läßt es nicht los, aber nun habe ich eine konkrete Idee für den Websiteaufbau.
Ich verwende für die Grundstrucktur grid und im grid - Element selbst flexbox.
Meine Grundstruktur HEADER / MAIN / FOOTER (vertikal) ein grid-Raster:
Im Element MAIN ein weiteres grid-Raster : 3 Elemente horizontal nebeneinander:
Der Inhalt jedes ITEMS wird mit flexbox positioniert:
Nun meine Frage: Macht es so Sinn meine Seite zu gestalten oder wäre es so "zu kompliziert"!
(Wegen den Verschachtelungen und so...!!!)
Nun muss das Ganze noch responsive gemacht werden, ich möchte das das letzte ITEM in der
Reihe in die nächste Zeile umspringt wenn das Bildschirmfenster schmaler wird oder die
Schriftgröße vergrößert wird. Würde das so Sinn machen?
Gibt es im Netz ein konkretes Beispiel wie soetwas gemacht wird?
Ein weiteres Problem: Wie bringe ich das Ganze dem IE bei?
(Aber eins nach dem anderen!!!)
Gibt es sonst nochetwas zu bemängeln, was fällt euch auf?
Nächtlicher Gruß der einsiedelnde
Hallo
Du denkst viel zu kompliziert.
Für header, main und footer sind Flexbox oder CSS-Grid überhaupt nicht erforderlich.
Wenn der IE bis herunter zum IE11 unterstützt werden sollen, sollte auf CSS-Grid verzichtet werden.
Gruss
MrMurphy
Ja, verstehe, aber ich möchte ja etwas "dazulernen", aber villeicht ist mir das "zu hoch".
Du meinst also in etwa so: Demo Seite ohne grid
Das habe ich mir aus Deinen Beispielen zusammengebastelt.
Also in etwa so.
Ich dachte mir, das Ganze etwas schöner und besser zu "gestalten", ansprechender!
Hmmmm… der einsiedelnde
Hallo
Ich dachte mir, das Ganze etwas schöner und besser zu "gestalten", ansprechender!
Genau aus der Schiene musst du rauskommen. Dieser Unsinn wird im Zusammenhang mit CSS-Grid leider regelmäßig verbreitet. Gerne mit dem Argument Flexbox sei eindimensional, CSS-Grid sei zweidimensional (und damit besser). Oder CSS-Grid sei neuer und deshalb besser.
Flexbox und CSS-Grid sind aber nur unterschiedliche Lösungen für unterschiedliche Aufgaben. Eine Wertung Flexbox ist besser als CSS-Grid oder umgekehrt CSS-Grid ist besser als Flexbox geht an den Tatsachen schlicht vorbei.
CSS-Grid hat im Gegensatz zu Flexbox einige Nachteile, mit CSS-Grid sind aber auch Lösungen möglich die Flexbox nicht oder nur auf Umwegen regeln kann.
Mit CSS-Grid unsinnige Lösungen erstellen zu wollen nur um CSS-Grid zu verwenden wird dich nicht weiterbringen.
Was auf einige Zeit auch nicht funktioniert ist CSS-Grid mit dem IE zu verwenden. CSS-Grid wird erst am Edge 16 unterstützt. Ältere IE ab Version 11 unterstützen CSS-Grid nur eingeschränkt und mit einer eigenen Syntax. Selbst einfache CSS-Grid-Layouts lassen sich damit kaum nachbauen.
Wenn du ein CSS-Grid-Testlayout erstellen willst solltest du also nicht gleichzeitig die Unterstützung vom IE fordern. Das passt nicht zusammen.
Du kannst deine Beispielseite natürlich zum Lernen mit einigen CSS-Grid-Anweisungen erstellen.
Außerdem solltest du direkt schreiben ob du eine Seite zum Testen oder für den praktischen Einsatz erstellen willst. Die Formulierung in deinem ersten Beitrag deutet (jedenfalls für mich) auf die Erstellung einer praktischen Seite hin.
Gruss
MrMurphy
CSS-Grid hat im Gegensatz zu Flexbox einige Nachteile, mit CSS-Grid sind aber auch Lösungen möglich die Flexbox nicht oder nur auf Umwegen regeln kann.
Gut, anscheinend ist dies in meinem speziellen Fall nicht so, das es mir nützen würde (also grid)!
O.K., soweit hab ich es verstanden!
Also zurück zu dem einfachen Beispiel einfaches Card-Layout DEMO
Könnte man dies auf diesem Weg so "anpassen", daß eine "ähnliche" (ich sage bewußt "ähnlich"!!!) Lösung wie bei meinem gewünschten Bild der anderen Webseite dabei herauskommt?
Sicherlich werde ich durch media-querie-Einstellungen ein horizontales ITEM das zu einem vertikalen ITEM wird, noch anders anordnen, also bei bestimmten Umbrüchen.
Wäre das so möglich? Und das es "ähnlich" aussähe?
(Ich lese grad eine andere Antwort in diesem Thread: Also wenn möglich wäre ich zufrieden wenn ab dem IE 10 meine Seite halbwegs "gut" aussähe!!!)
sich fragend der einsiedelnde
Hallo
Könnte man dies auf diesem Weg so "anpassen", daß eine "ähnliche" (ich sage bewußt "ähnlich"!!!) Lösung wie bei meinem gewünschten Bild der anderen Webseite dabei herauskommt?
Das Grundlayout ist doch bereits ähnlich. Eigentlich müssen nur Farben und die Anordnung innerhalb der einzelnen Cards angepasst werden.
Wäre das so möglich? Und das es "ähnlich" aussähe?
Also: Ja.
Also wenn möglich wäre ich zufrieden wenn ab dem IE 10 meine Seite halbwegs "gut" aussähe!
Mit der Anforderung: Nein.
Zumal die Verwendung des IE10 gegen Null tendiert. Das wäre sehr viel Aufwand für Niemanden.
Ich selbst habe den IE10 überhaupt nicht mehr und kann schon aus diesem Grund keine Webseiten für ihn testen und damit erstellen. Und ich will es auch gar nicht. Nach der Logik (Webseiten für spezielle veraltete Browser unterstützen) müssten Webseiten auch für den IE8 und den IE6 angepasst werden. Deren Verwendung ist ähnlich hoch wie der IE10.
Wobei zum Testen älterer nicht die Entwicklertools aktuellerer IE (zum Beispiel des IE11) verwendet werden sollten. Mit denen funktionieren CSS-Anweisungen, die im echten IE10 und anderen noch älteren IE nicht funktionieren.
Wer Seiten in älteren IE testen will braucht deshalb auch die originalen Browser, nicht irgendwelche Emulatoren. Und dazu dann auch ein passendes Betriebssystem. Also virtuelle Rechner. Oder noch besser: Komplette separate Rechner.
Der älteste IE, für den sich der Aufwand von Anpassungen noch halbwegs lohnt, ist der IE11.
Und wer wirklich noch mit echten alten IE (oder anderen veralteten Browsern) surft, freut sich schon, wenn Webseiten übersichtlich einspaltig angezeigt werden.
Hinzu kommt: Die Anzahl von Surfern, die körperliche Einschränkungen haben ist deutlich höher als die solcher, welche mit veralteten Browsern unterwegs sind. Wer Besucher freundlich empfangen und zur Wiederkehr animieren möchte, sollte also zugängliche (schlechterer Begriff: barrierefreie) Webseiten erstellen. Damit erreicht man einen viel größeren Personenkreis.
Gruss
MrMurphy
Hej MrMurphy1,
Also wenn möglich wäre ich zufrieden wenn ab dem IE 10 meine Seite halbwegs "gut" aussähe!
Mit der Anforderung: Nein.
Zumal die Verwendung des IE10 gegen Null tendiert. Das wäre sehr viel Aufwand für Niemanden.
Habe gerade eine Webseite in der Mache, bei der IE9 unterstützt werden muss. Von einem Auftraggeber, der sich auskennt. Kann man nicht gegen argumentieren. Gibt es leider manchmal noch.
Hast trotzdem ein Plus von mir, weil ich dir eigentlich gerne recht geben möchte und ich die Dinge, die du schriebst, genauso sehe. Aber Menschen und Ansichten unterscheiden sich und auch die andere Seite hat manchmal keine schlechten Argumente. Außerdem ist in vielen Bereichen der Aufwand überschaubar. So lange der bezahlt wird ist es mir (fast) egal.
Zum Testen stellt MS virtuelle Maschinen kostenlos bereit.
Microsoft tut eigentlich recht viel, um Entwickler dabei zu unterstützen, auch für ältere Software zu entwickeln. Obwohl MS selber die alten Dinger lieber heute als morgen verschwinden sehen möchte…
Marc
Zumal die Verwendung des IE10 gegen Null tendiert. Das wäre sehr viel Aufwand für Niemanden.
O.K., wußte ich noch nicht. Dachte er wäre noch relevant, da mir mal ein System-Admin einer sehr großen Firma mal gesagt hatte das dort immer noch mit WinXP Rechnern gearbeitet wird. (Warum auch immer...) Klar was dann dort für ein IE aufgespielt ist!
Aber von denen guckt sich ja niemand meine Seite an. ;o)) Hoffentlich...
Und auch niemand der ähnliche "Rentner" besitzt... Nicht meine Zielgruppe... ;o))))
Der älteste IE, für den sich der Aufwand von Anpassungen noch halbwegs lohnt, ist der IE11.
O.K. ...
Bleibt zu hoffen das der auch bald nicht mehr relevant sein wird und mit dem Edge ist dann viel mehr möglicher!
Hinzu kommt: Die Anzahl von Surfern, die körperliche Einschränkungen haben ist deutlich höher als die solcher, welche mit veralteten Browsern unterwegs sind. Wer Besucher freundlich empfangen und zur Wiederkehr animieren möchte, sollte also zugängliche (schlechterer Begriff: barrierefreie) Webseiten erstellen. Damit erreicht man einen viel größeren Personenkreis.
O.K., gut.... wird so gemacht! :o)
Ich arbeite am nächsten Demo-Projekt...
der einsiedelnde
Hallo
Zumal die Verwendung des IE10 gegen Null tendiert. Das wäre sehr viel Aufwand für Niemanden.
O.K., wußte ich noch nicht. Dachte er wäre noch relevant, da mir mal ein System-Admin einer sehr großen Firma mal gesagt hatte das dort immer noch mit WinXP Rechnern gearbeitet wird. (Warum auch immer...) Klar was dann dort für ein IE aufgespielt ist!
Zwangsläufig der IE8, ein Neuerer funktioniert unter Windows XP nicht. Davon abgesehen habe ich es oft erlebt, dass für firmeneigene Webanwendungen der IE* vorgeschrieben wird, weil die Anwendung für genau diesen IE* entwickelt oder zuletzt mit diesem getestet wurde, dass aber ein moderner™️ Webbrowser für das Surfen außerhalb des Intranets/abseits der nämlichen Webanwendung installiert ist.
Aber von denen guckt sich ja niemand meine Seite an. ;o)) Hoffentlich...
Wenn die Seite benutzbar ist, also alle zur Nutzung des Angebots notwendigen interaktiven Elemente bedienbar und alle Inhalte erfassbar sind, sieht sie im Uralt-IE* halt nicht so aus, wie in aktuellen Browsern.
Bleibt zu hoffen das der auch bald nicht mehr relevant sein wird und mit dem Edge ist dann viel mehr möglicher!
Der Edge ist seit wann an Bord? Windows 10? Für den gibt es Feature-Updates. Der IE11 ist in Windows 10 aber auch dabei und für den gibt es keine Feature-Updates mehr. Das heißt, selbst Windows-10-Benutzer können den IE11 benutzen. Aussterben wird der wohl nicht so einfach. Laut CanIUse dümpelt er aktuell bei einem Marktanteil von unter 3% herum. Die älteren IE-Versionen bringen es nach der dortigen Zählung auf „satte“ 0.56%, wobei der IE8 mit 0.28% den größten Anteil hält (das sind vermutlich die XP-Benutzer).
Der IE in seiner letzten Version geht also vermutlich nicht (absolut) weg, aber Relevanz sieht anders aus.
Tschö, Auge
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Aber hier dann mein: +1
gruß der einsiedelnde
Hej einsiedler,
Nun muss das Ganze noch responsive gemacht werden, ich möchte das das letzte ITEM in der
Reihe in die nächste Zeile umspringt wenn das Bildschirmfenster schmaler wird oder die
Schriftgröße vergrößert wird. Würde das so Sinn machen?
Sinn macht, wenn es in Dein Design-Knzept passt. Sieht für mich derzeit eher ein bisschen nach Experiment aus.
Nicht dass ich Experimente nciht gut fände — Sie sind ein guter, vielleicht der beste Weg herauszufinden, was wie funktioniert und um erste Erfahrungen zu sammeln.
Nur lässt sich so die Frage nach der Sinnhaftigkeit eigentlich nicht beantworten.
Gibt es im Netz ein konkretes Beispiel wie soetwas gemacht wird?
Für Grid? Für flex-box? Hunderte, tausende! - Für genau dein Layout? Bestimmt auch. Nur wie sollte man das finden? Mir fälllt dazu kein passender Suchbegriff ein…
Ein weiteres Problem: Wie bringe ich das Ganze dem IE bei?
(Aber eins nach dem anderen!!!)
Grid? Zu einem (recht kleinen) Teil (der media-queries verlangt) mittels -ms--Vendor-Prefix.
Ansonsten bist du mit flexbox flexibler (Hammerwortspiel, oder?).
Aber mir scheint, die Grundsatz-Diskussionen unter anderem zwischen mir und @Gunnar Bittersmann sind dir bekannt?
Erste Frage: darf es im IE auch linear sein, wie man es vielen Webseiten ohnehin gewohnt ist oder muss da auch alles mehrspaltig sein?
Dann brauchst du dich um den IE gar nciht zu kümmern und kannst dennoch grid benutzen (progressive enhancement). Aufgrund der schwindenden Marktanteile ein durchaus gangbarer Weg.
Gibt es sonst nochetwas zu bemängeln, was fällt euch auf?
IM HTML habe ich keine skipnavigation gefunden, aber eine link, mit dem man zum Hauptinhalt kommt. Dieser Link heißt "skip navigation", was weder das Ziel beschreibt, noch in der angegebenen Sprache (deutsch) verfasst ist. Ich bin ein Freund von sehr kurzen Skip-Navis (am liebsten nur ein Link zum Hauptinhalt, wenn die Navigation ohnehin direkt danach kommt, sonst noch ein Link zur Navi).
Auch würde ich die Skip-Navi an den Seitenanfang direkt hinter <body> setzen. Sonst bekommt jemand der den header nicht durchlesen will, gar nciht mit, dass es eine Skip-Navi überhaupt gibt.
Marc
Ja natürlich, es ist ein Experiment, ich möchte "dazulernen"!
So hatte ich es auch vor mit media-queries den main-Bereich entsprechend der jeweiligen Bedingung zu "gestalten / anzupassen".
So in etwa wie bei diesem sehr einfach gehaltenen Beispiel: Demo-Beispiel ohne grid
(Ist "zusammengebastalt" aus MrMurphys Demo-Beispiel-Kiste!!!) :o)))
Aber ich stelle mir vor das das Ganze auch ein wenig ansprechender funktioniert.
Linear, also in etwa so wie in dem verlinkten Beispiel!
Ja O.k., so geht es wohl, aber warum einfach wenn es auch kompliziert geht! grins
Ich bleibe dabei (um zu lernen), auch wenn das CSS sehr umfanreich sein wird...
der einsiedelnde
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Aber hier dann mein: +1
gruß der einsiedelnde
Hallo,
habe noch zu wenig Punkte.
57 Punkte sollten aber reichen…
Gruß
Kalk
@@Tabellenkalk
57 Punkte sollten aber reichen…
Die Zahl sagt mir doch was … Ah ja, 57 channels (and nothin’ on).
“They busted me for disturbing the almighty peace.”
LLAP 🖖
@@Tabellenkalk
57 Punkte sollten aber reichen…
Die Zahl sagt mir doch was … Ah ja, 57 channels (and nothin’ on).
Da rollen sich einem ja die Fußnägel auf…
Weiß nicht wo die auf einmal herkommen ... grinsel
Aber mir scheint, die Grundsatz-Diskussionen unter anderem zwischen mir und @Gunnar Bittersmann sind dir bekannt?
Genau so ist es, mich "zerreist" es immer, wenn ich hier lese, ein hin und her.
Und stelle mir die Frage was eigentlich dann "das RICHTIGE!" ist.
Schade das es nicht soetwas wie einen "Kanon" gibt, das wäre hilfreicher!
seufzend der einsiedelnde
@@einsiedler
Genau so ist es, mich "zerreist" es immer, wenn ich hier lese, ein hin und her.
Und stelle mir die Frage was eigentlich dann "das RICHTIGE!" ist.
Schade das es nicht soetwas wie einen "Kanon" gibt, das wäre hilfreicher!
Gibt’s doch: einer stimmt an, ein anderer fällt ein.
Na schön, beim Kanon sollten alle dasselbe singen. Hier ist’s eher ein Quodlibet. 😄
LLAP 🖖
Hej einsiedler,
Aber mir scheint, die Grundsatz-Diskussionen unter anderem zwischen mir und @Gunnar Bittersmann sind dir bekannt?
Genau so ist es, mich "zerreist" es immer, wenn ich hier lese, ein hin und her.
Und stelle mir die Frage was eigentlich dann "das RICHTIGE!" ist.
Schade das es nicht soetwas wie einen "Kanon" gibt, das wäre hilfreicher!
Den gibt es doch. Ich verfolge ja nicht alle Diskussionen, aber über die meisten Dinge sind @Gunnar Bittersmann und ich derselben Meinung. Unterschiede gibt es nur in Nuancen.
@Gunnar Bittersmann ist konsequenter in der Hinsicht, die für einen Zweck beste Technik einzusetzen und kann besser damit leben, ältere Browser nur rudimentär zu unterstützen.
Ich bekomme immer wieder Aufträge, in denen auch zum aussehen im ie bis runter zu Version 9 Vorgaben gemacht werden. Deswegen setze ich manchmal Techniken ein, die ich selber nicht mehr verwenden möchte. Manchmal sogar noch float oder absolute Positionierung.
Gut finde ich das nicht, es kann mir aber doppelte Arbeit ersparen, auf solche Hacks zu setzen, statt komfortablere, modenere Techniken zu verwenden.
Dabei bin ich eigentlich ein Freund davon, dem Browser die Arbeit zu überlassen, die Elemente nach Regeln, die ich vorgebe anzuordnen. Das geht mit Flexbox weitestgehend ab ie10, mit css grid gar nicht im ie und im Edge erst ab Version 16.
Dennoch wünsche ich mir sehr, diese Techniken einsetzen zu können und ich rede mir bei Vorgesetzten, Product Ownern, Kunden den Mund fusselig, um dahin zu kommen!
Die Frage, an der ich mich mit Gunnar manchmal reibe ist doch nur, in wie feinen Abstufungen progressive enhancement umgesetzt werden soll.
Es gibt keine Uneinigkeit darin, dass die beste Technik zu bevorzugen ist, dass es nicht in allen Browsern gleich aussehen muss, dass eine Seite von jedem bedient werden können muss, dass progressive enhancement, mobile first, separation of concern und andere Prinzipien nötig sind, um Webseiten zu erstellen, die für Entwickler und Nutzer sinnvoll sind. Wo man also wartbarkeit und ausbaufähigkeit erhält und am Ende eine benutzerfreundliches Ergebnis entsteht, das auch Suchmaschinen nicht ausschließt.
Aber du würdest jetzt gerne wissen, welche Technik „die beste“ ist.
Die gibt es leider nicht. Jede Technik hat Vorteile und Nachteile. Welche Technik die am besten geeignete ist, hängt vom konkreten Anwendungsfall und vom gewünschten Ergebnis ab.
Daher ist es gut, dass du experimentierst. Dadurch wirst du ein Gefühl bekommen, was passiert, wenn man Flexbox oder grid verwendet. Die wirst den Unterschied im Verhalten verstehen, die Möglichkeiten und Grenzen der Techniken erleben und schließlich bei einem konkreten Layout-Wunsch eine Technik mit gutem Grund bevorzugen können.
Marc
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Aber hier dann mein: +1
gruß der einsiedelnde
Hej einsiedler,
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Wird schon!
Aber hier dann mein: +1
Dankeschön - freut mich, wenn es hilft!
Marc
@@einsiedler
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Ob der Trick mit „habe noch zu wenig Punkte“ bei mir auch zieht? 😆
LLAP 🖖
Hallo Gunnar Bittersmann,
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Ob der Trick mit „habe noch zu wenig Punkte“ bei mir auch zieht? 😆
Klar 😝😝😝😝
Bis demnächst
Matthias
Mooooooooooooooooment, wie das hier mit den Punkten gehandhabt wird, ist euer Ding... :o)
Ich weiß, wieviel Punkte ich hatte, als ich die Nachrichten gepostet hatte!
der einsiedelnde
Hej Gunnar,
@@einsiedler
Leider kann ich Dir keine Bewertung geben, habe noch zu wenig Punkte.
Ob der Trick mit „habe noch zu wenig Punkte“ bei mir auch zieht? 😆
Wenn wir alle fleißig downvoten. Dann hieven wir dich hinterher auch gerne wieder auf 50 hoch 😉
Marc
Hallo marctrix,
Wenn wir alle fleißig downvoten. Dann hieven wir dich hinterher auch gerne wieder auf 50 hoch 😉
Ein einmal erhaltenes Recht verliert man nicht.
Bis demnächst
Matthias
Hej Matthias,
Wenn wir alle fleißig downvoten. Dann hieven wir dich hinterher auch gerne wieder auf 50 hoch 😉
Ein einmal erhaltenes Recht verliert man nicht.
Danke für den Hinweis. Da wird @Gunnar Bittersmann sich freuen! 😉
Marc
@@Gunnar Bittersmann
Oh, ich bin jetzt zuhause.
(Ich bin in Bernau aufgewachsen, PLZ jetzt 16321.)
LLAP 🖖
Nun bin ich dabei eine Web-Version nur mit ein wenig flexbox zu erarbeiten!
klar, die Boxen werden ein wenig verschachtelt...
In der nächsten Zeit werde ich euch dies zur Korrektur vorstellen... :o)
grüße der einsiedelnde
Tabellenkalk
Gunnar Bittersmann
Matthias Apsel