nicht angemeldet
Gunnar Bittersmann
Rolf B
Matthias Apsel
Matthias Apsel
Matthias Apsel
Rolf B
Gunnar Bittersmann
Vorweg: Ich bin kein IT-Fachmann und eigentlich habe ich die meiste Zeit kaum Ahnung, was ich mache. Ich arbeite eigentlich als Elektriker und gestalte quasi als Hobby die Homepage unserer Feuerwehr.
Derzeit arbeite ich an einem Kontakt-Formular, da unser Gästebuch nicht mehr existiert (das hatten wir auf einer anderen Seite gekauft und die ist insolvent).
Bei der Zeile mit "Straße, Hausnummer" habe ich das Problem, dass nicht beide Input-Elemente schön in einer Zeile stehen. Eigentlich sollte das Element für Straße größer sein, als das von der Hausnummer und beide sollten getrennt von einem Komma in einer Zeile stehen. Da ich in der Zeile "Postleitzahl, Stadt" das selbe Problem haben werde und ich es durch mein übliches Probieren nicht in den Griff bekomme hoffe ich dass mir hier jemand weiter helfen kann.
Mit freundlichen Grüßen L. Kruse
hallo
Derzeit arbeite ich an einem Kontakt-Formular, da unser Gästebuch nicht mehr existiert (das hatten wir auf einer anderen Seite gekauft und die ist insolvent).
Kontaktformular und Gästebuch sind sehr verschiedene Dinge!
Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten!
Einstweilen seid ihr auf einen auffälligen Email-Link beschränkt.
Kontaktformular und Gästebuch sind sehr verschiedene Dinge!
Das weiß ich auch, ist an sich auch unwichtig und gerade im Moment weiß ich selber nicht warum ich es angegeben habe.
Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten!
Danke für den Hinweis, ist erledigt 👍.
Jetzt zurück zu dem eigentlichen Problem...gibt es dafür eine recht einfach Lösung, die ich vielleicht sogar selber verstehe?
Mit freundlichen Grüßen L. Kruse
hallo
Kontaktformular und Gästebuch sind sehr verschiedene Dinge! Das weiß ich auch, ist an sich auch unwichtig und gerade im Moment weiß ich selber nicht warum ich es angegeben habe.
Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten! Danke für den Hinweis, ist erledigt 👍.
Jetzt zurück zu dem eigentlichen Problem...gibt es dafür eine recht einfach Lösung, die ich vielleicht sogar selber verstehe?
Die einfache Lösung besteht darin
Der ganze Rest kann gestrichen werden.
Aber um dein Problem zu besprechen Label un Inputs sollten zusammen gehalten werden. Das kannst du in deinem Fall mit <td colspan=2> erreichen.
Strasse [ ] NR [ ]
mit CSS
marctrixtd[colspan=2]{display:flex}
label[for=strasse] {flex:1 1 20%}
label[for=hnr] {flex:1 1 20%}
input[id=strasse] {flex:1 1 40%}
input[id=hnr] {flex:1 1 10%}
kannst du den Platzbedarf steuern.
@@beatovich
td[colspan=2]{display:flex};
Nein, dann wäre das td ja keine Tabellenzelle mehr.
Wenn die input-Elemente Flexitems sein sollen (was sicher keine schlechte Idee ist), dann bräuchte man für die Flexbox ein zusätzliches Element.
LLAP 🖖
hallo
@@beatovich
td[colspan=2]{display:flex};Nein, dann wäre das
tdja keine Tabellenzelle mehr.
Ein td bleibt ein td.
Wenn die
input-Elemente Flexitems sein sollen (was sicher keine schlechte Idee ist), dann bräuchte man für die Flexbox ein zusätzliches Element.
Eventuell machen da nicht alle browser mit.
@@beatovich
td[colspan=2]{display:flex};Nein, dann wäre das
tdja keine Tabellenzelle mehr.Ein td bleibt ein td.
Es ging um die Darstellung. Ein td mit display: flex wird nicht mehr als Tabellenzelle dargestellt, sondern als Flexbox.
LLAP 🖖
Hallo beatovich,
ich kann Gunnars Einwand bestätigen; das hatte ich neulich nämlich auch probiert und musste ein <div> einziehen, weil die Tabellenzelle nicht mehr sauber dargestellt wurde.
Ein td hat implizit display:table-cell und das machst Du mit display:flex kaputt.
Rolf
@@Lars96
eigentlich habe ich die meiste Zeit kaum Ahnung, was ich mache. Ich arbeite eigentlich als Elektriker
Ist das nicht gefährlich, wenn man als Elektriker kaum Ahnung hat, was man macht? ⚡️ 😉
Dein Formular bekommst du wohl einfacher mit Grid umgesetzt (für IE wird’s etwas aufwendiger) als mit einer Tabelle.
„Anrede“ sollte kein Pflichtfeld sein oder neben „Herr“ und „Frau“ mindestens eine weiter Option („keine Angabe“?) anbieten.
Bei wenigen Optionen ist select kein gutes UI-Element; eine Gruppe von Radiobuttons ist besser (ein Click statt zwei; alle Optionen gleich sichtbar).
Bei der Zeile mit "Straße, Hausnummer" habe ich das Problem
Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.
LLAP 🖖
Ist das nicht gefährlich, wenn man als Elektriker kaum Ahnung hat, was man macht? ⚡️ 😉
Ja da hast du recht, aber von Strom verstehe ich etwas - nur bei Software wirds äußert schwammig.
Dein Formular bekommst du wohl einfacher mit Grid umgesetzt (für IE wird’s etwas aufwendiger) als mit einer Tabelle.
Wird IE denn immernoch verwendet? 😉
„Anrede“ sollte kein Pflichtfeld sein oder neben „Herr“ und „Frau“ mindestens eine weiter Option („keine Angabe“?) anbieten.
Gut dann nehme ich die Option als Pflicht raus und sorge dafür, dass man das "Bitte auswählen" auch wieder anklicken kann (für den Fall, dass man nichts angeben möchte)
Bei wenigen Optionen ist
selectkein gutes UI-Element; eine Gruppe von Radiobuttons ist besser (ein Click statt zwei; alle Optionen gleich sichtbar).
Mir gefällt die Optik einer Dropdown-Liste allerdings besser 😜
Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.
Da mache ich mir den ganzen Abend schon nen Kopf und auf die Besten Ideen komme ich natürlich nicht 🤦
Ich freue mich riesig über die schnelle und fachkräftige Hilfe und sage vielen Dank! Werde in Zukunft öfter mal vorbeischauen, da kann ich bestimmt noch eine Menge lernen. Vielleicht kann ich ja sogar selber mal helfen (aber warscheinlich eher nicht 😟)
Hallo Lars,
Wird IE denn immernoch verwendet?
In der freien Wildbahn wohl selten, aber im Firmenumfeld sind noch viele Seiten auf IE "optimiert", bzw. man will keinen zusätzlichen Browser im Softwareportfolio haben, den man pflegen und updaten muss.
Davon kann ich ein Klagelied singen.
Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:
Verdana, sans-serif sein, damit der Browser seine serifenlose Standardschrift verwendet wenn Verdana nicht da ist.#Formatvorlagen
Du kannst Vorlagen für Absatzformatierungen über Klassen festlegen (wobei die Klasse auch fußtext heißen darf, aber das Forum highlighted das dann als falsches Zeichen):
<p class="fusstext">Freiwillige Feuerwehr Sapelloh . ©2013 . Alle Rechte vorbehalten</p>
und im CSS so einen Stil zuweisen:
p.fusstext {
font-family: Verdana,sans-serif; font-size: 8px;
color: #fff;
font-weight: normal;
text-align:right;
}
/* bzw kompakter so: */
p.fusstext {
font: normal 8px Verdana,sans-serif;
color: #fff;
text-align:right;
}
Es ist aber nicht immer nötig, HTML Elemente mit Klassen zu versehen um sie im CSS finden zu können. Gerade dein Fußtext ist auch anders erreichbar, er steht ja im Footer-Element. D.h. du könntest es so machen:
<footer>
<p>Freiwillige Feuerwehr Sapelloh <span>•</span> ©2013 <span>•</span> Alle Rechte vorbehalten</p>
</footer>
CSS:
footer p {
font: normal 8px Verdana,sans-serif;
color: #fff;
text-align:right;
}
footer p span { margin: 0 1em; }
Beachte das <footer> Element statt <div id="footer">, solche DIV Wüsten sind seit HTML5 nicht mehr nötig. Natürlich musst Du, wenn Du <footer> benutzt, dein CSS anpassen (footer statt #footer).
Wenn Du mehr Abstand um das ©2013 herum willst, solltest Du das nicht mit Spaces machen, das wird vom Browser eh nicht beachtet. Statt dessen könntest Du Trennsymbole in ein <span> einschließen und diesem Span einen Margin geben. • erzeugt übrigens genau dieses Zeichen: •. Es gibt hier auch noch andere Möglichkeiten, aber die werden für einen Nebenbei-HTMLer zu kompliziert.
Rolf
Hallo Rolf B,
In der freien Wildbahn wohl selten,
Bis demnächst
Matthias
Hej Matthias,
In der freien Wildbahn wohl selten,
Edge ist nicht ie - beide können aber tatsächlich grid, der ie imho seit Version 10, der edge seit jeher. Seit Version 16 auch in der standardisierten Schreibweise, also ohne zusätzlichen Aufwand.
Mehr unter caniuse grid
Tabellen würde ich nicht verwenden. Nicht weil die in einem einspaltigen Formular Probleme machen, sondern weil sie nicht nötig sind und somit unnötige Mühe bereiten.
Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.
Ergo steht alles untereinander und man benötigt gar keine Layout-Technik.
Ein label {display: block;margin-top: 1em} ist sicher vollkommen ausreichend.
Marc
Hallo marctrix,
Edge ist nicht ie - beide können aber tatsächlich grid, der ie imho seit Version 10, der edge seit jeher. Seit Version 16 auch in der standardisierten Schreibweise, also ohne zusätzlichen Aufwand.
Meine Angabe war unabhängig vom Anwendungsfall 😉
Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.
Genau. <https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche Eingabefelder>
Bis demnächst
Matthias
Hej Matthias,
Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.
Genau. <https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche Eingabefelder>
Sehr guter Artikel! Werde den ab sofort verlinken. Bisher habe ich auf einen bei der Aktion Mensch verwiesen (einfach für alle). Der ist aber hoffnungslos veraltet. Da war seit Einführung der BITV 1.0 wohl keiner mehr dran…
Marc
Hallo Matthias,
meine Aussage basierte auf caniuse.
Statista ist eine Sicht, caniuse eine ganz andere. Und dann habe ich ein bisschen gestöbert und finde borncity, der NetMarketShare zitiert, mit dem Fuchs bei 10.8% Desktop weltweit). Er verlinkt dann noch zu drwindows, das seine eigenen Statistiken mit 22% IE+Edge ausweist.
Caniuse sieht IE+Edge bei 5,75% insgesamt und 9,54% bei Desktop-Browsern.
Statista sagt von sich ganz klar, den Mobilmarkt nicht zu betrachten.
Wer hat die Wahrheit?
Rolf
@@Rolf B
[Browserstatistiken]
Wer hat die Wahrheit?
Jeremy Keith hat: „Ich unterstütze jeden Browser, ich optimiere für keinen.“
LLAP 🖖
Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:
- <link rel="stylesheet">... und <title> gehören nach <head>, nicht nach <body>
also bei mir in der Quelldatei stehen die elemente im <head> und wenn ich im Firefox den Quellcode lese auch 😉
- Dein basis.css definiert Überschriften bis h12. HTML kennt aber eigentlich nur h1 bis h6, und Du nutzt diese Überschriften eher als "Formatvorlagen" für Absätze (z.B. h4 im Footer). Wenn ein Absatz nicht tatsächlich die Rolle einer Überschrift spielt, solltest Du ihn als <p> gestalten. Du kannst individuelles Design für bestimmte Paragraphentypen entweder über Klassen erreichen, oder über CSS Selektoren. Dazu schreibe ich weiter unten noch was.
Was das angeht → Ich gebe zu, dass ich das Layout nicht selber geschrieben habe, ich habe das von einer Freundin übernommen, die WebDesign studiert hat (zu der Zeit hatte sie damit erst angefangen) und seitdem habe ich keine nennenswerten Änderung mehr vorgenommen (never touch a running system 😉 )
- Nur Verdana als font-family vorzugeben ist nicht gut. Diese Schrift gibt es nicht überall. Das Minimum sollte
Verdana, sans-serifsein, damit der Browser seine serifenlose Standardschrift verwendet wenn Verdana nicht da ist.
Gut zu wissen, das werde ich ergänzen.
- Eine Table als Layoutbasis für das Formular ist nicht mehr das, was man so macht. Guck mal hier. Es ist übrigens nicht verkehrt, wenn die Labels ÜBER den Eingabefeldern stehen statt links davor. Ein Handy-Nutzer freut sich.
Hm...macht sinn, das heißt also: Zurück ans Zeichenbrett 😕
- In der vom Wiki vorgeschlagene Definitionsliste kannst Du die dt/dd über Media-Abfragen wahlweise neben- oder übereinander gestalten, wenn Du die dt/dd noch in ein div einschließt. Das ist laut HTML Spezifikation erlaubt. Auf schmalen Bildschirmen lässt Du es übereinander, auf breiten Bildschirmen machst Du aus dem div eine Flexbox.
Das Prinzip der Flexboxen habe ich irgendwie immer noch nicht verstanden, weswegen ich mich dagegen gerne sträube ...
- Wenn Du unbedingt PLZ/Ort getrennt erfassen willst (was man eigentlich nur für Mailings braucht), kannst Du das betreffende dd zur Flexbox machen, so wie beat weiter oben vorschlug. Aber eigentlich ist das nicht nötig, oder willst Du basierend auf den Kontaktanfragen automatisierte Mailings erzeugen?
Nein ich hatte vor (da ich nicht übermäßig viele Anfragen erwarte) sie von Hand zu beantworten.
#Formatvorlagen
Du kannst Vorlagen für Absatzformatierungen über Klassen festlegen (wobei die Klasse auch
fußtextheißen darf, aber das Forum highlighted das dann als falsches Zeichen):<p class="fusstext">Freiwillige Feuerwehr Sapelloh . ©2013 . Alle Rechte vorbehalten</p>und im CSS so einen Stil zuweisen:
p.fusstext { font-family: Verdana,sans-serif; font-size: 8px; color: #fff; font-weight: normal; text-align:right; } /* bzw kompakter so: */ p.fusstext { font: normal 8px Verdana,sans-serif; color: #fff; text-align:right; }Es ist aber nicht immer nötig, HTML Elemente mit Klassen zu versehen um sie im CSS finden zu können. Gerade dein Fußtext ist auch anders erreichbar, er steht ja im Footer-Element. D.h. du könntest es so machen:
<footer> <p>Freiwillige Feuerwehr Sapelloh <span>•</span> ©2013 <span>•</span> Alle Rechte vorbehalten</p> </footer>CSS:
footer p { font: normal 8px Verdana,sans-serif; color: #fff; text-align:right; } footer p span { margin: 0 1em; }Beachte das <footer> Element statt <div id="footer">, solche DIV Wüsten sind seit HTML5 nicht mehr nötig. Natürlich musst Du, wenn Du <footer> benutzt, dein CSS anpassen (footer statt #footer).
Wenn Du mehr Abstand um das ©2013 herum willst, solltest Du das nicht mit Spaces machen, das wird vom Browser eh nicht beachtet. Statt dessen könntest Du Trennsymbole in ein <span> einschließen und diesem Span einen Margin geben. • erzeugt übrigens genau dieses Zeichen: •. Es gibt hier auch noch andere Möglichkeiten, aber die werden für einen Nebenbei-HTMLer zu kompliziert.
Klingt einleuchtend und ich werde mal versuchen das entsprechend ohne den div zu lösen.
Vielen Dank für die tollen Vorschläge 👍
Hallo Lars,
- <link rel="stylesheet">... und <title> gehören nach <head>, nicht nach <body> also bei mir in der Quelldatei stehen die elemente im <head> und wenn ich im Firefox den Quellcode lese auch 😉
So zeigt es der Inspektor an:
In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge.
Bis demnächst
Matthias
Hi Matthias
In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge.
Aber was soll denn an dem </head> bzw. <body> -tag falsch sein? 😕
Hier noch der Ausschnitt aus der Original-Datei um veränderung durch das Interpretieren des Browsers auszuschließen.
Gruß Lars
Hallo Lars,
In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge. Aber was soll denn an dem </head> bzw. <body> -tag falsch sein? 😕
Hier noch der Ausschnitt aus der Original-Datei um veränderung durch das Interpretieren des Browsers auszuschließen.
Bei dir gibt es ein öffnendes <body>-Tag im head-Element. Mit dem Auftreten dieses Tags wird der head vom Browser geschlossen. Dann kommt noch ein zweites <body>-Tag. Das ist nicht erlaubt. Zum Validieren gibt es zum Beispiel https://validator.w3.org/
Bis demnächst
Matthias
Hallo Lars,
ein div zwischen head und body ist auch nicht der Weisheit letzter Schluss.
head und body sind die einzigen erlaubten Kinder des html Elements. Alles andere gehört in diese beiden hinein.
Rolf
Hallo Rolf,
head und body sind die einzigen erlaubten Kinder des html Elements. Alles andere gehört in diese beiden hinein.
Das weiß ich, ich habe auch schonmal irgendwo in dem Thread erwähnt, dass das Layout nicht von mir stammt und ich quasi nur die Daten einpflege und mich nie großartig getraut habe bestehende Seiten zu ändern. Bis heute jedenfalls 😉
Gruß Lars
@@Rolf B
ein div zwischen head und body ist auch nicht der Weisheit letzter Schluss.
Im DOM ist kein div zwischen head und body.
Nach </html> ist der Parser im ‘after head’ insertion mode. Das nächste gelesene <div>-Tag fällt unter ‘anything else’, demzufolge wird ein body-Element generiert, in den ‘in body’ insertion mode gewechselt und das aktuelle Token (<div>) nochmals verarbeitet – und damit das div in den eben generierten body gehängt.
Nach dem </div> – der Parser befindet sich im ‘in body’ insertion mode – wird <body> gelesen. Parse error – was soll’s. Es gilt das unter ‘Otherwise’ gesagte: Etwaige im Tag vorhandene Attribute (hier nicht der Fall) werden dem schon bestehenden body-Element hinzugefügt, falls dort noch keine derartigen Attribute gibt. (Es werden also keine schon vorhandenen Werte durch das fehlerhafte <body>-Start-Tag überschrieben.)
Damit generiert das HTML
<html>
<head></head>
<div>
NECK
</div>
<body>
BODY
</body>
</html>
dasselbe DOM wie:
<html>
<head></head>
<body>
<div>
NECK
</div>
BODY
</body>
</html>
(Stillschweigend vorausgesetzt, das XHTML 1.0 wird vom HTML-Parser verarbeitet, nicht vom XML-Parser.)
LLAP 🖖
PS: Bei der Recherche bin ich auf dieses Fundstück gestoßen.
@@Gunnar Bittersmann
Oops, da hab ich ja glatt ein <body>-Tag übersehen.
Der Parser ist im ‘in head’ insertion mode und liest <body>, was unter ‘Anything else’ zählt. Der head wird geschlossen, der Parser wechselt in den ‘after head’ insertion mode, das Token <body> wird erneut verarbeitet, body wird geöffnet, der Parser wechselt in den ‘in body’ insertion mode.
Der Parser liest <link> und tut damit dasselbe, als wenn er im ‘in head’ insertion mode wäre.
Der Parser liest <title> und tut damit dasselbe, als wenn er im ‘in head’ insertion mode wäre.
Der Parser liest </head>, was zur ‘special category’ zählt, parse error (so what?), das Tag wird ignoriert.
Der Parser liest <div> und fügt ein div-Element in den body ein.
Weiter wie zuvor beschrieben.
<html>
<head>
<body>
<link>
<title>TITLE</title>
</head>
<div>
NECK
</div>
<body>
BODY
</body>
</html>
generiert dasselbe DOM wie:
<html>
<head></head>
<body>
<link>
<title>TITLE</title>
<div>
NECK
</div>
BODY
</body>
</html>
LLAP 🖖
Hallo Lars,
Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:
Ich auch und mir sind auch noch andere Dinge aufgefallen:
<li><a href="/index.php" title="Hier klicken">Home</a> </li>
Ein Tooltipp mit "Hier klicken" ist hochgradig sinnfrei. Stattdessen solltest du bei :hover (wenn man mit der Maus über den Link fährt) ein deutlich sichtbares Feedback geben und nicht nur die Linkfarbe von schwarz auf nicht_ganz_so_dunkel_schwarz ändern. Vielleicht eine Unterstreichung oder[1] eine helle Farbe wählen. Zudem solltest du ein Feedback bei :focus (wenn der Link mit der Tastatur angewählt wird) nicht vergessen. Wenigstens hast du den kleinen Rahmen nicht entfernt.
Schriftgrößen sollten nicht in px sondern in em angegeben werden.
Abstände möchtest du nicht mit <br> erzeugen, sondern mithilfe von CSS, etwa margin.
<button type="submit">Senden</button>
Da submit für button-Elemente der default-type ist, geht das auch kürzer:
<button>Senden</button>
Überlege dir wirklich, ob du soviele verpflichtende Angaben für ein simples Textformualar haben willst. Siehe dazu diese Forumsdiskussion und den dort verlinkten Blog-Artikel.
Bis demnächst
Matthias
Das oder steht hier ausdrücklich für das logische Oder, also auch für und, denn man sollte visuelle Interaktionen nicht nur auf eine Eigenschaft beschränken. ↩︎
Hallo Matthias,
Ein Tooltipp mit "Hier klicken" ist hochgradig sinnfrei.
Hat mich auch irgendwie immer irritiert, aber wie gesagt ich habe kaum Ahnung von HTML und daher dachte ich das muss so 😉
Stattdessen solltest du bei :hover (wenn man mit der Maus über den Link fährt) ein deutlich sichtbares Feedback geben und nicht nur die Linkfarbe von schwarz auf nicht_ganz_so_dunkel_schwarz ändern. Vielleicht eine Unterstreichung oder1 eine helle Farbe wählen. Zudem solltest du ein Feedback bei :focus (wenn der Link mit der Tastatur angewählt wird) nicht vergessen.
Kommt auch mit auf meine ToDo-Liste (die wird ja immer länger 😕)
Überlege dir wirklich, ob du soviele verpflichtende Angaben für ein simples Textformualar haben willst.
Das haben mitlerweile ja schon mehrere kritisiert → wird also noch geändert 👍
Gruß Lars
@@Matthias Apsel
Stattdessen solltest du bei
:hover(wenn man mit der Maus über den Link fährt) ein deutlich sichtbares Feedback geben und nicht nur die Linkfarbe von schwarz auf nicht_ganz_so_dunkel_schwarz ändern. Vielleicht eine Unterstreichung oder eine helle Farbe wählen.
Warum? Hovereffekte sind überbewertet. Ein Hovereffekt darf durchaus subtil sein, auch nicht vorhanden (Cursor ausgenommen, der soll sich natürlich bei Links zu einem Pointer (Hand) ändern.)
Zudem solltest du ein Feedback bei
:focus(wenn der Link mit der Tastatur angewählt wird) nicht vergessen. Wenigstens hast du den kleinen Rahmen nicht entfernt.
Der Fokus hingegen sollte allerdings deutlich erkennbar sein, ja.
Man kann auch unterschiedliche Stile für :focus und :hover vorsehen.
LLAP 🖖
Hallo Lars,
also bei mir in der Quelldatei stehen die elemente im <head>
Also entweder bist Du ein Schlingel und hast das fix verschoben, oder ich bin ein Trottel und habe eine der anderen Seiten offen gehabt als ich das feststellte (Kommando, Termine, Einsätze).
Das Prinzip der Flexboxen habe ich irgendwie immer noch nicht verstanden,
Unser Wiki hat einiges dazu, und wenn Du es spielerisch lernen willst, guck Dir mal das dort verlinkte Flexboxfroggy an 😀
Flexbox ist extrem mächtig und erspart sehr viele Klimmzüge aus der fernen table- und float-Layout Vergangenheit. Die nächste Stufe ist grid, damit stehe ich auch noch auf fremdem Fuß bzw. muss jedesmal neu nachlesen.
Rolf
Hallo Rolf B,
also bei mir in der Quelldatei stehen die elemente im <head>
Also entweder bist Du ein Schlingel und hast das fix verschoben, oder ich bin ein Trottel
Das Dokument hat(te) zwei body-Elemente.
Bis demnächst
Matthias
@@Rolf B
Flexbox ist extrem mächtig und erspart sehr viele Klimmzüge aus der fernen table- und float-Layout Vergangenheit. Die nächste Stufe ist grid, damit stehe ich auch noch auf fremdem Fuß bzw. muss jedesmal neu nachlesen.
Nächste Stufe?? Du meinst table → float → flexbox → grid?
Da musst du wohl wirklich nochmal nachlesen, denn dass ist völlig falsch.
Grid wird nicht Flexbox ablösen, sondern beides besteht nebeneinander – für unterschiedliche Einsatzzwecke.
Anstelle von nachlesen geht auch anschauen: Layoutland: Flexbox vs. CSS Grid — Which is Better?
LLAP 🖖
@@Lars
Wird IE denn immernoch verwendet? 😉
Ja. Baue deine Seiten so, dass sie auch im IE funktionieren. Auch im IE 6.
Was nicht heißt, dass die Seiten im IE genauso funktionieren müssen wie in modernen Browsern. Und schon gar nicht, dass die Seiten genauso aussehen müssen.
Bei wenigen Optionen ist
selectkein gutes UI-Element; eine Gruppe von Radiobuttons ist besser (ein Click statt zwei; alle Optionen gleich sichtbar). Mir gefällt die Optik einer Dropdown-Liste allerdings besser 😜
Design ist keine Geschmacksfrage.
Außerdem ist irrelevant, was dir gefällt. Relevant ist, was den Benutzern deiner Seiten gefällt. Und das ist wohl eher einfache Bedienung als haute couture.
LLAP 🖖
hi,
Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.
Der Meinung bin ich auch. In Grunde genommen reicht für eine ganze Mail eine <textarea> die man mit Mitteln des CSS wunderbar platzieren und gestalten kann.
Dem könnte man evntl. noch ein <input type="mail"> beilegen. Also für den Absender, falls man diese Info dediziert zu speichern vorhat. Datenschutzerklärung nicht vergessen.
MfG