Beiträge von MrMurphy

    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:


    Nein, das interpretierst du vollkommen falsch. Unwissenheit hat überhaupt nichts mit Idiotie oder sonstigen negativen Eigenschaften zu tun.


    HTML und CSS haben überhaupt nichts mit Lebenserfahrung, Geschicklichkeit, angeborenen Fähigkeiten und ähnlichem zu tun. Sondern die sind sehr lebensfremd. Deshalb muss das gelernt werden. Vor der Einführung von CSS war das noch relativ einfach möglich. Die Zeiten sind aber schon lange vorbei.


    Um das Lernen der Grundlagen kommst du deshalb nicht herum. Und erst wenn du die Grundlagen kennst kann dir bei einzelnen Problemen sinnvoll geholfen werden.


    Ich kann dir gerne eine Beispielseite zur Verfügung stellen, die ich mal für einen anderen Fragesteller geschrieben habe. Du musst den Quellcode nur in einer UTF-Datei abspeichern, kannst die Seite dann direkt im Browser aufrufen und ausprobieren. Zum Beispiel was bei schmaleren Fenstern passiert.


    Ich wage aber zu bezweifeln dass dir die weiterhilft.



    Ohne div-Elemente, weil die nach den aktuellen HTML-Regeln nicht zulässig sind. Bildergrößen und und und können natürlich mit ganz normalem CSS natürlich geändert und den persönlichen Wünschen angepasst werden.

    Das was du willst wird inoffiziell als Card-Layout umschreiben. Bilder mit Text die symetrisch angeordnet werden.


    Um es gleich mal direkt zu schreiben: Dir fehlen offensichtlich noch viele Grundlagen. Selbst wenn wir dir helfen wirst du mit deinem Vorwissen und deinen Vorstellungen damit wenig anfangen können. Das Thema erfordert zwar nur wenig Quelltext, ist schon ziemlich komplex.


    Zudem scheinst du nach einer vollkommen veralteten Lernquelle zu lernen. Das erschwert unsere Hilfe zusätzlich. Zudem kennen wir weder deine realen Bilder noch den dazugehörigen Text. Davon hängt aber auch eine endgültige Lösung ab.


    Zum Beispiel: div sind einfach nur Container, die nach den HTML-Regeln nur noch in Ausnahmefällen verwendet werden dürfen. Falls es im HTML-Sprachschaft geeignetere Container wie figure, dl, section, article, ... gibt sollen die verwendet werden.


    Oder: Das br-Element soll nicht mehr zum Layouten verwendet werden. Es hat eine Bedeutung bekommen. Wenn die nicht gegeben ist (und das ist sie in deinem Beispiel nicht) soll es nicht verwendet werden. In deinem Beispiel wären zwei einzelne Absätze (p-Elemente) korrekt. Die Abstände (auch zum Bild) werden dann über CSS angepasst.


    Oder: Internes CSS im HTML-Quelltext ist zu vermeiden. Dafür gibt es die Möglichkeit einer externen CSS-Datei oder grade für Testseiten das style-Element im header des Quelltextes.


    Oder: Eine absolute Größe von Bildern soll nicht durch CSS bestimmt werden. Es gehört zum guten Stil Bilder mit einem Grafikprogramm so zu skalieren (also deren Größe anzupassen) wie sie maximal auf der Webseite angezeigt werden.


    Oder: Deine Angaben zum Bild ( width="... ) mit HTML stammen aus der Zeit vor CSS, sollen also bereits seit fast 20 Jahren überhaupt nicht mehr verwendet werden. Auch wenn die Browser abwärtskompatibel sind und versuchen solche Angaben korrekt umzusetzen.


    Oder: Du weißt offensichtlich nicht mal, dass sich die CSS-Angaben auf viele Elemente anwenden lassen. Wenn Flexbox an Hand eines section-Containers beschreiben wird lassen sich die Beispiele genau so gut auf article-, dl- oder viele andere Elemente anwenden.


    Mit aktuellem HTML und CSS, wenn die Seite wahrscheinlich sogar auf Geräten mit kleinem Bildschirm funktionieren soll, hat das nicht zu tun.


    Du solltest dir also zunächst aktuelles Lehrmaterial anschaffen. Dazu gehört bereits seit längerem auch Flexbox. Also ins Inhaltsverzeichnis oder die Beschreibung schauen. Wenn dort nichts von Flexbox steht gleich wieder entsorgen oder gar nicht erst kaufen. Noch besser und aktueller sollte auch CSS-Grid beschrieben werden.

    Ich kann deine Fragen nicht richtig nachvollziehen, deshalb ist es schwierig dir zu helfen.


    Frage 1: Bei mir wird die Navigation rechts oben im Browserfenster angezeigt.


    Frage 2: "Das bekomme ich nicht hin" ist keine Angabe mit der Dritte etwas anfangen können. Bei mir funktioniert das CSS wie nach den CSS-Regeln vorgesehen. Die Schrift wird im Quelltext weiß dargestellt, wenn der Mauszeiger darüber steht (Hover-Effekt) wird die Schrift blau und ist unterstrichen.


    Noch ein Hinweis: Ich weiß nicht in wie weit du deine Lernunterlagen wechseln kannst. Die sind leider total veraltet und enthalten zudem einige Informationen, die nach den HTML- und CSS-Regeln immer schon falsch sind und waren. Falls du später mal selbst Webseiten erstellen willst sollte dir bewußt sein, dass die mit dem Lernmaterial total veraltet sein werden.


    Ein Beispiel von vielen: Float ist und war nie zur Ausrichtung von Containern wie div-Boxen gedacht. Dafür gibt es bereits seit Jahren Flexbox. Wahrscheinlich wird Flexbox in deinen Lernunterlagen aber überhaupt nicht vorkommen.


    Oder: In der Ebene direkt nach ul-Elementen dürfen nur li-Elemente stehen, damit keine a-Elemente.