Beiträge von Clemens-XS

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.

Ich hab in meiner htaccess die bisher übliche mod rewrite-Einstellungen beibehalten, die von Joomla empfohlen sind.

"moderne" siehe mein Screenshot

Ach ja und danke an addi Hab das jetzt mal ausprobiert. In älteren Joomla-versionen gab es das wohl noch nicht.

Danke Astrid, jetzt funktioniert es auch bei mir.

Das WorkAround mit dem Menütyp URL hat aber leider auch zwei Nachteile, wie ich jetzt feststellen konnte:

1.) Mein MobileMenü zeigt, wenn ich auf der Seite "Inhalt" bin und das Menü neu ausklappen lasse, nicht an, dass ich auf der Seite Inhalt bin, sondern statt dessen auf "home".

2.) Ich möchte auf der rechten Seitenspalte zwei Module anzeigen lassen. Anscheinend verhindert Joomla dies, wenn der main content über eine URL eingefügt wird.

Und jetzt, wo ich wenigstens mal das Inhaltsverzeichnis angezeigt bekomme, hätte ich noch gern dessen Erscheinungsbild dem der restlichen Site angepasst:

Ich möchte der Darstellung des Inhalts, die von OSM als HTML geliefert wird, eine class zuweisen, durch die das ganze Inhaltsverzeichnis (wie alle meine Beiträge) in einem schattenbehafteten Rahmen angezeigt wird.

Im Menü selbst geht das nicht, aber wo sonst?

Den Font für body habe ich auf meiner neuen Experimental-Website prozentual definiert. Beim Ausprobieren per CSS fand ich heraus, dass es einen Sprung der Fontgröße gibt bei 98%. Gebe ich 97% ein, kommt in Chrome und Midori (=Safari) die Schrift in der gewünschten Höhe. In Firefox wird sie größer dargestellt, sodass es schon deutlich stört.

Ich habe dann versucht, es auf 96 und 95% zu setzen. Die Schrift bleibt dann in Chome und Midori immer noch auf der gewünschten Größe, aber die Größe in Firefox verringert sich nicht, wie ich angenommen hatte.

Würde ich aber noch kleiner werden, so wäre der Font in Chrome und Midori zu klein, wenn er in Firefox richtig wäre.

Link zur Experimental-Website:

Was tun? Sollte ich denn trotz Responsive Design die Fonts doch wieder in festen Pixeln angeben? Oder hilft das nicht gegen die jetzige Schwierigkeit?

Auf meiner neu installierten Experimentierseite sind die "modernen URLs" aktiviert, bei denen die Beitrags-IDs rausgefiltert werden. Nun habe ich in einer der Kategorien einen neuen Beitrag angelegt und diesen als Haupteintrag markiert. Er erscheint auch einwandfrei auf der Homepage. Aber die zugehörige URL führt zu einer 404 statt zur gewünschten Seite.

Der neue Beitrag hat – außer der Darstellung auf der Hauptseite – keinen Zugang z.B. über einen Menüpunkt.

Erst nachdem ich den Beitrag über einen Menüpunkt in einem Schattenmenü verlinkt habe, war der Fehler weg. Ich dachte, der Kunstgriff über das Schattenmenü wäre in der jetzigen Joomla-Version nicht mehr nötig?

Gibt es eine einfachere Möglichkeit als über ein Schattenmenü zu gehen?

Gerade hab ich OSMap free installiert und über einen Menüpunkt die HTML-Liste meiner Webseiten anzeigen lassen wollen. Wenn ich den Menüpunkt anklicke, erhalte ich eine 404-Seite.

Gehe ich im Backend auf das Editieren der von OSMap erstellten Sitemap, so sind alle Seiten-URLs dort richtig aufgeführt. Und natürlich ist die Sitemap "veröffentlicht".

Nun weiß ich nicht, wie ich den Fehler beheben kann. Denn was nicht angezeigt wird, kann ich schlecht untersuchen.

Aaaachhhh, das Leben kann doch auch mal so einfach sein!

Herzlichen Dank sag ich dir!