Hallo
Was du wie lehren willst ist alleine deine Entscheidung.
Dass du eine Spaßveranstaltung durchführen willst hattest du nicht geschrieben. Wenn du die Schüler informierst, dass du kein Fachwissen hast und der Inhalt mit dem realen und reellen Erstellen von Webseiten nur wenig zu tun hast ist doch alles in Ordnung.
Gruss
MrMurphy
Hallo
Stimmt. Ja, kann man zusammen auf einer Seite verwenden.
Gruss
MrMurphy
Hallo
Wäre es besser da noch Menu neben zu schreiben?
Besser - ja. Gut - nein. Jeder versteckte Inhalt und jeder überflüssige Klick sollte vermieden werden.
Oder würdest du das Menu jederzeit offen da haben?
Ja.
Dann darf das Menu nicht zu lang sein und man arbeitet mit Untermenus auf den einzelnen Seiten?
Was sinnvoll ist hängt von der konkreten Website und ihrem Inhalt ab. Ohne Inhalt kannst du das weder lernen noch kann es dir gezeigt werden.
aber erst mal will ich ja nur sehen was passiert und wie sich flexbox so verhält.
Das widerspricht sich. Wie willst du das Verhalten ohne sinnvollen Inhalt sehen? Das geht schlicht nicht.
Erstens hatte ich gelesen, dass die Unterstützung noch nicht so solle ist
Mehr grün geht kaum noch:
Deine Information ist also veraltet.
und zweitens erinnert mich das erst mal so an die "alte" Art Websites zu erstellen mit Tables.
Das ist sachlich falsch. Und wer aktuell oder sogar erst zukünftig HTML / CSS lernt, sollte das von Beginn an das aktuellste lernen. Von veraltetem oder sogar falschem HTML / CSS auf aktuelles umzusteigen ist viel schwieriger als umgekehrt.
Kann darf sollte man eigentlich grid und flex mischen oder sollte man das lieber lassen?
Ja.
Gruss
MrMurphy
Hallo
Du verwendest leider einige Lösungen die benutzerunfreundlich sind und grundsätzlich vermieden werden sollten.
Hamburger-Menü: Damit können viele User nichts anfangen. Webseitenersteller leben in einer eigenen Wissenswelt und glauben, dass ihr Wissen allen Webseitenbesuchern bekannt ist. Oder sie verlangen es arroganterweise sogar. Versteckte Texte (alle, alle, alle) sollten grundsätzlich vermieden werden, sie sind für viele User unüberwindbare Barrieren. Sie machen Seiten nicht besser sondern schlechter.
Zudem sollte jeder unnötige Klick / Tipp vermieden werden. Der Klick, um ein Hamburger-Menü zu öffnen ist unnötig - also weglassen.
Sticky Footer: Der ist genauso unnötig. Niemand braucht einen Sticky Footer und wenn eine Webseite erst mal Inhalt mit einer vernünftigen besucherfreundlichen Schriftgröße hat kommt der auch überhaupt nicht mehr zum tragen. Und wenn bei einzelnen Seiten der Footer nicht am unteren Fensterrand steht: Es stirbt niemand. Es verletzt sichniemand. Niemand verläßt vor lauter Schreck die Seite. Die Seite wirkt nicht unseriöser oder laienhafter. In China fällt kein Sack Reis um. Sticky Footer ist eine Spielerei, für die Praxis ohne Sinn.
Weiterhin sollten Texte niemals direkt in Containern wie main, aside, nav, header, footer, article, section, div oder ähnlichen stehen. Auch nicht auf Testseiten.
Weiterhin sollten auch Lern- und Testseiten sinnvollen Inhalt haben. Nur so können Lösungen sinnvoll erstellt werden. Du kannst als Vorlage zum Beispiel Artikel von Wikipedia verwenden oder vorhande Webseiten auf einen aktuellen Quelltext umbauen. Für die Schüler ist es zudem ein sichtbarer Erfolg, wenn sie ihre Verbesserungen später mit dem Original vergleichen.
Inzwischen wird von allen aktuellen Browsern CSS-Grid hinreichend unterstützt. Deshalb kann CSS-Grid dort verwendet werden, wo es sinnvoll ist. CSS-Grid und Flexbox haben unterschiedliche Aufgaben. In einigen Fällen können sie gleich sinnvoll verwendet werden, manchmal ist CSS-Grid sinnvoller, manchmal Flexbox.
In deinem Fall ist CSS-Grid für das Grundlayout der Seite sinnvoller als Flexbox. Falls dir die Unterstützung von CSS-Grid noch nicht ausreicht kannst du Flexbox als Fallback verwenden.
Kann man das mit FlexBoxen eleganter lösen (guter Stil)?
Ja. Bei dem Ansatz "Mobile First" gleich ein Fallback für die wenigen Browser einrichten, die Flexbox noch nicht beherrschen.
Und überflüssige Container von Beginn an weglassen. In diesem kurzen Quelltext .headerwrapper und .innenbody.
Gruss
MrMurphy
Hallo
da ich diese beim "programmieren" berücksichtigt habe
Wie denn? Hast du die Seite auch entsprechend mit den notwendigen Editoreinstellungen gespeichert
Gruss
MrMurphy
Hallo
Mal sehen, wie MrMurphy es macht.
Ohne die Texte und die Grafiken zu kennen, und damit die Zusammenhänge untereinander, lässt sich überhaupt kein korrekter Quelltext erstellen. Darauf habe ich nicht aus lauter Langeweile hingewiesen.
Gruss
MrMurphy
Hallo
Denk bitte daran, dass wir auch die Bilder brauchen.
Eine mögliche Lösung hängt zudem vom konkreten Inhalt und der Beziehung des Inhalts zu den Bildern ab. Deshalb benötigen wir den konkreten Textinhalt und nicht irgendwelche Lorem-ipsum-Texte.
Gruss
MrMurphy
Hallo
Braucht man eigentlich noch diese Prefixes für moz, webkit usw?
Nein. Aktuell weder für Flexbox noch für andere CSS-Anweisungen.
Gruss
MrMurphy
Hallo
Erster Wert (1) = flex-grow
Zweiter Wert (0) = flex-shrink
Dritter Wert (0%) = flex-basis
Praktisch belegt das Element mit den Werten (falls keine andere flex-direction angegeben ist) die gesamte zur Verfügung stehende Breite.
Ich bevorzuge die Werte einzeln anzugeben. Die Kurzschreibweise führt bei einigen Browsern in bestimmten Konstellationen zu Problemen.
Zudem werden, wie bei allen Kurzschreibweisen, die nicht angegebenen Werte durch Browservorgaben ersetzt. Wenn das nicht beachtet wird kann es zu unerwarteten Ergebnissen kommen.
Gruss
MrMurphy
Hallo
Bei mir funktioniert das CSS. Das Problem wird in dem Teil des Quellcodes enthalten sein, den du uns vorenthältst.
Nachtrag:
Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:
Gruss
MrMurphy
Hallo
Durch text-align: justify wird der Text als Blocksatz dargestellt. Damit der Text links- und rechtsbündig dargestellt wird, werden zwischen die Worte entsprechend breite Leerzeichen eingefügt.
Mit Worttrennungen kann dieses Problem etwas gemindert werden.
Für Webseiten ist ein Blocksatz aber grundsätzlich nicht geeignet. Deshalb sollte auf Blocksatz verzichtet werden. Nicht alles was möglich ist, ist auch sinnvoll. Für den Lesefluß am geeignetsten sind linksbündige Texte.
Gruss
MrMurphy
Hallo
Ich sehe hinter color: #777 kein Semikolon.
Gruss
MrMurphy
Hallo
Wie helfen ohne den Quellcode und eine nachvollziehbare Fehlerbeschreibung? Am besten wäre ein Link zu der Seite um nicht immer wieder nachfragen zu müssen.
Gruss
MrMurphy
Hallo
wie ich ein Bild mittig platziere und den Text drum herum fließen lasse
Das ist nicht vorgesehen zumal es der Darstellung in Browsern widerspricht. Es geht also nur mit Tricks, allerdings nicht im Responsive Design.
Gruss
MrMurphy
Hallo
obwiohl der Pfad zur Datei korrekt vergeben wurde
Nö.
Für konkrete Infos benötigen wir einen Link zu der Webseite.
Gruss
MrMurphy
Hallo
Code, welcher unterste Schublade ist, gefällt mir nicht.
Warum benutzt du ihn dann?
Dein Quellcode enthält Fehler und Lösungen, die so nicht verwendet werden sollten.
Korrektes HTML kann nur mit konkreten Inhalten erstellt werden. Die verheimlichst du uns aber.
Gruss
MrMurphy
Hallo
An einfachsten:
Ersetze
me
TaseTheOnedurch
me<br>
TaseTheOneund erweitere
.previewpic {
vertical-align: top;
width: 160px;
height: auto;
}zu
.previewpic {
vertical-align: top;
width: 160px;
height: auto;
float: left;
}Meine Lösung ist zwar untereste Schublade aber funktioniert mit deinem Quelltext.
Sinnvoller wäre natürlich ein korrekter HTML-Quelltext, aber soweit scheinst du noch nicht zu sein.
Gruss
MrMurphy
Hallo
Ich habe um einen Link gebeten um genau solche unsinnigen Quellcodeschnipsel, die nicht weiterhelfen, zu vermeiden. Damit kann niemand etwas anfangen.
Gruss
MrMurphy
Hallo
Das geht in der Regel mit Flexbox oder CSS-Grid.
Für nähere Informationen benötigen wir einen Link zum Quelltext (HTML und CSS) mit dem Bild.
Gruss
MrMurphy
Hallo
Verzichte auf height, min-height und max-height im CSS. Die Höhe von Containern wird von deren Inhalt bestimmt.
Gruss
MrMurphy