Beiträge von MrMurphy

    Die Tilde ist ein sogenannter Geschwister-Selektor.


    Damit werden Elemente auf der gleichen Ebene ausgewählt. Die meisten anderen Selktoren können nur Elemente auf tieferstehenden Ebenen ansprechen.


    Ich habe die Einstellungen mit meinen Erfahrungen gesucht.


    Meinst du mit "Firefox debugger" die Möglichkeit "Element untersuchen"? Da ist die CSS-Anweisung etwas tricky zu finden. Dort habe ich sie erst im nachhinein gefunden.


    Und zwar muss beim input-Element die :focus angeklickt werden und dann müssen im Label-Element die CSS-Anweisungen kontrolliert werden. Heißt: Beim an- und abklicken von :focus ist kein Unterschied zu sehen, da der bei dem Label-CSS angezeigt wird. Ohne zu wissen dass im Bootstrap-CSS die "Geschwister-Anweisung" hinterlegt ist helfen die Firefox-Infos da nicht weiter.

    Die Schwierigkeit dir zu helfen ist, dass wir das Problem nicht nachvollziehen können.


    Mit deinen Quelltextschnipseln können wird das Problem nicht nachbauen. Zudem passt deine Grafik nicht zu deinen Quelltextschnipseln.


    Wenn dein Quelltext die komplette Webseite ist solltest du zunächst die Fehler beseitigen. Zum Beispiel fehlende Elemente wie body enfügen.


    Soweit ich deiner Grafik entnehmen kann ist nicht das Label-Element das Problem. Der Rahmen liegt um einen der umgebenen Container wie form oder div. Das kann ich aber anhand deiner Angaben leider nicht nachvollziehen.


    Am besten wäre du würdest die Seite online stellen. Oder den Quelltext der gesamten Seite zeigen.

    Tip von mir:


    Deine Testbilder haben alle die gleiche Grundgröße und dieselben Breiten-/Höhenverhältnisse. Verwende besser auch zum Testen schon die Bilder (oder echte unterschiedliche Bilder zum Testen), die du wirklich verwenden willst. Sonst kann es sein dass du dir mit den einheitlichen Bildern ein passendes Layout zurecht zimmerst, das dir dann aber mit den realen Bildern um die Ohren fliegt.

    Der blaue Rand erscheint bei mir nicht.


    Ich verstehe aber auch nicht was du mit


    Zitat

    Wenn du auf den Brwose button druckst, dann im Windows File Menu auf abbrechen clickst, erscheint in Firefox der balue rand


    meinst. Der Button in deinem Beispiel hat auch nicht die Beschriftung "Browse" sondern "Upload".


    Hast du hier den richtigen Quelltext gepostet?

    Was für ein blau meinst du?


    Dunkelblau? Normales Blau? Hellblau? Violett? Lila?


    Im CSS ist kein blauer Rand hinterlegt. Beim Anklicken wird zwar ein dünner, hellblau/lila Rand sichtbar. Das ist jedoch eine Art optische Täuschung durch die unterschiedlichen Grautöne.

    Es ist leider nicht klar was du willst. Was soll passieren wenn sich die Fensterbreite wie ändert?


    Bei CSS kann mit geeigneten Einheiten einiges gemacht werden.


    Aber: Änderungen der Schriftgröße haben sich nicht bewährt und sind häufig benutzerunfreundlich. Wenn die Schrift eine passende Größe hat ist sie in allen Fenstergrößen auf allen Endgeräten gut zu lesen. Da muss nichts angepasst werden.


    Da Schriftgrößenänderungen zwar möglich sind, in der Praxis Webseiten aber eher schlechter machen, finden sich dazu auch wenig Informationen.


    Was man überhaupt nicht machen sollte: Mit kleineren Fensterbreiten die Schriftgröße verkleinern. Für Besucher ist es in der Regel anstrengend den Text dann noch zu lesen. Zumal zum Beispiel Smartphones häufig unterwegs unruhig in der Hand gehalten werden. Dann sollte die Schrift eher etwas größer sein.

    Den Aria-Kram braucht kein Mensch (mehr).


    ARIA (Accessible Rich Internet Applications) dient dazu Webseiten barrierefreier zu machen.


    Das stammt noch aus Zeiten von HTML4 und CSS2, als HTML-Elemente keine Bedeutung hatten. In HTML5 haben aber alle (ALLE) Elemente eine Bedeutung. Durch Anwendung der dafür gedachten HTML-Elemente kann ohne viel Aufwand eine barrierearme Webseite erstellt werden. Barrierefreie Webseiten sind ein Schlagwort, in der Praxis nicht möglich.


    Bei korrekt angewandten HTML-Elementen ist ARIA nicht erforderlich. Falsch angewandte HTML-Elemente mit ARIA-Attributen zu "verbessern" ist ein Widerspruch in sich.


    Es ist also in jedem Fall sinnvoller die HTML-Grundlagen zu lernen.


    Wenn ARIA verwendet werden soll dann aber auch komplett. Ein paar ARIA-Attribute in eine Webseite einzubauen ist wie eine 3 m lange Leiter mit 6 Sprossen.


    So eine Leiter kann aus noch so stabilem Holz mit wunderschöner Maserung handgerfertigt sein. Sie ist trotzdem unbenutzbar.

    Ich verstehe das so, dass die Sidebar nicht angezeigt werden soll, wenn der oberste Teil der einseitigen Webseite angezeigt wird. Erst wenn auf der Seite weiter runtergescrollt wird soll die Sidebar erscheinen.


    Offensichtlich schwebt PeterLustig9 vor, dass jeweils eine Fensterhöhe (zumindest ungefähr) eine Seite der einseitigen Webseite ist. Mir fällt dazu auch kein besserer Begriff ein.

    Der TE lehnt iFrame-Lösungen zwar ab, aber ich denke dass Andere daran vielleicht Interesse haben. Meiner Erfahrung nach ändern sich sich Seiten wie die der Börsenkurse nur höchst selten. Mit iFrames kommt man zudem schnell zu einem Ergebnis und es lassen sich bei Bedarf mit nur wenigen Änderungen auch andere in sich gleicharte Infoseiten einbinden, die man sonst vielleicht regelmäßig nacheinander anklickt.


    Meine Lösung dazu sieht folgendermaßen aus:



    Das CSS basiert auf meiner Standardtestseite. Heißt: Sie enthält für diese Lösung auch nicht benötigtes CSS. Durch die Struktur sollte aber klar werden, welches CSS erforderlich ist. Im HTML-Teil sollte auch erkennbar sein, wie die iFrames eingebunden sind und damit auch wie zusätzliche hinzugefügt werden können.

    Mal ein paar Gedanken zu Image-Gallerien:


    Deutlich über die Hälfte, wahrscheinlich fast schon 2/3, aller Endgeräte werden über einen Touchscreen gesteuert. Die kennen aber keine hover-Effekte.


    Heißt: Die haben keine Chance an die hover-Informationen zu kommen.


    hover-Effekte können zwar nachgebildet werden. Entweder wird die Information angezeigt, solange der Screen berührt wird. Dann sind aber Finger und Hand über der Information. Oder sie erscheinen mit einem ersten Antippen und verschwinden mit einem zweiten Antippen. Die Informationen arten dann in eine Antipp-Orgie aus, die kein Besucher lange mitmacht. Du selbst wahrscheinlich auch nicht.


    In deinem ersten Beispiel in dem Eröffnungsbeitrag haben die Bilder zudem hover- und Klick-Effekte (Informtionen aufrufen und Bild aufrufen). Hast du das mal mit einem Touchscreen-Gerät ausprobiert?


    Es mag dir zwar vielleicht langweiliger erscheinen, aber die Informationen zu den Bildern sollten direkt angezeigt werden. Das ist benutzerfreundlicher.


    Das Einschweben der Bilder mag im ersten Moment schön wirken. Beim Scrollen nervt es aber eher, da es dem Besucher viel Zeit klaut. Nennt sich Zeitdiebstahl und gehört zu den "Extras", die Besucher nerven. Erst recht bei eher langsamen Verbindungen, also bei Smarphones und Tablets.


    Wie geschrieben: Ruf solche "schicken" Seiten mal mit einem Smartphone und / oder Tablet auf. Und noch sinnvoller: Bitte Andere das zu tun und ihre Meinung dazu kundzutun.


    Die Zeiten von Bewegungen auf Webseiten sind seit 20 Jahren vorbei. Sowas lenkt nur ab. Vor über 20 Jahren war das Internet noch neu und eine Spielwiese, da war alles interessant. Sowas nervt die meisten Besucher nur noch. Die wollen schnell und problemlos an die angebotenen Informationen. Und dabei nur rauf-/runter-scrollen müssen.


    Entsprechend wirst du auf erfolgreichen, professionellen Seiten kaum Bewegung finden. Wenn, dann meist Werbung, die niemand braucht und die gedanklich gleich mal als unwichtig eingestuft wird.

    Für mich ist erst mal entscheidend, dir die aktuellen Möglichkeiten von HTML / CSS zu zeigen und dass es sich lohnt, sich mit denen zu beschäftigen. Speziell, wenn du dich doch mal intensiver mit der Erstellung von CSS-Seiten beschäftigen willst.


    Wenn Andere das lesen und Informationen mitnehmen - umso besser und schöner für mich.

    Zitat

    Mal kurz ein bisschen Info. Ich hab vor mehr als 15 Jahren so einige Webseiten erstellt, in Zeiten von tables

    Damals gab es auch weder Smartphones noch Tablets. Und das Layout war starr wie Stahlbeton.


    Ich habe noch ein Beispiel angepasst an dein ursprünliches Design erstellt. Dazu einspaltig mit einer maximalen Breite von 1000px. Dazu waren wie von mir geplant nur ein paar zusätzliche Einträge in den dafür von mir vorgehaltenen, bislang leeren, CSS-Block erforderlich:


    Das ist technisch kein Problem. Grid ist dazu weder erforderlich noch sinnvoll.


    Du kannst also einfach das "display: grid;" löschen oder auskommentieren. Die anderen Grid-Anweisungen sind damit inaktiv und stören nicht.


    Gleichzeitig gibst du .buchvorstellung an gleicher Stelle eine maximale Breite und margin links und rechts ein auto mit auf den Weg. Das kann nach den Änderungen folgendermaßen aussehen:


    Code
    .buchvorstellung {
             max-width: 800px;
             margin-left: auto;
             margin-right: auto;
             /*display: grid;*/
             gap: 1rem;
             grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
             grid-auto-rows: 1fr;
          }


    Mehr ist nicht notwendig. Außer ich habe dich falsch verstanden.

    Ich habe deinen Beitrag erst jetzt gesehen.


    Zitat

    Lässt sich das denn auf mein Design ummünzen?


    Das sollte möglich sein. Dafür habe ich den leeren Block vorgesehen. Dein Design entsteht ja durch Abstände, Rahmen und Farben.


    Zitat

    Kann ich das beim Grid-Layout auch machen, dass jede Grid untereinander kommt?


    Das verstehe ich nicht. Bei schmalen Fenstern sind die Cards ja untereinander. Oder meinst du etwas anderes?


    Zitat

    Ich glaube, es würde verdammt viel Sinn machen, das bei mir dann umzubauen.


    Du solltest mein HTML und CSS einfach übernehmen und mit eigenen Inhalten anpassen können. Mein persönliches CSS vielleicht in der Form


    Dann hat es keine Auswirkungen auf das restliche Layout außerhalb von .buchvorstellung.

    Noch mal zum Thema alle Cards mit gleicher Höhe.


    Im folgenden Beispiel, bei dem nur die Bilder und der Inhalt getauscht wurden, ist meiner Ansicht nach gut zu erkennen, dass das nicht unbedingt sinnvoll ist, wenn alle Cards gleich hoch sind. Wenn der 3. Container unterhalb der beiden anderen steht ist der Leerraum eher unschön.


    Gleichzeitig ist auch ersichtlich, dass das Layout auch bei geänderten Inhalten sehr stabil ist. Das ist also grundsätzlich für viele Zwecke geeignet.



    Wenn nur die Cards in den einzelnen Reihen gleich groß sein sollen muss im CSS nur die Zeile


    Code
    grid-auto-rows: 1fr;


    gelöscht oder auskommentiert werden. Die kommt nur einmal vor. Das kannst du ja mal ausprobieren.

    Zum direkten Testen noch mal meine komplette Testdatei:



    Zum Einrichten von Farben, Abständen, Rahmen und so weiter ohne das Layout versehentlich zu zerstören habe ich einen leeren CSS-Block "/*.buchvorstellung: Farben, Abstände, Rahmen*/" eingefügt.

    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.