tag:forum.selfhtml.org,2005:/self input-elemente in einer Zeile mit variabeler Breite? – SELFHTML-Forum 2018-08-05T00:58:12Z https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728094#m1728094 Lars96 lars-kruse4@web.de http://www.feuerwehr-sapelloh.de 2018-08-03T21:27:39Z 2018-08-03T21:27:39Z input-elemente in einer Zeile mit variabeler Breite? <p>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.</p> <p>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).</p> <p>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.</p> <p>Mit freundlichen Grüßen L. Kruse</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728096#m1728096 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-08-03T21:49:21Z 2018-08-03T22:01:57Z input-elemente in einer Zeile mit variabeler Breite? <p>hallo</p> <blockquote> <p>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).</p> </blockquote> <p>Kontaktformular und Gästebuch sind sehr verschiedene Dinge!</p> <p>Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten!</p> <p>Einstweilen seid ihr auf einen auffälligen Email-Link beschränkt.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728105#m1728105 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-03T23:48:40Z 2018-08-03T23:48:40Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Lars96</p> <blockquote> <p>eigentlich habe ich die meiste Zeit kaum Ahnung, was ich mache. Ich arbeite eigentlich als Elektriker</p> </blockquote> <p>Ist das nicht gefährlich, wenn man als Elektriker kaum Ahnung hat, was man macht? ⚡️ </p> <p>Dein Formular bekommst du wohl einfacher <a href="https://codepen.io/gunnarbittersmann/pen/ZjRoyx" rel="noopener noreferrer">mit Grid umgesetzt</a> (für IE wird’s etwas aufwendiger) als mit einer Tabelle.</p> <p>„Anrede“ sollte kein Pflichtfeld sein oder neben „Herr“ und „Frau“ <a href="https://de.wikipedia.org/wiki/Drittes_Geschlecht" rel="nofollow noopener noreferrer">mindestens eine weiter Option</a> („keine Angabe“?) anbieten.</p> <p>Bei wenigen Optionen ist <code>select</code> kein gutes UI-Element; eine Gruppe von Radiobuttons ist besser (ein Click statt zwei; alle Optionen gleich sichtbar).</p> <blockquote> <p>Bei der Zeile mit "Straße, Hausnummer" habe ich das Problem</p> </blockquote> <p>Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728099#m1728099 Lars96 lars-kruse4@web.de http://www.feuerwehr-sapelloh.de 2018-08-03T22:30:41Z 2018-08-03T22:30:41Z input-elemente in einer Zeile mit variabeler Breite? <blockquote> <p>Kontaktformular und Gästebuch sind sehr verschiedene Dinge!</p> </blockquote> <p>Das weiß ich auch, ist an sich auch unwichtig und gerade im Moment weiß ich selber nicht warum ich es angegeben habe.</p> <blockquote> <p>Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten!</p> </blockquote> <p>Danke für den Hinweis, ist erledigt .</p> <p>Jetzt zurück zu dem eigentlichen Problem...gibt es dafür eine recht einfach Lösung, die ich vielleicht sogar selber verstehe?</p> <p>Mit freundlichen Grüßen L. Kruse</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728101#m1728101 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-08-03T23:00:45Z 2018-08-03T23:00:45Z input-elemente in einer Zeile mit variabeler Breite? <p>hallo</p> <blockquote> <blockquote> <p>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.</p> </blockquote> <blockquote> <p>Bevor ihr daran geht, ein Kontaktformular bereitzustellen, bitte erst https einrichten! Danke für den Hinweis, ist erledigt .</p> </blockquote> <p>Jetzt zurück zu dem eigentlichen Problem...gibt es dafür eine recht einfach Lösung, die ich vielleicht sogar selber verstehe?</p> </blockquote> <p>Die einfache Lösung besteht darin</p> <ul> <li>ein Feld für email</li> <li>ein Feld für weitere optionale Kontaktangaben.</li> </ul> <p>Der ganze Rest kann gestrichen werden.</p> <p>Aber um dein Problem zu besprechen Label un Inputs sollten zusammen gehalten werden. Das kannst du in deinem Fall mit <td colspan=2> erreichen.</p> <p>Strasse [ ] NR [ ]</p> <p>mit CSS</p> <pre><code class="block">td[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%} </code></pre> <p>kannst du den Platzbedarf steuern.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728103#m1728103 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-03T23:10:14Z 2018-08-03T23:15:54Z input-elemente in einer Zeile mit variabeler Breite? <p>@@beatovich</p> <blockquote> <p><code class="bad">td[colspan=2]{display:flex};</code></p> </blockquote> <p>Nein, dann wäre das <code>td</code> ja keine Tabellenzelle mehr.</p> <p>Wenn die <code>input</code>-Elemente Flexitems sein sollen (was sicher keine schlechte Idee ist), dann bräuchte man für die Flexbox ein zusätzliches Element.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728104#m1728104 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-08-03T23:38:37Z 2018-08-03T23:38:37Z input-elemente in einer Zeile mit variabeler Breite? <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p><code class="bad">td[colspan=2]{display:flex};</code></p> </blockquote> <p>Nein, dann wäre das <code>td</code> ja keine Tabellenzelle mehr.</p> </blockquote> <p>Ein td bleibt ein td.</p> <blockquote> <p>Wenn die <code>input</code>-Elemente Flexitems sein sollen (was sicher keine schlechte Idee ist), dann bräuchte man für die Flexbox ein zusätzliches Element.</p> </blockquote> <p>Eventuell machen da nicht alle browser mit.</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728106#m1728106 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-03T23:51:18Z 2018-08-03T23:51:18Z input-elemente in einer Zeile mit variabeler Breite? <p>@@beatovich</p> <blockquote> <blockquote> <blockquote> <p><code class="bad">td[colspan=2]{display:flex};</code></p> </blockquote> <p>Nein, dann wäre das <code>td</code> ja keine Tabellenzelle mehr.</p> </blockquote> <p>Ein td bleibt ein td.</p> </blockquote> <p>Es ging um die Darstellung. Ein <code>td</code> mit <code>display: flex</code> wird nicht mehr als Tabellenzelle dargestellt, sondern als Flexbox.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728116#m1728116 Rolf B 2018-08-04T08:08:40Z 2018-08-04T08:08:40Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo beatovich,</p> <p>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.</p> <p>Ein td hat implizit display:table-cell und das machst Du mit display:flex kaputt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728107#m1728107 Lars 2018-08-04T00:01:06Z 2018-08-04T00:01:06Z input-elemente in einer Zeile mit variabeler Breite? <blockquote> <p>Ist das nicht gefährlich, wenn man als Elektriker kaum Ahnung hat, was man macht? ⚡️ </p> </blockquote> <p>Ja da hast du recht, aber von Strom verstehe ich etwas - nur bei Software wirds äußert schwammig.</p> <blockquote> <p>Dein Formular bekommst du wohl einfacher <a href="https://codepen.io/gunnarbittersmann/pen/ZjRoyx" rel="noopener noreferrer">mit Grid umgesetzt</a> (für IE wird’s etwas aufwendiger) als mit einer Tabelle.</p> </blockquote> <p>Wird IE denn immernoch verwendet? </p> <blockquote> <p>„Anrede“ sollte kein Pflichtfeld sein oder neben „Herr“ und „Frau“ <a href="https://de.wikipedia.org/wiki/Drittes_Geschlecht" rel="nofollow noopener noreferrer">mindestens eine weiter Option</a> („keine Angabe“?) anbieten.</p> </blockquote> <p>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)</p> <blockquote> <p>Bei wenigen Optionen ist <code>select</code> kein gutes UI-Element; eine Gruppe von Radiobuttons ist besser (ein Click statt zwei; alle Optionen gleich sichtbar).</p> </blockquote> <p>Mir gefällt die Optik einer Dropdown-Liste allerdings besser </p> <blockquote> <p>Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.</p> </blockquote> <p>Da mache ich mir den ganzen Abend schon nen Kopf und auf die Besten Ideen komme ich natürlich nicht </p> <p>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 )</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728184#m1728184 pl 2018-08-04T15:37:34Z 2018-08-04T15:37:34Z input-elemente in einer Zeile mit variabeler Breite? <p>hi,</p> <blockquote> <p>Brauchst du für irgendwas Straße und Hausnummer getrennt? Wenn nicht, mach ein Eingabefeld daraus.</p> </blockquote> <p>Der Meinung bin ich auch. In Grunde genommen reicht für eine ganze Mail eine <code><textarea></code> die man mit Mitteln des CSS wunderbar platzieren und gestalten kann.</p> <p>Dem könnte man evntl. noch ein <code><input type="mail"></code> beilegen. Also für den Absender, falls man diese Info dediziert zu speichern vorhat. Datenschutzerklärung nicht vergessen.</p> <p>MfG</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728117#m1728117 Rolf B 2018-08-04T08:11:30Z 2018-08-04T08:52:02Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <blockquote> <p>Wird IE denn immernoch verwendet?</p> </blockquote> <p>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.</p> <p>Davon kann ich ein Klagelied singen.</p> <p>Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:</p> <ul> <li><link rel="stylesheet">... und <title> gehören nach <head>, nicht nach <body></li> <li>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.</li> <li>Nur Verdana als font-family vorzugeben ist nicht gut. Diese Schrift gibt es nicht überall. Das Minimum sollte <code>Verdana, sans-serif</code> sein, damit der Browser seine serifenlose Standardschrift verwendet wenn Verdana nicht da ist.</li> <li>Eine Table als Layoutbasis für das Formular ist nicht mehr das, was man so macht. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare_erstellen_und_gestalten#Semantischer_Code" rel="nofollow noopener noreferrer">Guck mal hier</a>. Es ist übrigens nicht verkehrt, wenn die Labels ÜBER den Eingabefeldern stehen statt links davor. Ein Handy-Nutzer freut sich.</li> <li>In der vom Wiki vorgeschlagene Definitionsliste kannst Du die dt/dd über <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">Media-Abfragen</a> 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.</li> <li>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?</li> </ul> <p>#Formatvorlagen</p> <p>Du kannst Vorlagen für Absatzformatierungen über Klassen festlegen (wobei die Klasse auch <code>fußtext</code> heißen darf, aber das Forum highlighted das dann als falsches Zeichen):</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fusstext<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Freiwillige Feuerwehr Sapelloh . ©2013 . Alle Rechte vorbehalten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>und im CSS so einen Stil zuweisen:</p> <pre><code class="block language-css"><span class="token selector">p.fusstext</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* bzw kompakter so: */</span> <span class="token selector">p.fusstext</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> normal 8px Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Freiwillige Feuerwehr Sapelloh <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>•<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ©2013 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&bull;">&bull;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Alle Rechte vorbehalten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> <p>CSS:</p> <pre><code class="block language-css"><span class="token selector">footer p</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> normal 8px Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer p span</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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).</p> <p>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. &bull; erzeugt übrigens genau dieses Zeichen: •. Es gibt hier auch noch andere Möglichkeiten, aber die werden für einen Nebenbei-HTMLer zu kompliziert.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728221#m1728221 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-04T19:26:21Z 2018-08-04T19:26:21Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Lars</p> <blockquote> <p>Wird IE denn immernoch verwendet? </p> </blockquote> <p>Ja. Baue deine Seiten so, dass sie auch im IE funktionieren. Auch im IE 6.</p> <p>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.</p> <blockquote> <blockquote> <p>Bei wenigen Optionen ist <code>select</code> kein 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 </p> </blockquote> </blockquote> <p>Design ist keine Geschmacksfrage.</p> <p>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 <em lang="fr">haute couture</em>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728118#m1728118 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T08:27:02Z 2018-08-04T08:27:02Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Rolf B,</p> <blockquote> <p>In der freien Wildbahn wohl selten,</p> </blockquote> <p><a href="https://de.statista.com/statistik/daten/studie/13007/umfrage/marktanteile-der-browser-bei-der-internetnutzung-in-deutschland-seit-2009/" rel="nofollow noopener noreferrer">IE und Edge: 15%</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728128#m1728128 Lars 2018-08-04T11:00:07Z 2018-08-04T11:00:07Z input-elemente in einer Zeile mit variabeler Breite? <blockquote> <p>Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:</p> <ul> <li><link rel="stylesheet">... und <title> gehören nach <head>, nicht nach <body></li> </ul> </blockquote> <p>also bei mir in der Quelldatei stehen die elemente im <head> und wenn ich im Firefox den Quellcode lese auch </p> <blockquote> <ul> <li>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.</li> </ul> </blockquote> <p>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 )</p> <blockquote> <ul> <li>Nur Verdana als font-family vorzugeben ist nicht gut. Diese Schrift gibt es nicht überall. Das Minimum sollte <code>Verdana, sans-serif</code> sein, damit der Browser seine serifenlose Standardschrift verwendet wenn Verdana nicht da ist.</li> </ul> </blockquote> <p>Gut zu wissen, das werde ich ergänzen.</p> <blockquote> <ul> <li>Eine Table als Layoutbasis für das Formular ist nicht mehr das, was man so macht. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare_erstellen_und_gestalten#Semantischer_Code" rel="nofollow noopener noreferrer">Guck mal hier</a>. Es ist übrigens nicht verkehrt, wenn die Labels ÜBER den Eingabefeldern stehen statt links davor. Ein Handy-Nutzer freut sich.</li> </ul> </blockquote> <p>Hm...macht sinn, das heißt also: Zurück ans Zeichenbrett </p> <blockquote> <ul> <li>In der vom Wiki vorgeschlagene Definitionsliste kannst Du die dt/dd über <a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">Media-Abfragen</a> 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.</li> </ul> </blockquote> <p>Das Prinzip der Flexboxen habe ich irgendwie immer noch nicht verstanden, weswegen ich mich dagegen gerne sträube ...</p> <blockquote> <ul> <li>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?</li> </ul> </blockquote> <p>Nein ich hatte vor (da ich nicht übermäßig viele Anfragen erwarte) sie von Hand zu beantworten.</p> <blockquote> <p>#Formatvorlagen</p> <p>Du kannst Vorlagen für Absatzformatierungen über Klassen festlegen (wobei die Klasse auch <code>fußtext</code> heißen darf, aber das Forum highlighted das dann als falsches Zeichen):</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fusstext<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Freiwillige Feuerwehr Sapelloh . ©2013 . Alle Rechte vorbehalten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p>und im CSS so einen Stil zuweisen:</p> <pre><code class="block language-css"><span class="token selector">p.fusstext</span> <span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* bzw kompakter so: */</span> <span class="token selector">p.fusstext</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> normal 8px Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Freiwillige Feuerwehr Sapelloh <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>•<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> ©2013 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&bull;">&bull;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> Alle Rechte vorbehalten<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> </code></pre> <p>CSS:</p> <pre><code class="block language-css"><span class="token selector">footer p</span> <span class="token punctuation">{</span> <span class="token property">font</span><span class="token punctuation">:</span> normal 8px Verdana<span class="token punctuation">,</span>sans-serif<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer p span</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 1em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>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).</p> <p>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. &bull; erzeugt übrigens genau dieses Zeichen: •. Es gibt hier auch noch andere Möglichkeiten, aber die werden für einen Nebenbei-HTMLer zu kompliziert.</p> </blockquote> <p>Klingt einleuchtend und ich werde mal versuchen das entsprechend ohne den div zu lösen.</p> <p>Vielen Dank für die tollen Vorschläge </p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728124#m1728124 marctrix self@mhis.de https://www.mhis.de 2018-08-04T10:08:52Z 2018-08-04T10:08:52Z input-elemente in einer Zeile mit variabeler Breite? <p>Hej Matthias,</p> <blockquote> <blockquote> <p>In der freien Wildbahn wohl selten,</p> </blockquote> <p><a href="https://de.statista.com/statistik/daten/studie/13007/umfrage/marktanteile-der-browser-bei-der-internetnutzung-in-deutschland-seit-2009/" rel="nofollow noopener noreferrer">IE und Edge: 15%</a>.</p> </blockquote> <p>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.</p> <p>Mehr unter <a href="https://caniuse.com/#search=Grid" rel="noopener noreferrer">caniuse grid</a></p> <p>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.</p> <p>Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.</p> <p>Ergo steht alles untereinander und man benötigt gar keine Layout-Technik.</p> <p>Ein <code>label {display: block;margin-top: 1em}</code> ist sicher vollkommen ausreichend.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728176#m1728176 Rolf B 2018-08-04T15:17:16Z 2018-08-04T15:17:16Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Matthias,</p> <p>meine Aussage basierte auf caniuse.</p> <p>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.</p> <p>Caniuse sieht IE+Edge bei 5,75% insgesamt und 9,54% bei Desktop-Browsern.</p> <p>Statista sagt von sich ganz klar, den Mobilmarkt nicht zu betrachten.</p> <p>Wer hat die Wahrheit?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728125#m1728125 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T10:30:48Z 2018-08-04T10:30:48Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo marctrix,</p> <blockquote> <blockquote> <p><a href="https://de.statista.com/statistik/daten/studie/13007/umfrage/marktanteile-der-browser-bei-der-internetnutzung-in-deutschland-seit-2009/" rel="nofollow noopener noreferrer">IE und Edge: 15%</a>.</p> </blockquote> <p>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.</p> </blockquote> <p>Meine Angabe war unabhängig vom Anwendungsfall </p> <blockquote> <p>Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.</p> </blockquote> <p>Genau. <https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche Eingabefelder></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728127#m1728127 marctrix self@mhis.de https://www.mhis.de 2018-08-04T10:50:42Z 2018-08-04T10:50:42Z input-elemente in einer Zeile mit variabeler Breite? <p>Hej Matthias,</p> <blockquote> <blockquote> <p>Beschriftungen gehören über Eingabe-Felder, dann ist der Bezug auch bei extremen Vergrößerungen noch klar.</p> </blockquote> <p>Genau. <https://wiki.selfhtml.org/wiki/CSS/Tutorials/zugängliche Eingabefelder></p> </blockquote> <p>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…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728131#m1728131 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T11:22:47Z 2018-08-04T11:22:47Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <blockquote> <blockquote> <ul> <li><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 </li> </ul> </blockquote> </blockquote> <p>So zeigt es der Inspektor an:</p> <p><a href="/images/f7f7883f-2725-4295-8bb0-4beee5e616c1.png" rel="noopener noreferrer"><img src="/images/f7f7883f-2725-4295-8bb0-4beee5e616c1.png?size=medium" alt="Screenshot Inspektoransicht" loading="lazy"></a></p> <p>In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge.</p> <p><a href="/images/b39e9824-bc7b-4f50-8d39-567fc4b09893.png" rel="noopener noreferrer"><img src="/images/b39e9824-bc7b-4f50-8d39-567fc4b09893.png?size=medium" alt="Screenshot Quelltextansicht" loading="lazy"></a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728137#m1728137 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T11:42:45Z 2018-08-04T11:42:45Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <blockquote> <blockquote> <p>Ich habe mir gerade nochmal dein HTML angeschaut. Da sind ein paar Dinge unsauber:</p> </blockquote> </blockquote> <p>Ich auch und mir sind auch noch andere Dinge aufgefallen:</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/index.php<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Hier klicken<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p>Ein Tooltipp mit "Hier klicken" ist hochgradig sinnfrei. Stattdessen solltest du bei <code>:hover</code> (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<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> eine helle Farbe wählen. Zudem solltest du ein Feedback bei <code>:focus</code> (wenn der Link mit der Tastatur angewählt wird) nicht vergessen. Wenigstens hast du den kleinen Rahmen nicht entfernt.</p> <p>Schriftgrößen sollten nicht in <code>px</code> sondern in <code>em</code> angegeben werden.</p> <p>Abstände möchtest du nicht mit <code><br></code> erzeugen, sondern mithilfe von CSS, etwa <code>margin</code>.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Da <code>submit</code> für button-Elemente der default-type ist, geht das auch kürzer:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>Senden<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p>Überlege dir wirklich, ob du soviele verpflichtende Angaben für ein simples Textformualar haben willst. Siehe dazu <a href="https://forum.selfhtml.org/m1726902" rel="noopener noreferrer">diese Forumsdiskussion</a> und den dort verlinkten Blog-Artikel.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Das <em>oder</em> steht hier ausdrücklich für das logische Oder, also auch für <em>und</em>, denn man sollte visuelle Interaktionen nicht nur auf eine Eigenschaft beschränken. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728179#m1728179 Rolf B 2018-08-04T15:24:23Z 2018-08-04T15:24:23Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <blockquote> <p>also bei mir in der Quelldatei stehen die elemente im <head></p> </blockquote> <p>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).</p> <blockquote> <p>Das Prinzip der Flexboxen habe ich irgendwie immer noch nicht verstanden,</p> </blockquote> <p>Unser Wiki hat <a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox" rel="nofollow noopener noreferrer">einiges</a> dazu, und wenn Du es spielerisch lernen willst, guck Dir mal das dort verlinkte Flexboxfroggy an </p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728134#m1728134 Lars 2018-08-04T11:34:30Z 2018-08-04T11:34:30Z input-elemente in einer Zeile mit variabeler Breite? <p>Hi Matthias</p> <blockquote> <p>In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge.</p> </blockquote> <p>Aber was soll denn an dem </head> bzw. <body> -tag falsch sein? </p> <p><a href="/images/12e573cb-547b-4acd-b809-dda09ed1477d.gif" rel="noopener noreferrer"><img src="/images/12e573cb-547b-4acd-b809-dda09ed1477d.gif?size=medium" alt="Quellcode-Ausschnitt" title="Auszug aus der Quelldatei" loading="lazy"></a> Hier noch der Ausschnitt aus der Original-Datei um veränderung durch das Interpretieren des Browsers auszuschließen.</p> <p>Gruß Lars</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728138#m1728138 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T11:49:37Z 2018-08-04T11:49:37Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <blockquote> <blockquote> <p>In der Quelltextansicht steht roter Text für fehlerhafte oder korrigierte Dinge. Aber was soll denn an dem </head> bzw. <body> -tag falsch sein? </p> </blockquote> <p><a href="/images/12e573cb-547b-4acd-b809-dda09ed1477d.gif" rel="noopener noreferrer"><img src="/images/12e573cb-547b-4acd-b809-dda09ed1477d.gif?size=medium" alt="Quellcode-Ausschnitt" title="Auszug aus der Quelldatei" loading="lazy"></a></p> </blockquote> <blockquote> <p>Hier noch der Ausschnitt aus der Original-Datei um veränderung durch das Interpretieren des Browsers auszuschließen.</p> </blockquote> <p>Bei dir gibt es ein öffnendes <code><body></code>-Tag im <code>head</code>-Element. Mit dem Auftreten dieses Tags wird der <code>head</code> vom Browser geschlossen. Dann kommt noch ein zweites <code><body></code>-Tag. Das ist nicht erlaubt. Zum Validieren gibt es zum Beispiel <a href="https://validator.w3.org/" rel="nofollow noopener noreferrer">https://validator.w3.org/</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728196#m1728196 Rolf B 2018-08-04T16:41:46Z 2018-08-04T16:41:46Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Lars,</p> <p>ein div zwischen head und body ist auch nicht der Weisheit letzter Schluss.</p> <p>head und body sind die einzigen erlaubten Kinder des html Elements. Alles andere gehört in diese beiden hinein.</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundger%C3%BCst" rel="nofollow noopener noreferrer">Noch etwas Lektüre</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728140#m1728140 Lars 2018-08-04T11:52:27Z 2018-08-04T11:52:27Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Matthias,</p> <blockquote> <p>Ein Tooltipp mit "Hier klicken" ist hochgradig sinnfrei.</p> </blockquote> <p>Hat mich auch irgendwie immer irritiert, aber wie gesagt ich habe kaum Ahnung von HTML und daher dachte ich das muss so </p> <blockquote> <p>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.</p> </blockquote> <p>Kommt auch mit auf meine ToDo-Liste (die wird ja immer länger )</p> <blockquote> <p>Überlege dir wirklich, ob du soviele verpflichtende Angaben für ein simples Textformualar haben willst.</p> </blockquote> <p>Das haben mitlerweile ja schon mehrere kritisiert → wird also noch geändert </p> <p>Gruß Lars</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728197#m1728197 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-04T16:46:46Z 2018-08-04T16:46:46Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Matthias Apsel</p> <blockquote> <p>Stattdessen solltest du bei <code>:hover</code> (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.</p> </blockquote> <p>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.)</p> <blockquote> <p>Zudem solltest du ein Feedback bei <code>:focus</code> (wenn der Link mit der Tastatur angewählt wird) nicht vergessen. Wenigstens hast du den kleinen Rahmen nicht entfernt.</p> </blockquote> <p>Der Fokus hingegen sollte allerdings deutlich erkennbar sein, ja.</p> <p><a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723390#m1723390" rel="noopener noreferrer">Man kann auch unterschiedliche Stile für <code>:focus</code> und <code>:hover</code> vorsehen.</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728219#m1728219 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-04T19:14:35Z 2018-08-04T19:14:35Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Rolf B</p> <blockquote> <p>[Browserstatistiken]</p> <p>Wer hat die Wahrheit?</p> </blockquote> <p>Jeremy Keith hat: „Ich unterstütze jeden Browser, ich optimiere für keinen.“</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728189#m1728189 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-08-04T16:07:00Z 2018-08-04T16:07:00Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Rolf B,</p> <blockquote> <blockquote> <p>also bei mir in der Quelldatei stehen die elemente im <head></p> </blockquote> <p>Also entweder bist Du ein Schlingel und hast das fix verschoben, oder ich bin ein Trottel</p> </blockquote> <p><a href="https://forum.selfhtml.org/m1728138" rel="noopener noreferrer">Das Dokument hat(te) zwei body-Elemente</a>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728195#m1728195 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-04T16:38:12Z 2018-08-04T16:38:12Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Rolf B</p> <blockquote> <p>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.</p> </blockquote> <p>Nächste Stufe?? Du meinst table → float → flexbox → grid?</p> <p>Da musst du wohl wirklich nochmal nachlesen, denn dass ist völlig falsch.</p> <p>Grid wird nicht Flexbox ablösen, sondern beides besteht nebeneinander – für unterschiedliche Einsatzzwecke.</p> <p>Anstelle von nachlesen geht auch anschauen: <a href="https://www.youtube.com/watch?v=hs3piaN4b5I&list=PLbSquHt1VCf18lllS0C5quAaOcsuMAC70&index=4" lang="en" rel="nofollow noopener noreferrer">Layoutland: Flexbox vs. CSS Grid — Which is Better?</a></p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728200#m1728200 Lars 2018-08-04T16:57:17Z 2018-08-04T16:57:17Z input-elemente in einer Zeile mit variabeler Breite? <p>Hallo Rolf,</p> <blockquote> <p>head und body sind die einzigen erlaubten Kinder des html Elements. Alles andere gehört in diese beiden hinein.</p> </blockquote> <p>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 </p> <p>Gruß Lars</p> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728228#m1728228 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-04T20:45:14Z 2018-08-04T20:45:14Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Rolf B</p> <blockquote> <p>ein div zwischen head und body ist auch nicht der Weisheit letzter Schluss.</p> </blockquote> <p>Im DOM ist kein div zwischen head und body.</p> <p>Nach <code></html></code> ist der Parser im <a href="https://w3c.github.io/html/syntax.html#the-after-head-insertion-mode" lang="en" rel="nofollow noopener noreferrer">‘after head’ insertion mode</a>. Das nächste gelesene <code><div></code>-Tag fällt unter <em lang="en">‘anything else’</em>, demzufolge wird ein <code>body</code>-Element generiert, in den <em lang="en">‘in body’ insertion mode</em> gewechselt und das aktuelle Token (<code><div></code>) nochmals verarbeitet – und damit das <code>div</code> in den eben generierten <code>body</code> gehängt.</p> <p>Nach dem <code></div></code> – der Parser befindet sich im <a href="https://w3c.github.io/html/syntax.html#in-body" lang="en" rel="nofollow noopener noreferrer">‘in body’ insertion mode</a> – wird <code><body></code> gelesen. <em lang="en">Parse error</em> – was soll’s. Es gilt das unter <em lang="en">‘Otherwise’</em> gesagte: Etwaige im Tag vorhandene Attribute (hier nicht der Fall) werden dem schon bestehenden <code>body</code>-Element hinzugefügt, falls dort noch keine derartigen Attribute gibt. (Es werden also keine schon vorhandenen Werte durch das fehlerhafte <code><body></code>-Start-Tag überschrieben.)</p> <p>Damit generiert das HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> NECK <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> BODY <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>dasselbe DOM wie:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> NECK <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> BODY <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>(Stillschweigend vorausgesetzt, das XHTML 1.0 wird vom HTML-Parser verarbeitet, nicht vom XML-Parser.)</p> <p>LLAP </p> <p>PS: Bei der Recherche bin ich auf <a href="https://forum.selfhtml.org/self/2018/aug/4/das-stern-g-stern-zum-wochenende/1728227#m1728227" rel="noopener noreferrer">dieses Fundstück</a> gestoßen.</p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/aug/3/input-elemente-in-einer-zeile-mit-variabeler-breite/1728243#m1728243 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-08-05T00:58:12Z 2018-08-05T00:58:12Z input-elemente in einer Zeile mit variabeler Breite? <p>@@Gunnar Bittersmann</p> <p>Oops, da hab ich ja glatt ein <code><body></code>-Tag übersehen.</p> <p>Der Parser ist im <a href="https://w3c.github.io/html/syntax.html#in-head" lang="en" rel="nofollow noopener noreferrer">‘in head’ insertion mode</a> und liest <code><body></code>, was unter <em lang="en">‘Anything else’</em> zählt. Der <code>head</code> wird geschlossen, der Parser wechselt in den <em lang="en">‘after head’ insertion mode</em>, das Token <code><body></code> wird erneut verarbeitet, <code>body</code> wird geöffnet, der Parser wechselt in den <em lang="en">‘in body’ insertion mode</em>.</p> <p>Der Parser liest <code><link></code> und tut damit dasselbe, als wenn er im <em lang="en">‘in head’ insertion mode</em> wäre.</p> <p>Der Parser liest <code><title></code> und tut damit dasselbe, als wenn er im <em lang="en">‘in head’ insertion mode</em> wäre.</p> <p>Der Parser liest <code></head></code>, was zur <em lang="en">‘special category’</em> zählt, <em lang="en">parse error</em> <em lang="en">(so what?)</em>, das Tag wird ignoriert.</p> <p>Der Parser liest <code><div></code> und fügt ein <code>div</code>-Element in den <code>body</code> ein.</p> <p>Weiter wie zuvor beschrieben.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>TITLE<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> NECK <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> BODY <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>generiert dasselbe DOM wie:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>TITLE<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> NECK <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> BODY <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div>