Beiträge von Clemens-XS

Sorry, die Test-Website ist inhaltlich in einem Zustand, in dem ich den Link nicht geben möchte.

In deinem Beispiel sehe ich unten eine orange und links weißlich erscheinende Linie am Bildrand. Beim Hover erhält das Bild links, unten und rechts einen Schatten mit Verlauf. Oben bleibt es dabei, dass keine Linie oder Schatten auftritt.

Ich möchte keinen Hover-Effekt sondern rein statisch, dass nur ein Schatten am linken und unteren Rand der Box erzeugt wird und eine 1px Linie weiß am oberen und linken Rand, wobei dann grundsätzlich links und oben kein Schatten erscheinen darf.

Was ist an meiner Beschreibung unklar, sodass du ein Beispiel / Link brauchst?

Ach ja, ich hab's schon versucht, indem ich zu Anfang der o.g. Definitionen eingefügt hatte:

border-top: 2px solid #fff;
border-left: 2px solid #fff;

Leider macht er mir auch die beiden weißen Ränder herum immer noch Schatten, ist also noch keine Lösung.

Aus einem vorhandenen Template habe ich abgeguckt, wie ich einen Schatten erhalte und hab den noch in der Breite, dem Verlauf und der Farbe angepasst:

    box-shadow:0 4px 4px 0 rgba(0,0,255,0.2),0 4px 6px 0 rgba(0,0,255,0.18);
    border-radius: 6px;
    padding: 0.1em 1em 0.2em 1em;

Schon bei der Anpassung der Breite der Schatten und Verläufe stellte ich fest, dass ich gar nicht nachvollziehen kann, was welche Werte beeinflussen. Es erscheint mir einfach unklar, obwohl ich z.B. bei W3CSS versucht hatte, mich schlau zu machen. Also schreibe ich lieber, was ich denn bewirken möchte:

• Die obigen Schattendefinitionen sollen nur einen Schatten nach rechts und unten erzeugen.
• Ergänzen möchte ich diese Schatten so, dass oben und links ein weißer Rand ohne Verlauf entsteht, so als ob Licht auf einer Kante reflektiert wird.

Gibt mir bitte jemand einen CSS-Schnippsel dafür?

Hab den Fehler gefunden: War ne ganz andere Baustelle: JCH Optimize hatte mit seinem LazyLoading zugeschlagen und so das Bild im Header der Seite stark verzögert aufgebaut.

Und das Matomo-Script wird zurzeit von uBlockOrigin und uMatrix geblockt, egal ob ich es als Inline-Script oder als separate Scriptdatei (wie hier anfangs gefragt) einbinde. Und das liegt evtl. an CORS in der htaccess.

OT: Wenn ich in der htaccess mittels CORS die externe Verbindung der Website mit dem Matomo-Server zulasse, wird dann dennoch uBlock und uMatrix diese Verbindung blockieren?

Ich danke dir herzlich, es scheint zu funktionieren. Ich beobachte aber immer noch eine unangenehme Verzögerung, die mit dem Script zusammen hängt. Die Ausführung des Script wird je nach Browser-PlugIn (uBlockOrigin und uBlockMatrix) an der Ausführung gehindert. Dennoch wartet der Browser ca. 1 Sekunde, "ob da noch was kommt".

Jedenfalls wird das png-Bild, das eigentlich als Header auf meiner Website erscheinen soll, erst nach dieser Zeit dargestellt. In der Konsole von Firefox unter Netzwerkanalyse ist auch deutlich zu sehen, dass das Script blockiert wird und erst nach einer Pause dieses Bild geladen wird, obwohl es doch ziemlich oben im Seitenquelltext geladen wird.

Ziel war aber für mich, dass auch (und gerade) dieses Bild zusammen mit der ganzen Site geladen wird und das Script wirklich erst ganz zuletzt einen Einfluss haben darf. Deshalb ja "defer".

Im Seitenquelltext steht das Header-Bild ziemlich weit oben, so wie es ja auch richtig ist. Erstaunlich, warum es dann so spät geladen wird.

