Doch wie kann ich diese eigenen Breakpoints ermitteln ?
Wie ich geschrieben habe: Zunächst die Webseite in HTML erstellen, dabei nur ein paar grundsätzliche CSS-Angaben machen und dann ausprobieren und schauen.
Ohne Inhalt ist eine sinnvolle Gestaltung von Webseiten nicht möglich.
Ein typisches Anfängerproblem ist die Darstellung von Webseiten an bestimmte Geräte anpassen zu wollen. Das hat nie funktioniert und bei der heutigen Vielfalt der Endgeräte ist das von vornherein zum Scheitern verurteilt.
Bewährt hat sich hingegen die Breite von Containern auf den Inhalt der Webseite hin auszurichten. Das Vorgehen ist auch zukunftssicher.
Gleichzeitig hilft die Technik "Mobile First", nach der Webseiten zunächst für schmale Fenster (nicht nur schmale Bildschirme) erstellt werden.
Dazu gehört zunächst den Inhalt der Webseite zu erstellen. Leere Webseiten funktionieren anders als Webseiten mit Inhalt und sind deshalb weder zum Lernen noch zum Testen geeignet. Deshalb hat Smpervivum auch Schwierigkeiten dir so zu helfen, dass du das verstehst.
Beim aktuellen HTML (HTML5) sind die Anwendungsregeln auch viel eindeutiger als in den Vorgängerversionen gefasst. Ein sauberer HTML-Quelltext hilft auch bei der folgenden Gestaltung einer Webseite.
Breiten- und Höhenangaben brauchen dann auch nur noch sehr sparsam eingesetzt werden, auch das hilft den Browsern zu einer sinnvollen Darstellung.
Ich verstehe nicht was du willst. Hast du einen Link zu der Seite?
Was du dir vorstellst (Webseiten an bestimmte Endgeräte anzupassen) hat mit responsivem Layout nichts zu tun und wäre in der Praxis viel zu aufwändig. Deshalb sehen Chrome und andere Browser nur beispielhaft die Darstellung in bestimmten Endgeräten vor. Anfänger werden dadurch leider dazu verführt ihre Websites fälschlicher- und unnötigerweise an bestimmte Endgeräte anzupassen.
Ein Responsive Layout hängt deshalb immer von der darzustellenden Website ab, aber nicht von den verwendeten Endgeräten. Oder auch umgekehrt: Websites an bestimmte Endgeräte anzupassen hat nichts mit Responsive Layout zu tun.
Genau so wenig ist es erforderlich und auch nicht sinnvoll, dass Websites auf allen Endgeräten gleich aussehen sollen. Versuche dazu sind auch typische Anfängerfehler, die in der Praxis zum Scheitern verurteilt sind.
Eine responsive Website (und genau das ist die Aufgabe von responsiven Websites) wird deshalb auf allen Endgeräten benutzerfreundlich angezeigt. Also so, dass die Besucher den Inhalt möglichst problemlos lesen und erfassen können.
Damit auch auf den von dir genannten Endgeräten. Die sind bei einem responsiven Layout automatisch mit enthalten.
Ja klar geht das.
Wenn auch nicht so, wie du es dir wahrscheinlich vorstellst. Geräte wie Smartphones können HTML und CSS nicht erkennen. Deshalb hat es sich bewährt das Layout je nach Fensterbreite mit Media Queries anzupassen.
Ohne einen Link zu deiner Seite können wir dir aber nicht konkret helfen.
Deshalb nur allgemein: Beschäftige dich neben den Media Queries noch mit Flexbox und CSS-Grid.
Eine typische Aufgabe für Flexbox oder CSS-Grid. Für eine konkrete Hilfe müssten wir aber den kompletten Quelltext kennen, am sinnvollsten ist erfahrungsgemäß ein Link zu der Seite.
Ansonsten musst du dich selbst in Flexbox und CSS-Grid reinarbeiten.
Manuell alle Seiten umzustellen ist für einen Test zu mühsam
Dann solltest du dich mit PHP beschäftigen. Wobei für Textbausteine nur wenig PHP erforderlich ist. Wenn die Seiten gepflegt werden nimmt ihre Anzahl erfahrungsgemäß zu.
Dann zeig doch mal die Seite mit dem endgültigen Inhalt.
Ich weiß das ist sehr speziell.
Nein.
Dein Beispiel-Quelltext hat mit der Praxis und korrektem HTML nichts zu tun. Deshalb können wir dir auch keine praxisgerechten Lösungen zeigen. In der "richtigen" Seite werden die Container entweder unterschiedliche Texte, Bilder oder Bilder mit Texten enthalten. Dafür gibt es dann bessere Lösungen.
Dein Vorgehen ist nicht benutzerfreundlich. Warum sollte das Logo bei kleineren Fenstern kleiner werden? Damit wird es zugleich schwieriger les- / erkennbar. So lange das Logo nicht größer als die Fensterbreite ist sollte es deshalb nicht verkleindert werden. Dein Vorgehen wäre ein typischer Anfängerfehler.
Zunächst sollte es über oder unter die nebenstehenden Elemente rutschen. Das wird in deinem Fall vollkommen ausreichen.
Und vergiß "position: absolute;", verwende statt dessen Flexbox oder CSS-Grid.
Ohne weiteren Inhalt kann ich dir leider nicht konkreter weiterhelfen.
Das ist zuviel Aufwand. An der neuen Seite sind aber nur ein paar Änderungen erforderlich:
Beim ul-Element müssen max-width und (laut meinem Firefox) zweimal float gelöscht werden. Hinzugefügt werden dort dafür
display: flex;
justify-content: center;Bei den li-Elementen muss float gelöscht werden. Das sollte alles sein.
Die Navigation ist unabhängig von der Anzahl der Links oder deren Breite zentriert.
Ja. Du musst noch weitere Angaben korrigieren, zum Beispiel das unsägliche float löschen und Abstände anpassen. Die display-Angaben sind nur die Grundangaben, es sind noch weitere erforderlich. Etwas Einarbeitung deinerseits ist schon erforderlich.
Mir fehlt auch das HTML-Grundgerüst wie Doctype, head- und body-Element sowie der Mindestinhalt des head-Bereichs.
Das geht mit Flexbox ( display: flex; ) oder CSS-Grid ( display: grid; ).
Du enthälst uns leider vor dass du ein Framework verwendest. Das liegt uns nicht vor. Es ist deshalb gut möglich dass sich dein CSS und das Framework gegenseitig stören. Sowas passiert Anfängern sehr häufig.
Als Anfänger solltest du nicht zu viel auf einmal wollen. Bevor du dich nicht ausreichend mit HTML und CSS auskennst solltest du nicht gleichzeitig Frameworks verwenden. Wenn du ein Framework verwendest solltest du zudem zunächst dessen Möglichkeiten verwenden.
Und dein Lernmaterial scheint veraltet zu sein. Im Internet finden sich leider sehr viele veraltete und sogar falsche Informationen. Besorge dir aktuelles Lernmaterial mit HTML5 und CSS3.
Das Hauptproblem dir zu helfen sind deine vagen Informationen.
Wir kennen weder die realen Bilder noch die realen Texte.
Wir wissen nicht wie groß die Bilder wirklich sind. HTML und CSS sind keine Grafikprogramme. Was du willst ist so überhaupt nicht vorgesehen und wahrscheinlich auch überhaupt nicht erforderlich.
Zum guten Stil gehört es aber in jedem Fall die Bilder zunächst zu bearbeiten, also auch in ihrer Größe anzupassen. Hast du das überhaupt gemacht?
Wir wissen auch nicht wie lang die Texte sind. Ein Wort? Ein kurzer Satz? Ein Absatz? Mehrere Absätze?
Du willst eine konkrete Lösung ohne uns die Grundlagen zu zeigen. Das wird nicht funktionieren. basti hat dir einen Weg gezeigt, mit dem du wohl nicht zurechtkommst. Wir wissen aber nicht konkret was dich daran stört.
Also zeige bitte die konkreten Bilder und die konkreten Texte dazu.
Du musst auf deinem Rechner einen Webserver wie XAMPP am Laufen haben. Und das Mobilgerät muss sich zusätzlich im gleichen Netz wie der Rechner befinden.
Wenn jemand, aus welchen Gründen auch immer, nicht helfen will ist das für mich vollkommen in Ordnung. Derjenige muss das nicht begründen.
Ich kann aber nicht nachvollziehen dass die Hilfe von Anderen unterdrückt werden soll.
Mir scheint das Daizy den Unterricht nicht von selbst besucht, sondern durch eine staatliche Schule, eine Berufsschule oder ähnliche dazu "gezwungen" ist. Daizy ist also gezwungen die vorgegebene Software zu benutzen und muss HTML / CSS / Java so lernen wie es vorgegeben wird. Ob die veraltet sind oder nicht spielt da keine Rolle sondern wird mit schlechten Noten bestraft.
Von daher können wir Daizy wohl nur unter diesen Voraussetzungen helfen.
Leider wissen wir nicht welchen Kenntnisstand von HTML / CSS Daizy lernen muss. Ich befürchte, dass das Lehrmaterial zwar als HTML5 verkauft wird
<!DOCTYPE html>der Inhalt aber eher HTML4 mit ein paar HTML5-Anleihen ist. Dazu brauchen wir Infos von Daizy, zum Beispiel ob "display: flex;" oder "display: grid;" im CSS vorkommen (dürfen). Was ich eher bezweifele.
Zudem solltest du, Daizy, etwas konkretere Fragen stellen. Mit einem kompletten HTML-Kurs ist das Forum überfordert. Offensichtlich bist du an einer Lösung für die Aufgabe vom zweiten Bild aktuell am ehesten interessiert.
Für ein Beispiel benötigen wird noch den Quelltext der vom Lehrer zur Verfügung gestellten Datei (willkommen.html). Also zunächst ohne Änderungen / Eintragungen von dir. Die ist schließlich die Ausgangslage zur Lösung und wir bekommen mehr Infos aufgrund welchen Wissensstands die Aufgabe gestellt wurde. Außerdem zumindest die Größe der eingebundenen Bilder, damit die sinnvoll eingebunden werden können.
Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint
Das wird heutzutage mit CSS-Grid und "minmax" erledigt.
In der Hinsicht Schrift einbinden bin ich nicht so bewandert und habe deshalb die Erinnerungen an entsprechende Informationen nicht gesichert im Gedächtnis. Ich weiß auch nicht ob meine Bezeichnungen korrekt sind.
Meiner Erinnerung nach gibt es vier Schriftformate (woff, ttf, ...), die jeweils nur von unterschiedlichen Browsern verwendet werden können. Deshalb müssen (besser wohl: sollen) alle vier Schriftformate von jeder Schriftfamilie eingebunden werden.
Bei Bootstrap wird zum Beispiel die Schriftfamilie für Sonderzeichen "glyphicons-halflings-regular" sogar fünffach eingebunden:
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}In deinem Fall scheint dein Browser zwar eine andere Schriftfamilie zu erkennen, kann aber weder mit woff noch mit ttf etwas anfangen zu können. Deshalb stellt er als Notausgang die Schrift kursiv dar.
Ruf die Seite mal in verschiedenen Browsern auf und schau, ob die Schriftfamilie in einen oder mehreren anderen wie erwartet angezeigt wird.
Wegen der immer wieder auftretenden Schwierigkeiten werden deshalb die Google-Fonts empfohlen. Die lassen sich einfacher einbinden oder können als Fallback verwendet werden. Das mit meist schöner als eine kursive Darstellung der Standardschrift.
Letztes Update von Phase 5 im Jahr 2010. Kein UTF-8 möglich.
Von daher: Finger weg.