Beiträge von MrMurphy

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.

Jetzt hast du .card "display: flex;" drin und bei img das "float: left;" rausgenommen.

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.

Ich kann nur nach der verlinkten Seite gehen. Wenn du von anderen Seiten schreibst wird es schwierig.

Du hast zwei Probleme "eingebaut" die ein Umfließen verhindern.

1. Die Absätze haben eine Breite von 52%.

2. Die Absätze haben ein float: right; .

Das Herausragen des Bildes kann ich nicht nachvollziehen.

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.

Clearfix ist ein Begriff hinter dem unterschiedliche Techniken hängen können. Ich kenne nicht alle zumal float für Webseiten kaum noch Verwendung findet. Ob der funktioniert kann ich dir also leider nicht sagen.

Dein Beispiel scheint dem von Nicolas Gallagher ähnlich zu sein, weicht aber doch etwas ab:

http://nicolasgallagher.com/micro-clearfix-hack/

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:

display: flex;
justify-content: center;
align-items: center;

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

.jumbotron>.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

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

grid-row: 1;

durch

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:

body {
   margin: 0;
}
#testing {
   background-color: tomato;
   height: 100%;
}
#divlogo {
   padding: 20px;
}
#div1 {
   padding: 0px 50px;
}
#divNav {
   color: teal;
   border-style: solid;
}
img {
}
ul {
   background-color: #D0D8D0;
   padding: 0;
   margin: 0;
}
li {
   list-style-type: none;
}
li a {
   display: block;
   color: black;
   padding: 10px 0px 10px 15px;
   text-decoration: none;
}
li a.aktiv {
   background-color: #500000;
   color: white;
}
li a:hover:not(.aktiv) {
   background-color: #777;
   color: white;
}
/* CSS-Grid */
#testing {
   display: grid;
   grid-template-columns: 200px 1fr;
   grid-template-rows: auto 1fr;
   grid-template-areas:
      "logo text"
      "navi text"
   ;
}
#divlogo {
   grid-area: logo;
}
#divNav {
   grid-area: navi;
}
#div1 {
   grid-area: text;
}

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.

Egal was behauptet wird: Viel Frust und Ärger werden vermieden, wenn für Ordner- und Dateinamen nur die Kleinbuchstaben des englischen Alphabetes, Zahlen und der Unterstrich verwendet werden. Wobei Zahlen nicht als erstes Zeichen stehen sollten. Kein Leerzeichen, keine Umlaute, keine Sonderzeichen, keine anderen Striche als der Unterstrich.

Ansonsten kann es zum Beispiel auch passieren, dass die Seite bei einem selbst komplett und korrekt angezeigt wird, bei Besuchern mit anderen Providern, anderer Hard- und Software, anderen Betriebssystemen aber nicht.