Leider ist die Test-Website inhaltlich in einem Zustand, dass ich sie hier nicht verlinken kann.

Ich hatte jemanden mit der Anpassung meiner Website beauftragt. Bsis der Site ist das Joomla-Standard-Template Protostar. In dessen index.php hat der Programmierer ziemlich zu Beginn mittels PHP die nötigen Scripte includiert in der Form:

JHtml::_('script', 'plyr.min.js', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'custom.js', array('version' => 'auto', 'relative' => true));
JHtml::_('script', 'inline-box.js', array('version' => 'auto', 'relative' => true));

Nun möchte ich ein weiteres Script anfügen, mit dem meine Matomo Anlytics den Besuch der Seite registrieren. Das ist auch gelungen mit:

JHtml::_('script', 'matomo-id-3.js', array('version' => 'auto', 'relative' => true));

Leider benötigt dieser JS-Aufruf eine ziemliche Laufzeit, in der der Seitenaufbau in Teilen sehr verzögert wird. Deshalb möchte ich in diese Zeile die Eigenschaft "defer" einfügen, damit der Browser nicht auf die Ausführung des Scripts warten muss.

Frage: Wie / wo muss ich die Eigenschaft "defer" in den oben zitierten Code einfügen?

Auf meiner neuen Website möchte ich jeden Beitrag mit einem Foto beginnen. Das Foto alleine wäre aber zu wenig attraktiv. Und so möchte ich, dass sobald der Beitrag mit seinem Foto im Viewport erscheint, eine kurze Animation startet wie z.B. dass eine gezeichnete Katze durch das Bild / Foto läuft.

Hierzu muss nicht nur die Animation starten, sobald die Bedingung erfüllt ist "Bild im Viewport", sondern auch berücksichtigt werden, dass die Grafik in der Größe an das Foto angepasst werden muss – notfalls über @media screenwidth, besser aber über "object-fit: cover", denn die Fotos lade ich in drei Größen und manipuliere sie zusätzlich mittels "object-fit: cover".

Meine Fragen:

Wie kann ich mein Ziel am einfachsten erreichen? – oder: Was benötigt technisch den geringsten Aufwand? CSS oder Scripting oder…

Wie lade ich überhaupt das Foto und darüber liegend das animierte GIF?

Soeben fand ich diese Test-Website hier:

Webcam Testen

Dort wird die Bildgröße genau so angezeigt, wie meine Kamera ihre Daten liefert, also gemäß meiner Standard-Einstellung 720p @ 30 fps.

Das bestätigt mir, dass die Bildabmessungen inclusive Seitenverhältnis usw. sehr wohl durch ein Script oder ähnliches manipuliert werden können.

Leider sehe ich aufgrund lediglich dieser Erkenntnis keinen Ansatz zur Optimierung in meinem Sinne z.B. bei Videokonferenzen. Oder auch auf meiner eigenen Test-Webseite.

Bei einigen Videokonferenzen bemängelten die Kommunikationspartner, dass das Bild meiner Webcam lediglich im 4:3-Format und anscheinend nur mit der Minimal-Bildgröße von 640 x 480 px dargestellt wurde. Meine Webcam kann aber 720p bei 30 fps liefern.

Nun habe ich sicher gestellt, dass meine Webcam systemweit (Manjaro-Linux) auf 720p und 30 fps fix eingestellt ist (mittels Guvcview settings) und diese Qualität immer liefert, solange kein weiteres Programm diese Einstellungen ändert.

Da ich nicht immer wieder mit einem Kommunikationspartner die Webcam-Qualität prüfen kann bis die Sache geklärt ist, habe ich eine eigene Test-Webseite erstellt und den verwendeten Code (JS und CSS) darauf geprüft, dass die Bildgröße nicht skaliert oder sonstwie manipuliert wird. Die Übertragung erfolgt per WebRTC. Hier ist der Link:

