Beiträge von MrMurphy

    Du hast aber schon gelesen:


    Zitat

    Bei dem Beispiel geht es erst mal um das grundsätzliche Verhalten.


    Zitat

    was zwar mit float:left


    float ist hier sachlich falsch und hilft nicht weiter.


    Zitat

    In deinem Vorschlag stehen die 3 Angaben untereinander.


    Ja klar, bei schmalen Fensterbreiten. Bei größeren Fensterbreiten dann die von dir gewünschte Anordnung. Bei noch größeren Fensterbreiten können dann alle drei Angaben mit CSS-Grid nebeneinander angeordnet werden.


    Zitat

    Mit meiner Lösung passen


    Das wird kaum die Lösung aus deinem ersten Beitrag sein, die enthält schließlich keine breiten Inhalte, die die Breite bestimmen können. Auf Beispiele zu verweisen, die wir nicht kennen, macht keinen Sinn, dazu können wir nämlich nichts schreiben.


    Zitat

    passen sich die Zellbreiten dem breitesten Inhalt an,


    Das geht meiner Kenntnis nach nicht alleine mit HTML und CSS, schon gar nicht bei Input-Elementen. Wenn du eine entsprechende Lösung hast kannst du die gerne zeigen.

    Hallo


    Für dein Vorhaben ist CSS-Grid am sinnvollsten.


    Ich habe mal ein einfaches Beispiel erstellt:



    Die Größen, Abstände, ... kannst du natürlich nach Bedarf anpassen. Bei dem Beispiel geht es erst mal um das grundsätzliche Verhalten.

    Für dein Vorhaben gibt es auch keine Lösung.


    Bücher, Screenreader und Webseiten sind technisch vollkommen unterschiedliche Techniken.


    Erfahrungsgrundsatz: Wer in Büchern denkt kann keine guten Webseiten erstellen. Und: Webseiten lassen sich nicht in Bücher umwandeln.


    Bei Fachartikeln sind die Unterschiede noch gravierender. Quellenangaben und Verweise ähnlich wie in Büchern sind für Webseiten in HTML überhaupt nicht vorgesehen, sondern müssen mit eigentlich unfähigen Mitteln konstruiert werden.


    Bei Webseiten sind Verweise wie in Fachbüchern nicht möglich, da zum Beispiel Seitenzahlen nicht bekannt sind. Bei gedruckten Texten werden Verweise von jeder besseren Textverarbeitung automatisch aktuell gehalten und gepflegt. Bei Webseiten gibt es hingegen direkte Links.


    Beispiele für Fachartikel sind zum Beispiel Wiki-Seiten, allen voran Wikipedia. Das kommt deinen Vorstellungen aktuell wohl am nächsten. Allerdings müssen sich die Autoren in die Technik einarbeiten und Standards vorgegeben und überwacht werden. Ohne Überwachung bringen Trolle solche Projekte schnell zum Scheitern. Oder man darf halt nur bestimmten vertrauenswürdigen Autoren Änderungen erlauben.


    Oder du verwendest Content Management Systeme (CMS), die aber noch weniger als Wikis für Fachartikel ausgelegt sind.


    Eine Lösung, dass Autoren ihre Beiträge ähnlich wie in Textverarbeitungen schreiben können und die dann mehr oder weniger automatisch in Webseiten umgewandelt werden oder umgekehrt, gibt es nicht.

    Im Firefox kannst du in den Entwickerwerkzeugen ( rechte Maustaste - Element untersuchen) zu jeder Grid-Anweisung (display: grid;) die Rasterlinien mit einem Klick auf das Raster-Icon wechselweise ein- und wieder ausblenden.

    Tut mir leid aber da muss ich dir leider widersprechen.


    Ich habe bereits vieler solcher Seiten auf einen aktuellen Stand gebracht. Nicht in einem einzigen Fall haben sie die Mitglieder für das alte Layout entschieden.


    Die anderen Mitglieder haben in deinem Fall ja überhaupt keine Möglichkeit sich zu entscheiden, weil sie überhaupt keine Vergleichsmöglichkeit haben.


    Du kannst natürlich machen was du willst. Auch schlechte Webseiten.


    Aber dann bitte nicht behaupten, dass deine Ergebnisse irgend etwas mit aktuellen benutzerfreundlichen Webseiten zu tun haben. Dazu gehört viel mehr.


    Auf einem Handy / Smartphone ist zum Beispiel entscheidend die Informationen problemlos erhalten zu können. Und nicht durch unnötiges Hin- und Herscrollen in alle Richtungen und dabei auch noch den Zoomfaktor anzupassen.

    Zu einer Vorschau gehört die Bilder zunächst im kleinen Format anzubieten um Traffic deiner Besucher zu sparen und die Ladezeit in Grenzen zu halten.


    Wenn die Bilder 'eh alle in voller Auflösung geladen werden können die also auch gleich so groß wie möglich angezeigt werden.


    So werden bei Lightbox auch die Bilder in der Übersichtseite kleinformatig geladen. Deine Lösung hat mit Lightbox also nichts zu tun.

    Grundlage für ein problemloses CSS ist ein korrekter HTML-Quelltext im body-Element.


    Mit HTML5, also dem aktuellen HTML, wurden die Regeln eindeutiger und direkter gefasst. Grade weil sich viele Webseitenersteller das Leben selbst durch falsche Anwendung von HTML-Elementen das Leben schwermachten.


    Ohne Kenntnis der richtigen Anwendung von HTML-Elementen kann deshalb keine aktuelle Webseite erstellt werden. Dadurch gilt aber auch umgekehrt: Wenn bestehende Webseiten auf den aktuellen Stand gebracht werden sollen ist das mit Kenntnis der HTML-Regeln durch die eindeutige Zuordnung viel einfacher geworden.


    Wäre ja blöd wenn du viel Zeit investieren würdest und bei Nachfragen immer wieder erfährst: Erst mal den Quelltext abreißen und neu machen.

    Das lässt sich ohne Beispiel schlecht beschreiben.


    Zum responsive Layout gehört in der Regel, dass sich Container bei unterschiedlichen Bildschirmgrößen verschieben. Zunächst werden zum Beispiel vier nebeneinander angezeigt, bei schmaleren Fenstern / Bildschirmen nur noch drei, dann zwei auf auf Smartphones stehen alle Container meist untereinander. Die nicht mehr passenden müssen dann woanders plaziert werden.


    Unterschiedlich große Abstände zwischen den Containern passen dann größenteils nicht mehr und müssen immer wieder angepasst werden.


    Ich kann nur wiederholen: Ohne konkreten Inhalt ist das grade für Anfänger nur schwer nachvollziehbar.

    Zitat

    Wenn der Container über mehrere Zeilen oder Spalten reicht, dann verschwinden die Abstände innerhalb des Containers.

    Richtig.


    Zitat

    Ich kann jedoch nicht die Abstände links und rechts oder ober- und unterhalb des Containers an manchen Stellen verschwinden lassen und an anderen nicht.

    Nicht mit CSS-Grid Angaben. Ob sowas mit margin, padding oder border geht musst du halt ausprobieren. Da an so einer Darstellung kein Bedarf besteht und bei responsiven Layout sogar zu Problemen führen wird habe ich mich damit nicht weiter beschäftigt.

    Deine Frage hatte ich anders verstanden.


    Der Container B wurde in dem Beispiel positioniert. Wenn ein Container über mehrere Zellen positioniert wird gibt es innerhalb des Containers keine Lücke. Dafür sorgt CSS-Grid automatisch.


    Weiterhin werden die Zellen zunächst mit den positionierten Containern gefüllt, die nicht positionierten Container füllen dann die danach noch freigebliebenen Zellen auf.


    Vorgehen dafür:


    1. Durch "display: grid;" einen Container zu einem Grid-Container machen


    2. Die Anzahl der Zeilen und Spalten und damit der Zellen bestimmen


    3. Den Abstand zwischen den Zellen bestimmen


    Alles drei geschieht in dem Beispiel durch die Angaben:


    Code
    1. .raster {
    2. display: grid;
    3. grid-template-columns: 2fr 1fr;
    4. grid-template-rows: 200px 200px;
    5. grid-gap: 20px;
    6. }

    Danach wird der Container B positioniert. Dafür gibt es in CSS-Grid mehrere Möglichkeiten. In dem Beispiel wurden dafür die Gridlinien verwendet.


    Mit Erstellung des Rasters werden automatisch die Gridlininen erstellt. Die erste Linie beginnt links (bzw. oberhalb) der Zellen. Die letzte endet rechts (bzw. unterhalb) der Zellen. Es gibt also immer in jede Richtung eine Linie mehr als Zellen. Die erste ist immer die linke (bzw. oberste).


    Die Linien werden vom CSS automatisch von links nach rechts bzw. von oben nach unten durchnummeriert, beginnend mit 1.


    In dem Beispiel wird der Container B zunächst durch "grid-column-start: 2;" in die zweite Spalte gerückt. Ohne End-Angabe ist der Container genau eine Spalte breit. Also auch wenn es noch mehr Spalten geben würde, würde der Container B nur eine Spalte breit werden, wenn keine end-Angabe gemacht wird.


    Durch "grid-row-start: 1;" beginnt Container B in der der ersten (obersten) Zeile. Durch "grid-row-end: 3;" endet Container B in der zweiten Zeile, erstreckt sich also ohne Lücke über zwei Zeilen.


    Insgesamt also, wenn der Container B die Klasse B (class="b") hat:


    Code
    1. .b {
    2. grid-column-start: 2;
    3. grid-row-start: 1;
    4. grid-row-end: 3;
    5. }

    Dabei darf man halt die Zählweise der Linien nicht aus den Augen verlieren, die kann bei größeren Rastern leicht unübersichtlich werden.

    Nein, CSS-Grid ist dafür gedacht eine Tabellendarstellung mit gleichmäßigen Abständen zwischen den Elementen zu ermöglichen. Also überall gleiche Abstände.


    Wie bereits geschrieben hängt das CSS vom HTML ab und das HTML wiederum vom Inhalt der Webseite. Ohne den Inhalt zu kennen hängt man bei einem Hilfeversuch ohne den Inhalt deshalb in der Luft.


    So allgemein würde ich zu CSS-Grid mit gap zusätzlich mit padding und margin und vielleicht auch border arbeiten. Das kann aber eine üble Bastelei werden.


    Mir scheint wieder mal Flexbox besser geeignet.

    Ja klar. Für den üblichen Grundaufbau einer Webseite (header, nav, main, aside, footer), also den Containern direkt im body-Bereich, ist so meist CSS-Grid sinnvoller.


    CSS-Grid und Flexbox können beliebig oft unabhängig auf einer Webseite verwendet werden. Grundlage ist dabei fast immer ein korrekter und damit gleichzeitig übersichtlicher HTML-Quelltext.


    Eine Erleichtung durch Flexbox und CSS-Grid ist grade, dass sie sich nicht vererben.

    Da die Bezeichnungen meiner Testdateien der Übersichtlichkeit wegen einer bestimmten Systematik folgen, musst du die Pfad- und Dateinamen der Grafiken deiner Webseite anpassen und den Text in den alt-Attributen nach deinen Vorstellungen ausfüllen.


    Die Darstellung ist einfach mit Flexbox zu erstellen.


    Nach deiner Beschreibung sehe ich zu folgendem HTML



    das folgende CSS


    Zitat

    Keine einzige der angeführten Aussagen oder Behauptungen löst mein Problem, dass die beiden Bilder (Zander links und rechts außen) nicht zentriert sein sollen, sondern rechts und links am Rand des Headers positioniert sein sollen.

    Habe ich doch geschrieben: Ohne Zugriff auf die Bilder können wir deine Seite nicht mal ansatzweise nachbauen.


    Wenn du uns Infos vorenthältst können wir dir schlicht nicht helfen.


    Ob Grafiken Vorder- oder Hintergrundbilder sind ist auch nicht deine Entscheidung, sondern richtet sich nach dem Inhalt der gesamten Webseite und den HTML-Regeln. Wenn du gar nicht vorhast die zu lernen sehe ich ein weiteres Hindernis dir zu helfen.


    Meine Antworten sind auch nicht ausschließlich für dich, sondern für alle Besucher, da es sich um ein öffentliches Forum handelt. Wenn du auf sachlich falsche Lösungen bestehst sollten Andere schon darüber informiert werden, damit sie sich für korrektes HTML entscheiden können.


    Vielleicht hilft dir ja noch jemand in deinem Sinn.

    Es ist schwierig dir zu helfen, da deine HTML-/CSS-Kenntnisse veraltet, falsch und sinnfrei sind.


    Ohne Zugriff auf die Bilder können wir deine Seite nicht mal ansatzweise nachbauen. Deshalb ein paar allgemeine Anmerkungen.


    Zitat


    Weil Flexbox doch eher für zweidimensionale Layouts gedacht ist,


    Das wird zwar gerne behauptet, ist aber komplett falsch. Das haben Personen in die Welt gesetzt, die Flexbox und CSS-Grid nicht verstanden haben und dann wurde es unglücklicherweise von genau so unwissenden Usern weiter verbreitet.


    Flexbox und CSS-Grid wurden parallel entwickelt, haben aber unterschiedliche Aufgaben und basieren deshalb auf vollkommen unterschiedlichen Herangehensweisen. Die angeblich wichtigen Dimensionen führen nur in die Irre.


    Zitat

    die Möglichkeiten bezüglich der Positionierung doch eingeschränkt sind (Elemente erstrecken sich zB über mehrere Spalten oder Zeilen; Spalten oder Zeilen bleiben frei etc.)


    Genau so falsch. Flexbox und CSS-Grid bieten unterschiedliche Möglichkeiten. Entsprechend ist manchmal Flexbox und manchmal CSS-Grid von Vorteil. Flexbox bietet einige Möglichkeiten, die CSS-Grid nicht bietet und umgekehrt. Das hat nichts, aber auch rein gar nichts mit besser, schlechter, neu, aktuell, veraltet und ähnlichen Vergleichen zu tun. Ein PKW ist auch nicht besser oder schlechter als ein Reisebus und beide wiederum nicht besser oder schlechter als ein LKW und alle wiederum nicht besser oder schlechter als ein Radlader und .... Die sind schlicht für unterschiedliche Aufgaben erdacht worden. Gleiches gilt für Flexbox, CSS-Grid, Float und so weiter. Die haben alle unterschiedliche Aufgaben.


    Code
    1. <div id="wrapper">


    Auch so ein Unsinn aus dunkelster Vergangenheit. Sogenannte Wrapper waren immer schon überflüssig und sind deshalb nach den aktuellen HTML-Regeln auch nicht mehr erlaubt. Also weglassen.


    Code
    1. role="banner"


    Ist in deinem HTML genau so sinnfrei und überflüssig. Solche Angaben sind Hilfen zum Beispiel für Screenreader. Allerdings nützen die überhaupt nichts. wenn der Rest der Seite nicht auch barrierefrei ist. Und bei deinem restlichen HTML ist nichts barrierefrei.


    Code
    1. width="" height=""


    Width- und heigt-Attribute haben bereits seit Jahren nichts mehr im HTML-Quelltext verloren.


    Code
    1. <div class="flex">
    2. <img src= ...


    Das div-Element ist hier überflüssig und deshalb nach den HTML-Regeln nicht erlaubt.


    Img-Elemente sollten in jeweils eigenen passenden Containern stehen, meist ist dafür das figure-Element geeignet. Außer es handelt sich um eine Bildergalerie, die ich deinen Bezeichnungen nach aber nicht erkenne. Zudem sind einige Bilder wohl auch eher Hintergrundbilder, die entsprechend über CSS eingebunden werden sollten.

    Ich habe doch sogar ein Beispiel erstellt. Überflüssige Elemente sind nach den HTML-Regeln unzulässig.


    Und offensichtlich funktioniert dein Quelltext nicht einwandfrei.


    Vergiß "display: inline-block" und die position-Angaben. Die stammen aus finsterster Vergangenheit und behindern responsives Layout eher als das sie helfen. Solche CSS-Möglichkeiten existieren nur noch, damit alte Webseiten noch angezeigt werden.


    Beschäftige dich mit (lerne) statt dessen Flexbox (display: flex).

    Zitat

    was mache ich hier falsch

    Du verstößt gegen die HTML-Regeln und verwendest sinnfrei CSS. Das funktioniert nicht.


    Als HTML sehe ich bei dir


    Code
    1. <form action="Anwendungen/send_email.php" method="post" enctype="application/x-www-form-urlencoded" name="Anmeldeformular" id="Anmeldeformular">
    2. <h1>Antragsformular</h1>
    3. <div>
    4. <label for="aufnahme_ab">Aufnahme ab</label>
    5. <input id="aufnahme_ab" name="Aufnahme" type="text">
    6. <p class="textfieldRequiredMsg">Es muss ein Wert angegeben werden.</p>
    7. <p class="textfieldInvalidFormatMsg">Ungültiges Format.</p>
    8. </div>
    9. </form>


    Der Rest ist dann CSS. Wobei an Hand deiner Quellcodeschnipsel keine konkrete Hilfe möglich erscheint.

    Deine ganze Konstruktion ist Murks und sachlich falsch. So haben zum Beispiel div in span überhaupt nichts verloren. Beide (div und span) sind zudem unnötig und dürfen nach den HTML5-Regeln deshalb in diesem Fall nicht verwendet werden.


    padding-top: 50% und padding-bottom: 50% ergeben 100%. Wo soll bei 100% noch Inhalt stehen?


    An HTML benötigst du deshalb nur:

    Code
    1. <form action="Anwendungen/send_email.php" method="post" enctype="application/x-www-form-urlencoded" name="Anmeldeformular" id="Anmeldeformular" dir="ltr" lang="de">
    2. <h1 align="center">Antragsformular</h1>
    3. <label for="Aufnahme ab">Aufnahme ab</label>
    4. </form>


    und dazu das folgende CSS:


    Du verwendest viele alte und / oder sinnfreie Anweisungen. Die werden leider auch in vielen Foren immer noch verbreitet. Für eine Lösung mit aktuellem HTML und CSS ist deshalb der erste Schritt: abreißen und neu machen.


    Zunächst aber zwei grundsätzliche Bemerkungen:


    Falls dein Bild Text enthält (das drängt sich durch den Namen stundeplan.jpg gradezu auf) solltest du das bleiben lassen. Texte in Bildern sind keine Informationen. Damit bekommst du nur Stress.


    Und hast du dir mal überlegt wie das Bild auf Smartphones und ähnlichen Geräten angezeigt werden soll? Falls es Text enthält wird es kaum zu lesen sein.


    Ein Stundenplan ist eine Liste. Bei ausreichend Platz in Tabellendarstellung. Das verführt viele Anwender dazu einen Stundenplan für eine Tabelle zu halten. Das ist aber sachlich falsch. Deshalb ist für Stundenpläne und ähnliche Informationen das dl-Element korrekt. Also weder ein Bild noch eine Tabelle (table-Element). Das kann dann auch am besten an unterschiedliche Bildschirmgrößen angepasst werden und ist am besucherfreundlichsten. Stichwort: Barrierefreiheit / Zugänglichkeit.


    Zurück zu deiner Frage: Um ein Bild unverzerrt darzustellen ist mit aktuellem HTML und CSS folgender Quelltext geeignet: