Beiträge von tk1234

    Genau dies war die Lösung.

    Nein ist es nicht. Damit trittst du die Barrierefreiheit mit Füßen (nein, auch ein Auftraggeber ist kein Grund, Barrierefreiheit ist für Seiten afaik teilweise sogar Pflicht!) - deswegen habe ich auch nicht auf outline hingewiesen (das war in diversen Threads schon öfters für solche Rahmen verantwortlich), auch weil ich immer noch auf Code gewartet hatte …

    Hat jemand von euch eine Idee wie ich diesen Rahmen ausblenden kann?

    Ohne den Code der Seite zu kennen lässt sich da nur raten, ich würde aber mal darauf tippen dass die Antwort lautet: am besten garnicht. Vermutlich ist der Rahmen dazu da um die Tabs auch per Tastatur bedienbar zu machen - und wenn du den Rahmen entfernst, lassen sich die Tabs nicht mehr per Tastatur bedienen da nicht mehr erkennbar ist welcher Tab gerade den Focus hat.

    Ich habe eine Seite erstellt, welche über AJAX und JavaScript mehrere Farbcodes und Namen hierzu aus einer JSON-API zieht (Feste Anzahl).

    Es gibt dann eine Tabelle, in welcher der Zellenhintergrund in dem Farbcode gefärbt wird und der Name als Inhalt drin steht. Das funktioniert auch alles schon soweit gut. Nun kann es aber vorkommen, dass der Farbcode Schwarz ist - und die Schrift auch. Das verringert die Lesbarkeit enorm, insbesondere auf einem Ausdruck ;-)

    Eine direkte Lösung habe ich jetzt auch nicht, da wirst du wohl den Kontrast berechnen und ggf. auf weiße Schrift umschalten müssen (falls es Farben gibt auf denen weder weiß noch schwarz gut lesbar ist ggf. noch weitere Schriftfarben vorhalten).

    Nachtrag: ich habe nicht genau genug gelesen, sowas hast du ja drin, nur funktioniert es nicht (warum hat Sempervivum ja schon geschrieben). Evtl. kann ein Blick auf den verlinkten Kontrastrechner trotzdem nicht schaden, evtl. berechnet der das anders/besser?


    Zitat

    Es ist auch JScript eingebunden, da die Scriptvorlage die ich gefunden und angepasst habe dies nutzt. Das funktioniert auch. Wenn ich es recht verstanden habe ist im JScript $ als "Zentraler Name" definiert. Das finde ich aber nirgends und ich vermute, dass ich einfach den Wald vor lauter Bäumen nicht sehe :rolleyes:

    Wie schon geschrieben: jQuery, nicht jScript (das ist was anderes). Was das $ bedeutet steht im Handbuch zu jQuery - was da allerdings nicht steht, ist dass jQuery hier völlig überflüssig ist: du nutzt nur $(document).ready() und dafür reicht Vanilla-JS völlig aus. Ein einfaches document.addEventListener('DOMContentLoaded', … ); macht das gleiche, spart aber die JQuery-Datei. Der Ajax-Request würde sich auch mit jQuery lösen lassen, ist aber auch nicht nötig: Fetch API existiert.



    Zitat
    Code
    1. document.getElementById('weft_1_cell').bgColor = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Color'];
    2. document.getElementById('weft_1').value = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Name'];

    Ohne jetzt den HTML-Code dazu zu kennen, würde ich mal schwer vermuten dass man das mit einer kurzen Schleife und ohne die IDs abfrühstücken kann.

    Es sollen Logo, Titel, Untertitel und Seitenüberschrift links bündig auf einer senkrechten Linie stehen.

    Die ersten drei sind bündig (beim Logo sieht man es nur nicht direkt weil das Bild links und rechts weiße Bereiche hat). Die Seitenüberschrift ist weiter links dargestellt als die anderen Elemente, da von Bootstrap an zwei Elternelemente im Header jeweils 15px Innenabstand vergeben werden (was ohnehin die falsche Einheit ist).


    An der Seite gibt es übrigens noch mehr zu tun: mit rund 2MB und 53 Requests ist die - dafür dass kein wirklicher Inhalt da ist - viel zu groß.

    ich habe für eine Modelagentur eine Page erstellt, wo 200-300 Modelfotos in einer Flexbox Darstellung vertikal in 6 Spalten angezeigt werden.

    Du denkst viel zu sehr in Spalten und Zeilen was sich auch in deinem Quelltext widerspiegelt. Alle span- und div-Elemente die du hast sind überflüssig (bzw. falsch, span darf kein div enthalten). Entferne sie ersatzlos und verwende dann ein grid-Layout indem du definierst wie groß jedes Bild mindestens sein soll - den Rest (das Verteilen der Bilder in die Zeilen bzw. die Entscheidung wieviele Bilder in eine Zeile passen) überlässt du einfach dem Browser.

    Habe jetzt auch die Menüs und eine Handyversion gemacht :-) :

    Herzlichen Glückwunsch, damit hast du den letzten Punkt behoben, die restlichen Problem bestehen (bei teilweise leicht verändertem Verhalten) weiterhin.

    Wie ich in #6 schon schrieb: als erstes muss das HTML in Ordnung gebracht werden: div#wrapper ist überflüssig, ein Element in dem alles steht gibt es bereits: body; die div#text* gehören in *ein* p damit der Text frei fließen kann, die beiden Absätze darüber ebenfalls je in ein p. Wenn das dann in Ordnung gebracht ist, kann man anfangen das vernünftig zu machen - aber mit den shape-Eigenschaften, nicht mit scale()! Wobei ich nur für große Displays mit shape arbeiten würde, kleine Displays sind zu klein als das das gut aussieht.


    PS: Pixel ist als Einheit für die Schriftgröße (und sonst auch fast immer) immer noch falsch.

    Ich habe meinen Vorschlag mal umgesetzt. Da verschiebt sich nichts. Getestet in Opera, FF, Chrome und Edge. Auf Safari habe ich leider keinen Zugriff.

    Ein gutes Beispiel wie man es nicht machen soll, die "Lösung" hat einige Probleme/Nachteile:

    1. Wenn ich in Vivaldi (Blink-Engine) eine Mindestschriftgröße setzte, zerreißt es das Layout (Firefox ignoriert eine Mindestschriftgröße was auch nicht für die Seite spricht)
    2. In Firefox zerreißt es aufgrund der verwendeten Schriftart das Layout da die eingerückten Zeilen nicht mehr in ihre Zeilen passen und jeweils die letzten Worte in eine neue Zeile rutschen:
      pasted-from-clipboard.png
      selbst wenn man eine Schriftgröße vorgibt kann man sich nicht sicher sein dass die auch überall verwendet wird: nicht jedes Gerät hat jede Schriftgröße
    3. das Skalieren der Seite funktioniert weder in Vivaldi noch in Firefox - ein No-Go
    4. Screenreader (zumindest Orca, bei anderen wird das wohl genauso sein) machen nach jeder der eingerückten Zeilen eine Pause als wäre da ein Satz zu Ende
    5. Die Abstände zwischen Tänzerin und Text sind in Vivaldi und Firefox unterschiedlich und (durch den falsch umbrochenen Text in Firefox) in beiden nicht ideal
    6. Ohne Javascript wandert der Text nach rechts aus dem sichtbaren Bereich raus - ohne dass man scrollen kann
    7. (die Schriftgröße hängt von der Breite des Fensters ab und wird bei schmalen Fenstern sehr klein. Dass aber für sehr kleine Fenster eine andere Lösung erforderlich ist, schriebst du ja oben schon - das wird ohnehin immer so sein, das Layout lässt sich auf kleinen Displays einfach nicht vernünftig umsetzen)

    Lange Rede, kurzer Sinn: Michael, verwende das nicht: die Variante ist eine nette Spielerei, taugt für die Praxis aber nichts und sollte gleich wieder fachgerecht entsorgt werden.

    ich erstelle gerade eine Website für meine Ballettschule. Im CSS habe ich alle Angaben in Prozent gemacht (selbst die Schriftgröße ist in "vh").

    Das mit der Schriftgröße ist falsch. Die Schriftgröße darf nicht von der Höhe des Viewports abhängen: bei niedriger Höhe ist sie zu groß, bei kleiner Höhe zu klein - zumindest clamp() müsstest du da verwende, wirklich sinnvoll ist das aber auch nicht, verwende (r)em.

    Zitat

    Das oberte div-Element bekommt die Breite in Abhängigkeit von der Höhe des Bildschirms (var width = screen.height * 1.413;), weil ich halt wollte, dass die Seite schön in der Mitte des Bildschirms liegt und die Seite ausfüllt und nicht so langweilig oben links beginnt oder zu klein oder zu groß ist und man dann scrollen muss (siehe Foto).

    Wie du gemerkt hast, funktioniert das so nicht. Vor allem solltest du das Javascript ersatzlos löschen: das was du da zu berechnen versuchst kann CSS auch direkt.

    Zitat

    Kann man das irgendwie noch hinkriegen?

    Möglicherweise. Allerdings erstmal: du verwechselst Webdesign mit Printdesign. Bei letzterem kann man pixelgenau sagen wo was stehen soll, bei ersterem geht das nicht, dafür sind die Endgeräte auf denen Seiten betrachtet werden können einfach zu unterschiedlich. Deswegen sollten Inhalte Grundsätzlich erstmal in die Elemente gepackt werden die semantisch passend sind - was bei dir überhaupt nicht der Fall ist: du verwendest immer nur <div> statt <header>, <main>, <footer>, <nav> mit <ul>/<li> drin usw.. Auch <label> ist hier falsch sowie sämtliches inline-CSS (das Javascript erwähnte ich ja schon).


    Dein Problem ist erstmal dass deine Konstruktion einfach nicht auf kleine Displays passt (wenn der Text noch lesbar sein soll), du wirst also nicht drumrum kommen verschiedene Layouts je nach vorhandenem Platz zu erstellen, media Querys helfen dir dabei. Wichtig: der Inhalt der Seite muss erst in vernünftiges HTML gepackt werden, erst dann kann es an die Formatierung gehen - und die Breakpoints der media Querys in em, nicht in Pixeln!

    Um den Text dann um das Bild fließen zu lassen brauchst du wirklichen Fließtext, also ohne <br> darin. Ich habe noch nie damit gearbeitet, aber dir sollten die shape-Eigenschaften helfen, damit lassen sich Formen definieren die von Text umflossen werden. Aber wie gesagt: verabschiede dich von der Vorstellung dass es überall exakt so aussieht wie bei dir!

    Ich habe mir das jetzt mal angesehen und schlage folgendes Vorgehen vor: Entwerfe zunächst ein Layout auf eine Weise, wie man es i. allg. (und zu Recht) nicht macht: Einen Container außen herum mit genau den Pixelabmessungen des Hintergrundbildes, damit das zunächst mal nicht skaliert wird. Und darin dann das Layout mit der Schrift, so dass es genau hinein passt.

    Vergiss es. Du kannst im Webbereich keine Texte so formatieren dass sie immer exakt gleich aussehen - da brauch nur jemand mit einer anderen Schriftart kommen, dann sieht es schon wieder (minimal) anders aus. Es hat schon seinen Grund warum Layouts nicht mehr festzementiert werden - das funktioniert einfach nicht mehr seit das Internet auch auf mobilen Geräten verfügbar ist (und auch vorher hat es schon nicht wirklich funktioniert).