Versions-Historie des Beitrags „input-elemente in einer Zeile mit variabeler Breite?“

input-elemente in einer Zeile mit variabeler Breite?

bearbeitet von

Rolf B 04.08.2018 10:11

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: - <link rel="stylesheet">... und <title> gehören nach <head>, nicht nach <body> - 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. - Nur Verdana als font-family vorzugeben ist nicht gut. Diese Schrift gibt es nicht überall. Das Minimum sollte `Verdana, sans-serif` sein, damit der Browser seine serifenlose Standardschrift verwendet wenn Verdana nicht da ist. - Eine Table als Layoutbasis für das Formular ist nicht mehr das, was man so macht. [Guck mal hier](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare_erstellen_und_gestalten#Semantischer_Code). Es ist übrigens nicht verkehrt, wenn die Labels ÜBER den Eingabefeldern stehen statt links davor. Ein Handy-Nutzer freut sich. - In der vom Wiki vorgeschlagene Definitionsliste kannst Du die dt/dd über [Media-Abfragen](https://wiki.selfhtml.org/wiki/CSS/Media_Queries) 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. - 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? #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): ~~~html <p class="fusstext">Freiwillige Feuerwehr Sapelloh . ©2013 . Alle Rechte vorbehalten</p> ~~~ und im CSS so einen Stil zuweisen: ~~~css 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: ~~~html <footer> <p>Freiwillige Feuerwehr Sapelloh <span>•</span> ©2013 <span>•</span> Alle Rechte vorbehalten</p> </footer> ~~~ CSS: ~~~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_ -- sumpsi - posui - clusi

input-elemente in einer Zeile mit variabeler Breite?

bearbeitet von

Rolf B 04.08.2018 10:52