Beiträge von MrMurphy

    Hallo

    Zitat

    Ist es OK, wenn ich nach vermeintlich erfolgreicher Umsetzung eines weiteren Tipps wieder nachfrage, ob das so korrekt ist und wie es dann weitergehen kann?

    Klar.

    Zitat

    der im HTML als myTextColumn und myFooter bezeichnete Text sollen bei ausreichender Auflösung / Bildschirmbreite nicht über und unter den Bildern stehen sondern beides rechts daneben.

    Wie schon geschrieben wirst du ein paar Abstriche an deinen Layoutwünschen machen müssen. Das kommt aber später.

    Die Anordnung erscheint mir sinnvoll und ist mit Flexbox umsetzbar. Wie du aber wohl schon vermutest passt die Struktur deiner Seite noch nicht.

    Momentan hast du folgenden Aufbau

    Mit Flexbox können jedoch "nur" Container innerhalb eines übergeordneten Containers angeordnet werden. Für deine Wünsche benötigst du also folgende Struktur

    Nebenbei: Wobei id nur verwendet werden sollten, wenn sie sachlich erforderlich sind. Schöner und praxisgerechter wäre demnach

    Weiter zur Lösung:

    #myCardWrap wird dann zum Flex-Container und #myTextColumn, .imgWrap sowie #myFooter zu Flex-Items.

    Ich habe mal eine Testseite erstellt. Du kannst ja mal schauen ob das Verhalten deinen Vorstellungen entspricht. Nicht das wir die ganze Zeit aneinander vorbei schreiben:

    Testseite

    Wobei ich darauf geachtet habe die Regeln von HTML5/CSS3 einzuhalten, auf besucherfreundlichkeit geachtet habe und die aktuelle und zukünftige Entwicklung berücksichtigt habe. hover-Effekte zum Beispiel machen in Zeiten von um sich greifenden Touchscreens nur noch wenig Sinn.

    Gruss

    MrMurphy

    Hallo

    Zitat

    im einfachsten Fall unterscheide ich zwischen PC und Handy: PC-Darstellung mit flex-direction:row, Handy mit flex-direction:column

    Zitat

    vermutlich: Handy, Tablet und PC

    Nein. Diese Einteilung solltest du schnell und konsequent vergessen. Es gibt für Webseiten keine Handys, Smartphones, Tablets, Notebooks, PC und was auch immer.

    Wie sich eine Webseite visuell verhält hängt nur von der zur Verfügung stehen Fensterbreite ab, egal was für ein Gerät der Bildschirm ziert.

    Daraus folgt dann auch gleich

    Zitat

    Das Projekt wird ja noch wachsen - ich würde also je Auflösungsbereich (vermutlich: Handy, Tablet und PC) eine css-Datei anlegen, die das Layout entsprechend festlegt. Wäre das der richtige Weg?

    dass das der falsche Weg ist. Das CSS wird nicht nach Geräten oder der Fensterbreite unterteilt, sondern nach der Struktur der Webside und wiederkehrenden Darstellungen, folgt also dem Inhalt. Ansonsten landest du ganz schnell in Teufels Küche, nicht als Koch, sondern als Dessert.

    Ob das CSS in einer oder mehreren CSS-Dateien liegt ist dabei zweitrangig. Bei der Entwicklung des Layouts ist die Unterteilung auf mehrere CSS-Dateien durchaus sinnvoll, da so verschiedene Lösungen parallel entwickelt und schnell ein- und ausgebunden werden können.

    So entstehen auch viele Media Query-Blöcke, die direkt bei den jeweiligen Grundangaben stehen und leicht gepflegt und angepasst werden können. Das ist auch sinnvoll, da der Einsatz der Media Queries vom jeweiligen Inhalt bestimmt wird.

    Zitat

    ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten

    Nein.

    Flexbox kann zwar viel, aber nicht alles.

    Alle Container, die mittels einer Flex-Anweisung gestaltet werden sollen (Flex-Items), müssen direkt in einem übergeordneten Container (Flex-Container) liegen. Flexbox verteilt dann den Leerraum, so dass die gewünschte Darstellung erzielt wird. Zusätzlich kann die Reihenfolge der Flex-Items unabhängig vom Quelltext bestimmt werden.

    Zitat

    Wie erreiche ich dabei am besten, dass bei einer mittleren Auflösung statt 3 Bilder + Text (also 4 Spalten) nur 2 Bilder + Text (also 3 Spalten) angezeigt werden.

    Es werden keine Spalten erstellt. Dadurch, dass alle übereinander stehenden Container jeder Zeile gleich breit sind erscheint nur die Illusion von Spalten, also eine Spaltenansicht. Denn

    Zitat

    ich definiere für den Bereich, der die spaltenweise Darstellung haben soll, eine flexbox, genauer einen Container und 4 Spalten

    durch konkrete Spalten könnte deren Inhalt nicht mehr frei angeordnet werden, so wie es dir vorschwebt.

    Die Spaltenansicht wird durch die Breite der Flex-Items erzeugt. Bei 25% passen vier Container nebeneinander, bei 33,33% drei. Wobei je nach Boxmodell noch padding, border und margin berücksichtigt werden müssen. Bei 25% Breite und einem Rahmen von 1px passen nur drei Container nebeneinander.

    Bei Flexbox empfiehlt sich aktuell das Content-Box-Modell, da einige noch relevante Browser dies bei Flexbox stur anwenden. Ansonsten müsste für diese Browser immer ein Fallback eingebaut werden.

    Am sinnvollsten und bewährtermaßen erstellst du zunächst das Layout für schmale Fenster ohne Flexbox. Wer immer noch die inzwischen unbegründete Sorge trägt, das Flexbox von den Browsern einigen / vielen seiner Besucher nicht unterstützt wird, hat damit gleich ein Fallback.

    Dann werden mit zunehmender Fensterbreite die Media Queries und Flexbox eingefügt und damit aktiviert. Diese Vorgehen wird mit dem Schlagwort Mobile First umschrieben.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Hier fehlt mir der entscheidende Tipp, wie das gewünschte Layout mit der wechselnden Anzahl Spalten grundsätzlich hinzubekommen ist.

    Der Tipp heißt Flexbox.Oder in Langform: Das Flexbox-Modell. Damit können heute die meisten Layouts erstellt werden. Auch zum Beispiel die Navigation.

    Gruss

    MrMurphy

    Hallo

    Das wird leider schwierig.

    Du willst eine aktuelle responsive Seite, verwendest aber eine alte HTML-Version und die verwendeten Elemente wie zum Beispiel font oder big sind teilweise bereits in dieser veralteten HTML-Version veraltet.

    Zudem erschwert das verwendete Inline-CSS Anpassungen.

    Deine Wünsche sind mit aktuellem HTML5 und CSS3 problemlos umsetzbar. Dazu muss der Quellcode aber komplett neu aufgesetzt werden. Die Frage ist ob du dazu bereit bist?

    Gruss

    MrMurphy

    Hallo

    Mal abgesehen davon, dass das font-Element und das size-Attribut seit über 10 Jahren nicht mehr verwendet werden sollen, funktionieren die Zeilenumbrüche bei mir.

    Das Problem muss also in dem Teil des Quelltextes stecken den du uns nicht zeigst.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Auf der Seite sollen 14 Webseiten angezeigt und verlinkt werden.

    Was meinst du mit "angezeigt" werden? Als Text? Als Grafik? Beides zusammen?

    Zitat

    Wie bekomme ich im div an einer bestimmten Stelle einen Zeilenumbruch hin?

    Was meinst du mit "bestimmter Stelle"?

    Zitat

    Also dynamisch mit div.

    Auch wenn ich noch nicht genau verstanden habe was du erreichen möchtest, bietet es sich wahrscheinlich an, div zu verschachteln, also

    Die inneren div werden dann per CSS wie von dir gewünscht angeordnet. Dazu gibt es verschiedene Möglichkeiten wie

    display: inline
    float
    display: flex

    Mit Media Queries und Angabe der Breite der inneren div kann dann vorgegeben werden, wieviele div nebeneinander stehen sollen.

    Wobei in aktuellem HTML/CSS statt div eher geeignetere Container verwendet werden sollten, zum Beispiel article oder section.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Ist dies alleine durch HTML und CSS realisierbar ohne für jedes einzelne Bild eine eigene Seite anzulegen

    Wenn du das ernst meinst

    Zitat

    eine simple Grafik-Slideshow

    Ja.

    Zitat

    Jede Bilderreihe sollte ihre eigene HTML-Seite haben um in einem Archiv über direkte Verlinkung auf jeweilige Seite abrufbar zu sein (Br. 1 - Br. 2 - Br. 3 usw.).

    Das verstehe ich nicht. Für jede Bilderreihe eine eigene Seite oder sollen die auf einer Seite untereinander stehen?

    Zitat

    Wäre es zudem auch möglich, die Pfeilbuttons mit Keys und Shortcuts zu belegen?

    Das ist grundsätzlich schwierig, da die meisten Shortcuts bereits von den Browsern oder dem jeweiligen Betriebssystem selbst belegt sind. Weiterhin verwenden die Browser unterschiedliche Shortcuts. Diese Belegungen sollten wie alle Benutzersteuerungsmöglichkeiten nicht geändert werden.

    Siehe zum Beispiel

    http://www.die-barrierefreie-website.de/grundlagen/tastaturbedienung.html

    Gruss

    MrMurphy

    Hallo

    Zitat

    Wäre das schon mal der richtige Ansatz oder gibt es bessere Lösungen?

    Das ist der richtige Ansatz.

    Zitat

    Wie schaffe ich es Elemente, wie beispielsweise einen kleinen Text im Blockformat in diesen einzelnen farbigen Steifen zu zentrieren und zwar so wie es auch in diesem Forum oder bei dem obenstehenden Beispiellink der Fall ist. Das also links und rechts immer der gleiche Abstand zum zum jeweiligen Bildschirmrand ist.

    So wie ich die Frage verstehe gibst du den Blockelementen eine Breite (width oder max-width) und einen seitlichen Abstand (margin) mit der Angabe auto.

    Gruss

    MrMurphy

    Hallo

    Ob das HTML einer Webseite korrekt ist kann erst an Hand der kompletten Webseite mit Inhalt beurteilt werden.

    Aus dem Bauch raus enthält dein Quelltext einige Fehler.

    Zitat

    Oder darf innerhalb von <section> ein <main> und <aside> auftauchen?

    Grundsätzlich ja. Aber ohne die komplette Seite zu kennen ...

    Gruss

    MrMurphy

    Hallo

    Spiel hier im Forum bitte nicht mit der Schriftgröße rum. Unterschiedliche Schriftgrößen- oder sogar -arten nerven viele Besucher.

    Zitat

    Ich habe nun alle Bilder gecheckt und in keinem Dateinamen ist ein @-Zeichen bzw. ein Umlaut enthalten.

    Dein Quellcode interessiert in diesem Zusammenhang überhaupt nicht. Sondern der Quellcode, der in den Browsern der Besucher, also zum Beispiel mir, ankommt.

    Ich habe aber grade mal zum Testen JavaScript gesperrt. Dann werden alle Bilder angezeigt. Offensichtlich wandelt das JavaScript auf deiner Seite die Dateinamen um. Das solltest du also prüfen. Damit kenne ich mich nicht aus.

    Gruss

    MrMurphy

    Hallo

    Was passiert denn wenn du konventionelle Bild-Dateinamen verwendest? Also nur mit dem englischen Alphabet und bei Bedarf dem Unterstrich, ohne zum Beispiel dem @-Zeichen? Sonderzeichen werden vom Browser gerne mal als Steuerzeichen interpretiert.

    Für Pfad- und Dateinamen sollte grundsätzlich nur das englische Alphabet und der Unterstrich verwendet werden. Vorzugsweise nur Kleinbuchstaben. Keine deutschen Umlaute, keine speziellen Buchstaben anderer Sprachen, kein Bindestrich, keine Satzzeichen und keine Sonderzeichen.

    Der Aufbau der Seite dauert einige Zeit. Zunächst werden die Inhalte übernommen und angezeigt, auch die Bilder. Dann werden die CSS-Anweisungen, Steueranweisungen, JavaScript und so weiter umgesetzt. Also auch das, was in den Browsern für das @-Zeichen hinterlegt ist. Dabei verschwinden die Bilder dann.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Wär toll wenn da jemand ne Lösung hätte!

    Dafür wird es keine Lösung geben.

    Zitat

    wenn er dort jeweils nur ein produkt auzeigen würde, anstatt zwei.

    Die Überlegung ist richtig und vom HTML / CSS her ist das eigentlich kein unüberwindliches Problem.

    Leider (in deinem konkreten Fall) ist

    Zitat

    squarespace

    ein kostenpflichtiges Produkt. Um Quellcodedieben und Nachahmern das Leben sehr deutlich zu erschweren haben die deshalb möglichst viele Fallen und Umwege in ihre Quelltexte eingebaut. Der wird zudem wohl noch durch JavaScript im Hintergrund nach uns nicht bekannten Regeln geändert.

    Einfache Änderungen im CSS, wie sie sonst auf Webseiten problemlos möglich sind, führen bei squarespace zu unvorhersehbaren Ergebnissen.

    Ohne Hilfe von squarespace wird jemand, der sich sehr gut mit HTML, CSS und Javasript auskennt, deshalb wahscheinlich ein Wochenende oder länger an einer Problemlösung sitzen. Wobei dann nicht abzusehen ist was passiert, wenn squarespace Updates durchführt, die bei deren Sichheitsdenken wahrscheinlich auch gegen Änderungen im Quellcode wirken sollen.

    Vom Prinzip her ist dein Wunsch eigentlich simples HTML und CSS. In deinem Fall durch squarespace aber nicht zu lösen. Wenn die dir nicht helfen wirst du kaum eine Lösung finden.

    Wobei nach meinen Eindrücken squarespace durchaus aktuelles HTML und CSS verwendet. Eventuell bietet squarespace sogar selbst eine Lösung an, die dir bislang entgangen ist. In den Tests, die ich gelesen habe wird immer wieder auf die unübersichtliche, nicht intuitive, nur in englisch gehaltene, Bedienoberfläche hingewiesen.

    Gruss

    MrMurphy

    Hallo

    Zitat

    Warum ist das so...

    Das liegt am fehlenden hover-Effekt von Touchscreen-Geräten.

    Bei Menüs werden Untermenüs häufig durch den hover-Effekt aufgeklappt. Der Menüpunkt, der den hover-Effekt steuert, ist meist aber auch bereits mit einem Link hinterlegt.

    Wird der angeklickt, wird die damit verbundene Seite aufgerufen.

    Bei Touchscreen-Geräten könnte so nie das Untermenü aufgerufen werden. Deshalb wird bei denen mit dem ersten Klick meist das Untermenü geöffnet und erst mit einem zweiten Klick wird dem Link gefolgt.

    Das ist meiner Kenntnis nach (ich lasse mich da aber gerne verbessern) in den HTML-Regeln aber nicht vorgeschrieben, sondern jeder Browserhersteller entscheidet für sich was passiert, wenn auf Touchscreen-Geräten ein Link angeklickt wird, zu dem gleichzeitig ein hover-Effekt hinterlegt ist.

    Deshalb kann ich dir bei der Frage

    Zitat

    wie kann man das Taster-Verhalten auch am Android-Tablet erreichen?

    leider nicht weiterhelfen.

    Zitat

    Nur im iPhone-Browser werden die Buttons nur sehr klein angezeigt

    Dazu müssten wir deinen Quellcode kennen. Aus dem Bauch raus würde ich auf eine ungünstige Viewport-Angabe tippen. Heutzutage ist folgende im head-Bereich üblich

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Falls du keine oder eine andere hast kannst du die ja mal ausprobieren.

    Gruss

    MrMurphy

    Hallo

    Ich habe mein Beispiel mal etwas überarbeitet. Im Endeffekt soll das CSS besser nachvollziehbar und damit (auch spätere) Anpassungen leichter sein.

    Die Wochentage habe ich in h4 Elemente gepackt. So sind sie und die Datums über :nth-of-type besser nachvollziehbar anzusprechen. Das ist meiner Ansicht nach auch sachlich korrekt, da die Wochentage jeweils eine Art Unterüberschrift darstellen.

    In das CSS habe ich ein paar erklärende Kommentare eingebaut.

    Zitat

    Wichtig ist mir, dass ich irgendwie ein Tag Kennzeichen kann, wenn er z.B. nur ein paar Stunden belegt ist.

    Gleichzeitig habe ich dafür (im März) vier Möglichkeiten eingebaut. Welche du davon verwenden willst oder mit welcher du am Besten zurecht kommst kannst du dann selbst auswählen.

    Gruss

    MrMurphy

    Hallo

    Es kommt darauf an ob es dir gefällt. Ich weiß ja überhaupt nicht in welchem Zusammenhang der Kalender angezeigt wird und wofür er wichtig ist.

    Wenn du mit der Darstellung zufrieden bist ist alles ok.

    Gruss

    MrMurphy

    Hallo

    Im Prinzip ja. Die h1 will aber je noch Seitenaufbau eher eine h3 oder h4 sein. Außerdem sollten die leeren p-Elemente entfallen. Außerdem sollte jedes article-Element eine Klasse (class) bekommen.

    Leere HTML-Elemente sollten so weit möglich vermieden werden.

    Da die Größe der einzelnen Monate (article-Elemente) feststeht kann ja alles per CSS gestaltet werden.

    Gruss

    MrMurphy

    Hallo

    Wenn die Bilder im Eröffnungsbeitrag das endgültige Layout darstellen würde ich für jeden Monat nur einen Container wählen, den Monat als Überschrift und den Rest als p-Element. Die Gestaltung dann per CSS.

    Gruss

    MrMurphy