Einer div-Box, die absolut positioniert ist (das Framework berechnet das Layout server-seitig),
… und hat sich damit selbst disqualifiziert. Ein Layout kann nicht serverseitig berechnet werden und postion als Layoutmittel ist auch nur sehr mäßig sinnvoll - verwende grid bzw. flex und lass den Browser das Rechnen machen.
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.
Wegen dein :Focus funktioniert das auch nur beim a Element , falls ich mich jetzt nicht irre.
Du irrst dich, <button> kennt auch :focus.
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?
ZitatEs 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
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.
ZitatCodedocument.getElementById('weft_1_cell').bgColor = colorAPI['WeftList'][0]['ColorList'][0]['ColorItem']['Color']; 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.
Alles bündig, wie es gewünscht wird.
Nicht wirklich:
html-seminar.de/woltlab/attachment/3114/
und auch in der breiten Ansicht sind die vier Elemente nicht wirklich bündig - mit etwas Pixel-Schubbsen wird das aber auch nichts.
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ß.
am Mac mit firefox und safari geht es,
aber am iPhone weder im Safari, noch im firefox
Das scheint Absicht zu sein, einschlägige Suchmaschinen sollten noch mehr zu dem Thema ausspucken.
Was ich benötige ist, das man auf: <URL>#<Suchbegriff> rauskommt.
Was hast du vor? Dir ist klar dass in dem Fall der Suchbegriff nicht am Server ankommt?
Wie gehe ich dabei vor ?
Ein Blick ins Handbuch werfen: IndexStyleSheet sieht schonmal recht vielversprechend aus. Um das "Index Of" auszutauschen wirst du evtl. etwas Tricksen müssen, da muss du evtl. das <h1> ausblenden und per HeaderName die gewünschte Überschrift setzen.
Also bei mir klappt das Menü nicht auf beim reload....
Es bleibt nicht offen, die Untermenüs sind nur kurz zu sehen und werden dann ausgeblendet. Aber das Menü taugt ohnehin nichts da nicht barrierefrei, da muss der Hersteller nochmal ran.
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.
Du solltest bgcolor und strong nicht mehr verwenden, sondern soetwas mit CSS steuern.
Wenns nur das wäre … der Validator haut einem 16 Fehler/Warnungen um die Ohren bevor er aufgibt - und da sind dann die Fehler im body-Teil noch garnicht mit drin.
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:
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.
ZitatDas 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.
ZitatKann 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).