Das Bild meiner Kamera wird offensichtlich grundsätzlich auf 640 x 480 herunter skaliert oder verändert. Ein Mechanismus, der bei WebRTC auf meinen PC zurück wirken kann, um die Kamera auf 640 x 480 zurück zu setzen, ist mir unbekannt. Der ist aber anscheinend über den Browser sehr wohl vorhanden:

Denn nachdem ich die Webcam über den o.g. Link getestet habe und den Stream der Webcam dann über ein anderes Programm auf dem Desktop öffne, hat dieser ebenfalls 640 x 480 als Standard eingestellt.

Was muss ich tun, damit der Stream meiner Webcam in der von mir gewünschten Bildgröße übertragen wird und nicht durch andere Einflüsse zurück gesetzt wird?

Ist die Ursache doch in dem von mir verwendeten Code für Web-RTC zu finden? Und wieso erscheint mein Webcam-Bild bei anderen Konferenzteilnehmer (z.B. bei Zoom aber auch bei Redconnect) ebenfalls in der kleinen Bildgröße (also ohne dass "mein Code" dies bewirken würde?

Da hab ich mich zu früh gefreut:

Sobald einspaltig dargestellt wird, ragt der margin des Textblocks, der sonst die linke Spalte gebildet hätte, nach rechts aus dem Layout unsichtbar heraus.

Aber die bisher rechte Spalte erhält durch das padding eine unerwünschte Einrückung, die natürlich ziemlich stört, je schmaler die einspaltige Darstellung wird.

Was kann ich tun, damit die beiden Abstände, die ich für die Spalten definiert habe, nur dann vom Browser beachtet werden, wenn tatsächlich zwei Spalten angezeigt werden und keine Wirkung haben, wenn nur einspaltig angezeigt wird?

Oder gibt es eine elegantere Möglichkeit, den Abstand zwischen den Spalten zu vergrößern? Z.B. mit dem CSS-column-gap property?

addi Ich hab's jetzt mal mit zwei mal span6 ausprobiert und jetzt funktioniert es. Das div mit span5 hatte ich ja nur aufgrund deiner Anregung übernommen, ohne über das Grid nachzudenken.

Herzlichen Dank! Da hätte ich lange dran gesucht.

Und jetzt hab ich soeben gerade geschafft, den Abstand zwischen den beiden Textspalten zu vergrößern. Ich hatte mir ja bereits "Abstandshalter" mit den Klassen right-cl und left-cl gebastelt. Macht also in der linken Spalte rechts einen Abstand und in der rechten Spalte nach links einen Abstand. So bleibt es symmetrisch. Beides bringt ein padding von jeweils 1em. Ich nutze also:

div class="row-fluid right-cl"

div class="row-fluid left-cl"

Herzlichen Dank für deine hilfreichen Tipps!

Danke addi

Jetzt bin ich erst wieder dazu gekommen, deine Tipps auszuprobieren. Die Spalten funktionieren jetzt endlich unter allen Variationen, wie ich es mir wünsche...

allerdings mit zwei deutlichen Schönheitsfehlern, die ich per Screenshot hier zeige:

Die beiden Textspalten sind aus mir unerklärlichen Gründen nicht gleich breit. Im Screenshot ist die linke 260px und die rechte 214px. Dabei nutzt die rechte Spalte deutlich den verfügbaren Platz nicht aus.

Außerdem möchte ich, dass der Abstand zwischen den Spalten etwas größer ist.

Wie kann ich diese beiden Fehler beheben?

OK, ich muss gleich wieder in meine Praxis und vorher Mittagessen. Ich will mir das in Ruhe anschauen, hab aber so viel verstanden, dass ich mit "class span-6" usw. etwas erreichen kann, weil ich so eine Spalte aus dem Grid oder mehrere erwischen kann.

Davon hab ich aber noch nicht eine Erkennung, wie breit denn die aktuelle Main-Content-Spalte ist. Wird sie breiter als ca. 480px, würde ich gerne 2-spaltige Darstellung erreichen.

Das ist richtig! Deshalb ja "Experimentier-Website". Auch die template.php (default.php) des Protostar ist verändert. Und ide viewport-width.css ist einfach auch nur eine user.css oder custom.css oder wie man sie nennen mag, die per @import ins template.css eingefügt wird.

Da manche Klassen wie z.B. "content" "container" usw. bereits anderweitig vergeben sind, habe ich für die meisten der von mir angelegten Klassen das Postfix "-cl" angehängt.

Aktuell ist ein Entwickler damit beschäftigt, bestimmte Teile zu programmieren, wodurch auch viel JS in die template.php hinein gekommen ist.

Und wenn das Ganze mal fertig ist, werde ich sicher auch das Template als Kopie anlegen. Aktuell hat es sich nun mal so ergeben.

Das Ganze ändert aber nix daran, dass ich jetzt mmer noch nicht weiß, wie ich zum Ziel komme. Irgend was mit Bootstrap soll deiner Äußerung nach die Lösung bringen, das habe ich bisher verstanden.

..."durch Bootstrap 2 ersetzen" – Keine Ahnung! Sorry, aber du könntest mir auch raten, die Aufgabe mit einer C++ Programmierung zu erledigen.

Ich müsste mich da in die Tiefe einarbeiten und dazu fehlt mir schlichtweg die Zeit.

Ich ahnte nicht, dass weitere Angaben für die Beantwortung nötig wären. Ich nutze das Protostar Template mit der Auswahl "FluidDesign". Dies beruht auf Bootstrap 2.3.* und hat ein 12-spaltiges Grid.

Der Main-Content erhält entweder 9 oder die vollen 12 Spalten, abhängig davon, ob die rechte Seitenspalte genutzt wird.

Ich nutze also zwar das Grid, weiß aber nicht, wie ich Bootstrap oder andere Techniken für meine Aufgabe nutzen kann. Deshalb ja meine Frage hier.

Meine Experimentier-Website ist hier:

Da inzwischen rund 2/3 meiner Besucher mit Mobilgeräten kommen und nur 1/3 via Desktop, verliert allmählich die spaltige Darstellung an Bedeutung. Sie soll ja nur die Lesefreundlichkeit sicher stellen, bevor die Zeilen zu lang werden.

Irgend eine template-eigene Abfrage zwingt sowieso bei allen Mobilgeräten zu einer Darstellung nur mit Main-Content = 1 Spalte, auch wenn das Gerät deutlich über 1200px screenwidth hat (was mich aber nicht stört).

Hmmmm, habe ich mich missverständlich mit meinem Anliegen ausgedrückt?

Sicherheitshalber noch mal nur die Beschreibung der Schwierigkeit:

• Die Website soll ab ca. 750px screenwidth eine rechte Spalte einblenden.
• Der Main-Content soll, um den Text lesefreundlich zu halten, ab einer Breite des Main-Content-Container von ca. 480px eine zweispaltige Darstellung des Main-Content bieten.

Mache ich die zweite Bedingung, die sich ja nur auf den Main-Content bezieht, ebenfalls von @screenwidth abhängig, so wird

der Main-Content schlagartig recht breit dargestellt,

sobald die rechte Spalte wegfällt. Gleichzeitig verhindert die @screen media-Regel, dass der Main-Content weiterhin zweispaltig dargestellt wird. Die Zeilenlängen des Text sind zu lang.

Auch bei bestmöglicher Wahl der @media-Grenzen werden die Spalten im Main-Content dann schlagartig zu schmal,

sobald die rechte Spalte hinzu kommt.

Ein erster Lösungs-Ansatz vielleicht:

die zweispaltige Darstellung sollte von der Breite des main-content Container abhängig sein.

Leider gibt es dafür keine @media-Regel. Aber evtl. könnte man mit der Kombination min-width oder max-width

und display: none etwas gestalten?

Die Verknüpfung des Screenwidth-Status mit der zweispaltigen Darstellung wäre auch deshalb schwierig, weil die meisten Webseiten gar keine Elemente in einer rechten Spalte haben. Und dieser Zustand lässt den Main-Content breit werden, ohne dass dies durch eine "CSS-Abfrage" erkannt werden kann.

Vielleicht müsste man in die template.php eingreifen und dort feststellen, ob eine rechte Spalte erschaffen wird. Wenn ja, erzeugt diese PHP-Datei eine CSS-Klasse, die in Verbindung mit Screenwidth eine Steuerung der Zweispaltigkeit erlaubt? – Oder löst man so etwas lieber mit JS?

Ich hab ja noch Chrome und Midori auf meinem Manjaro-Linux laufen. Damit muss ich dann halt gegen testen. Hässlich aufwendig dieser Mist!

Ich kann mich also damit „trösten“, dass es anderen auch so geht!

Bisher hatte ich eine Lösung, die ganz gut funktioniert hat, bei der sich aber die Breite auf die screenwidth bezog und per @media-Kondition leicht gesteuert werden konnte.

Besonders schön war, dass beide Spalten immer gleich lang waren, egal wie der Text sich darin verteilt hat! Sogar bei Bedarf konnte ich eine vertikale Trennlinie zwischen die Spalten ziehen, die natürlich bei einspaltiger Darstellung verschwand.

Leider gibt es auch die Notwendigkeit, nicht nur den main-content in manchen Webseiten darzustellen, sondern auch eine Seitenspalte. Die Breite der Seitenspalte würde aber fälschlich bei einer @media-Kondition mit einbezogen. Das führt dann zu viel zu schmalen Spalten im main-content, wenn die Seitenspalte angezeigt wird.

Hier ein Ausschnitt aus dem CSS, das mittels @media gut funktioniert hat und sogar für einen automatisch eingefügten Abstand zwischen den Spalten gesorgt hatte:

.column-cl {
      float: left;
      width: 100%;
      box-sizing: border-box;
    }

@media screen and (min-width: 800px) {
    .right-cl {
        padding-right: 1em;
        /* border-right: 1px solid #fbb;  
           bei Bedarf Trennlinie zwischen den Spalten */
    }
    .left-cl    {
        padding-left: 1em;
    }
} 

    /* Clear floats after the columns */
.row-cl:after {
      content: "";
      display: table;
      clear: both;
    }


/* Oberhalb von 800px soll zweispaltig dargestellt werden */
@media screen and (min-width: 800px) {
  .column-cl {
    width: 50%;
      }
} 

Im HTML sieht dann die Anwendung so aus:
<h3 class="head-bg">Erster Untertitel</h3>
    <div class="row-cl">
        <div class="column-cl right-cl">
            <p>Text in der linken Spalte</p>
        </div>
        <div class="column-cl left-cl">
            <p>Text in der rechten Spalte</p>
        </div>
   </div>

Um die viel zu kleinen Spalten zu vermeiden, darf sich die Kondition nicht mehr mittels @media screenwidth auf die darstellbare Breite insgesamt beziehen, sondern muss sich auf die Breite des div containers ".row-cl" beziehen.

Erst wenn "row-cl" breiter als 480px ist, soll zweispaltig dargestellt werden.

Frage: Wie kann ich mittels min-width oder max-width Definitionen oder mit anderen CSS-Möglichkeiten mein Ziel erreichen?

Keine Ahnung, was das nu wieder war. Heute passt wieder alles. – Ich vermute, dass mir mal wieder der Chaceh vom Firefox einen Streich gespielt hat, obwohl ich extra ein AddOn installiert habe, mit dem der Cache vom Firefox gelöscht wird.

So hilfreich die Developer Tools im Firefox sind... aber du änderst was in einer CSS-Datei und kannst dich nicht darauf verlassen, dass Firefox auch nach einem CacheClean die vorgenommenen Änderungen wirklich anzeigt.

Man muss dazu den Tab der entsprechenden Seite schließen und wieder neu in einem Tab frisch öffnen. Erst dann wird die Seite zuverlässig neu aufgebaut!

Alternative: Ich muss die Seite in einem anderen Browser kontollieren, der dieses Problem nicht hat, wei z.B. Midori. Chromium traue ich noch nicht über den Weg.