Beiträge von MrMurphy

    Ich bin das Layout noch mal von vorne mit den jetzt bekannten Informationen angegangen.


    Dazu habe ich das HTML und CSS nach den aktuellen Regeln und den bewährten Vorgehensweisen erstellt.


    Vom Bootstrap werden die grundsätzlichen CSS-Regeln übernommen, also zum Beispiel die Schriftgröße. Das wird auch sinnvoll sein.


    Ich selbst verwende einige grundsätzliche CSS-Angaben, die sich bewährt haben und die sinnvoll sind. Ich teste deshalb nicht aus, ob die notwendig sind oder nicht. Für mein folgendes Beispiel könnten folgende meiner grundsätzlichen CSS-Angaben notwendig sein:



    Mein Beispiel HTML sieht dann folgendermaßen aus:



    Die Texte haben durch Löschen einiger Absätze unterschiedliche Längen.


    Dazu dann das folgende CSS:


    Farben, Abstände, Rahmen spielen dabei keine Rolle, es sind nur die notwendigen angegeben.


    Dadurch entsteht ein sehr flexibles Card-Layout.


    Die Textlänge ist egal.


    Der Link steht immer unterhalb vom Bild und vom Text, egal welches länger ist.


    Der Text floatet ab einer passender Breite um das Bild.


    Die einzelnen Cards sind alle gleich hoch (da habe ich selbst etwas dazugelernt), unabhängig davon, in welcher Reihe sie stehen. Die Höhe wird dabei von der höchsten Card bestimmt.

    Ich kann natürlich nur meine Meinung zu deinen Beiträgen hier im Forum im Zusammenhang mit HTML, CSS und Bootstrap äußern. Ich war der Meinung, dass das aus dem Zusammenhang hervorgeht. Es tut mir leid wenn das falsch rübergekommen ist.

    Zitat

    Es gibt Dinge, die sind mir einfach unlogisch

    Eindeutig: Nein. Das Problem, welches auch Hilfe für dich erschwert, ist dein unstrukturiertes Vorgehen.


    Zitat


    Weil die auch wieder was haben, was sich Card nennt.

    Benennungen sollten weder wie HTML-Elemente noch wie Bootstrap-Klassen oder -ID heißen. Das solltest du also umbenennen.

    Mit den Quelltextschnipseln lässt sich der Fehler / lassen sich die Fehler nicht erkennen.


    Im CSS gibt es Elemente und Klassen, die im HTML nicht vorkommen und umgekehrt. Wie das Grid definiert wird (display: grid) ist nicht erkenntlich.


    Ein Problem ist in jedem Fall, dass das main-Element in das Grid eingebunden wird. Das kann eigentlich nicht den HTML-/CSS-Regeln entsprechen. Es erscheint eher sinnvoll das main-Element als Grid-Container auszuwählen, zumindest in einer Testseite.


    Zudem kennen wir die Bilder nicht.


    Nachtrag 06.02.2021, 12:45 Uhr:


    Ich habe dein Gridlayout nachgebaut. Deine hier gezeigten Angaben sind korrekt um die Bilder wie im Layout gezeichnet anzuordnen. Das Problem liegt also in deinem restlichem HTML und / oder CSS, welches wir nicht kennen.

    Das ist dann das ganz normale floaten. Bei den Absätzen darfst du halt keinen störenden Firlefanz hinzufügen.


    Den musst du komplett rausnehmen, was du bislang nicht getan hast. Die störenden Angaben hast du teilweise mehrfach eingefügt. Dann reicht einmal rausnehmen nicht.

    Deine Vorstellungen lassen sich so wahrscheinlich nicht umsetzen. Das Umfließen kann mittels CSS nicht von der Textlänge abhängig gemacht werden.


    Entweder umfließt der Text das Bild oder halt nicht. Du kannst das float nur manuell abbrechen.

    Doch, die "Zwischenstufe" gibt es. Die ersten beiden Absätze sind dann rechts vom Bild, der dritte unterhalb links.


    Wenn der Text das Bild umfließen soll (so habe ich es jedenfalls verstanden) muss es ein "float: left;" erhalten. Das hast du.


    Die Absätze dürfen weder eine Breite noch ein "float: right;" noch ein "display: inline-block;" erhalten. Sprich: Weniger ist mehr.

    Zitat

    Aber warum war vorher der Footer deswegen irgendwo?

    Der Footer wurde nicht irgendwo angezeigt. Die Browser richten sich nach HTML- und CSS-Regeln. Du hattest die Höhe eines Containers vorgegeben, den Inhalt dann aber höher werden lassen.


    Durch den Dokumentenfluß war bestimmt, dass der Footer sich unterhalb des (jetzt nicht mehr vorhandenen) Containers anordnet. Und genau das hat er getan. Und zwar unabhängig davon, ob der Inhalt des höhenbestimmten Containers in den Container passt.


    Nicht alles was möglich ist, ist mit HTML- und CSS auch sinnvoll.


    Da die Breite des Browserfensters vom Besucher und dessen Hardware / Einstellungen abhängt sollten sich Webseiten in ihrer Höhe der aktuellen Fensterbreite anpassen. Die Höhenbestimmungen sollten also dem Browser überlassen werden. Du willst jedoch immer wieder mal bestimmte Höhen erzwingen. Damit schaffst du dir selbst Probleme - auch zum Nachteil deiner Besucher.


    Sei es, dass die Besucher unnötig scrollen müssen um Leerräume zu überwinden. Sei es, dass der Inhalt über die vorgegebene Höhe hinausgeht.

    Zitat

    Da komme ich doch ohne das "visible: hidden" nicht herum.

    Richtig.


    Dabei ergibt sich aber die Frage, warum du in der von dir so genannten "mobilen Ansicht" (die es in Wirklichkeit überhaupt nicht gibt) deinen Besuchern Informationen vorenthalten willst? Oder auch andersrum: Warum willst du Besuchern in der Desktop-Ansicht deren Zeit mit wahrscheinlich unnötigen Informationen stehlen? Die Informationen scheinen ja nicht wichtig zu sein.

    Zitat

    Normalerweise sollte doch alles innerhalb der Box sein?

    Nein.


    In den HTML- und CSS-Regeln sind für bestimmte Elemente bestimmte Verhaltensweisen festgelegt. Das Verhalten ist also für Browser vollkommen normal.


    HTML und später CSS sind von fachkundingen Theoretikern für fachkundige Theoretiker erdacht worden, um es mal etwas überspitzt auszudrücken. Deshalb darf man da nicht mit Wunschvorstellungen oder dem Verhalten aus anderer Software rangehen. Wer sich etwas intensiver mit HTML und CSS beschäftigen will sollte sich mit diesen Grundlagen beschäftigen, sonst wird er immer wieder auf solche Probleme stoßen.


    Bis heute sind HTML noch CSS zur Informationsübermittlung ausgelegt, und zwar für möglichst viele Endgeräte und damit auf für möglichst viele Besucher der Webseiten. Und nicht für Künstler, Grafiker und Layouter.


    Das von dir beobachtete Verhalten (nicht Problem) ist als Collapsing Margins beziehungsweise Zusammenfallende Außenabstände bekannt.


    Zitat

    vertical-align:bottom;

    Diese CSS-Anweisung ist für etwas anderes gedacht.


    Zitat


    Ich schätze mal das ist wg flex-direction:column;

    Denke ist nicht. Aber ich kenne auch nicht dein aktuelles HTML und CSS.


    Ich gehe eher davon aus, dass die von dir wahrscheinlich gewünschte Ausrichtung grade durch Flexbox möglich ist, zum Beispiel mit der auto-Anweisung für margin.


    Nachtrag: Ich habe grade den Link zu deiner Seite in deinem ersten Beitrag gefunden.


    Um die Buttons unten auszurichten kannst du den p-Elementen mit der Klasse "button" im CSS die Anweisung "margin-top: auto;" hinzufügen.

    Zitat

    Gibt's es eine Möglichkeit, dass sich das 3. dann auch an die erste Zeile anpasst?

    Nein, so eine Möglichkeit gibt es rein mit HTML und CSS nicht.


    In der Praxis ist das auch nicht sinnvoll und stört die Besucher eher. Zumal wenn die höchsten Container wie meist üblich durch Scrollen nicht mehr sichtbar sind. Dann stören die unsinnigen Leerräume und durch sie muss zudem unnötig gescrollt werden.


    Deshalb empfehle ich auch zum Testen richtige Inhalte und nicht viele Container mit immer dem gleichen Inhalt.

    Keine Ahnung ob Probleme entstehen. Das hängt von deiner fertigen Seite ab, die ich nicht kenne. Das musst du also selbst ausprobieren.


    Die Erfahrung zeigt: Je komplexer eine Seite wird desto wahrscheinlicher sind Probleme mit float, zumal wenn es ohne Kenntnis der Auswirkungen verwendet wird. Wenn deine Seite relativ einfach ist sind Probleme eher unwahrscheinlich.

    figure-Elemente innerhalb von p-Elementen sind mindestens schlechter Stil, wenn nicht sogar unzulässig nach den HTML-Regeln. Verwende besser article, section, aside, ... oder notfalls auch div-Container.


    float vererbt sich ohne ein Clearing gandenlos weiter und hebt die gefloateten Elemente aus dem Textfluß. Zudem ist es für dein Anliegen überhaupt nicht gedacht. Beschäftige dich mit Flexbox (display: flex) oder CSS-Grid (display: grid).


    Ohne die Bilder und den zugehörigen Text ist konkrete Hilfe leider nicht möglich. Ich würde es nach deiner Beschreibung mit CSS-Grid und minmax versuchen.

    Flexbox sollte die Lösung sein. Füge mal folgende CSS-Anweisungen der Klasse .jumbotron hinzu:


    Code
    1. display: flex;
    2. justify-content: center;
    3. align-items: center;


    Durch deine Verschachtelung und die Bootstrap-Auswirkungen auf .container musst du noch folgendes CSS hinzufügen:


    Code
    1. .jumbotron>.container {
    2. display: flex;
    3. justify-content: center;
    4. align-items: center;
    5. }

    Durch das "margin-top: -170%;" ist die Navigation überhaupt nicht sichtbar.


    Und wo willst du einen neuen Absatz (den meinst du wohl mit paragraphen) überhaupt einfügen? In das divstart?


    Bei meiner Lösung kannst du problemlos zusätzliche Absätze hinzufügen. Warum verwendest du die die nicht? Wie sollen wir dir helfen wenn du die Hilfen offensichtlich ignorierst?


    Du hast das Grid halt zeilenweise aufgebaut. Der Text befindet sich in einer Zeile mit dem Logo. Bei mehr Text wird die Zeilenhöhe größer und alles in der nächsten Zeile wird weiter "runtergedrückt".


    Und fr ist nicht immer die sinnvollste Einheit. Die Höhe von Containern sollte sich nach deren Inhalt richten und nur in notwendigen Ausnahmefällen vorgegeben werden.


    Du kannst mal im #divstart


    Code
    1. grid-row: 1;

    durch


    Code
    1. grid-row: 1 / span 2;

    ersetzen. Die "-170%" natürlich löschen.

    Tipp ist schwierig. Zum einen wissen wir nicht was dir genau vorschwebt. Das Logo-Bild liegt uns nicht vor. Und einige Angaben deines CSS kollidieren mit den notwendigen Anweisungen für deine vermeintlichen Vorstellungen. Zu Beginn kannst du dein CSS mal komplett löschen und durch das folgende ersetzen:


    Wenn die Anordnung grundsätzlich stimmt kannst du anfangen Größen, Abstände, Farben und so weiter anzupassen.


    Das ist aber nur ein Versuch dir bei der Lösung deines Problems zu helfen. Korrektes HTML sieht noch etwas anders aus und beim CSS wären teilweise andere Einheiten außer px sinnvoller.