input-elemente in einer Zeile mit variabeler Breite? von Lars, 04.08.2018 13:00

input-elemente in einer Zeile mit variabeler Breite?

Lars 04.08.2018 13:00

+1 Informationen zu den Bewertungsregeln

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-serif sein, 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ß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>&bull;</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 👍

Beitrag melden

+1 Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Lars: input-elemente in einer Zeile mit variabeler Breite?

Beitrag lesen

input-elemente in einer Zeile mit variabeler Breite?

input-elemente in einer Zeile mit variabeler Breite?