Beiträge von tk1234

    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:
      html-seminar.de/woltlab/attachment/3093/
      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).

    Vorneweg: ja, ich weiß, das Problem ist "gelöst" (warum Anführungszeichen, siehe unten), aber trotzdem:

    Bitte was? Tut mir leid, ich bin totaler Anfänger und verwirrt und unter Zeitdruck.

    Das waren nur kurze Stichwörter für die weitere Recherche da ich dir nur vom Handy aus kurz einen Hinweis geben wollte in welcher Richtung du suchen sollst. Was mit float gemeint war sollte klar sein, du verwendest es ja. Wenn du nicht weißt was flex ist, ist das kein Problem, die allwissende Müllhalde (aka Google) kannst du aber selbst anwerfen, oder? Wenn du nach »flex css« stößt, bekommst du einige Seiten ausgespuckt die dir verraten um was es geht.

    Kannst du das genauer erklären?

    Was ist daran nicht zu verstehen? <li> und <a> waren falsch verschachtelt und invalides HTML war noch nie eine gute Voraussetzung sinnvoll CSS einsetzen zu können - und was invalide ist verrät dir der Validator, der gehört (neben dem Seiteninspektor (->F12)) zum Grundhandwerkszeug.


    Und nein, auch Zeitdruck ist kein Grund sich nicht mit den Grundlagen zu beschäftigen? Ich weiß jetzt nicht wo du die fertige Seite abgeben musst, aber das irgendwie auf die Schnelle hinzupfuschen kann nicht sinnvoll sein. Gelernt hast du aus diesem Thread auch garantiert nichts, da du wohl nur den Kot[sic!] aus #3 verwendet hast ohne ihn wirklich zu verstehen (Code wäre das nur wenn die richtigen Einheiten (keine Pixel!) verwendet worden wären). Gelöst ist dein Problem deswegen nicht wirklich: bei der nächsten ähnlichen Aufgabe wirst du wieder da stehen und nicht weiter kommen. Ich halte es deswegen auch für überhaupt nicht zielführend den Fragestellern fertige "Lösungen" vorzusetzen - und da einige User das ständig in quasi jedem Thread machen werde ich mich aus dem Forum zurückziehen.

    Um den Rahmen zu verhindern musst du in den style-Block folgende CSS-Anweisung hinzufügen:

    Wie oft muss ich mich eigentlich noch wiederholen? Der Rahmen darf nicht entfernt werden, die Seite wird dadurch unbedienbar!


    wo genau in Firefox debugger hätte ich diese Einstellung gesehen?

    Ich habe mal einen Screenshot gemacht (ich hoffe das klappt, hab hier bisher noch nie ein Bild eingebunden):

    html-seminar.de/woltlab/attachment/2895/

    Unten links ist das Element dessen Regeln unten rechts zu sehen sind blau hinterlegt (hier <label>). Rechts siehst du die Regeln dazu (und wo sie definiert werden), die oberste ist die mit der Tilde die für den blauen Rahmen zuständig ist: wie schon geschrieben Rahmen+Schatten. Damit diese Regel erscheint muss das input allerdings den Fokus haben: dazu musst du einen Rechtsklick auf das <input> im Baum unten links machen und "Pseudoklasse ändern" -> "focus" auswählen, dann erscheint der gelbe Punkt davor und dann geltenden Regeln werden angezeigt.

    In Blink-Browsern (Vivaldi, Chrome usw.) ist das übrigens ähnlich, nur der Menüpunkt um die Pseudoklasse zu setzen heißt etwas anders, das Prinzip bleibt aber gleich.

    kannst du mir noch verraten welche youtube Schulung mich ermächtigt zu verstehen wozu man einen Geschwister-Selektor braucht?

    Für Youtube konnte ich mich für solche Zwecke noch nie erwärmen, ich habe damals mit SELFHTML angefangen, das hat auch (zumindest heute, als ich angefangen habe, war das noch nicht so) den Vorteil dass du das meiste direkt selbst ausprobieren kannst.

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

    Doch. Mit dem Code aus #6 lässt sich das "Problem" problemlos nachvollziehen, sowohl mit Vivaldi (->Blink-Engine) als auch mit Firefox. Und ja, der Code ist nicht ganz koscher (<body> fehlt allerdings nicht, das ist optional) - ist aber aber nicht so wichtig, das Verhalten lässt sich ja nachvollziehen.


    Soweit ich deiner Grafik entnehmen kann ist nicht das Label-Element das Problem.

    Doch, frag deinen Browser.


    hat leider nicht funktioniert, zumal ich ja nur die Farbe ändern muss in grau.

    Der Code ist ja auch Unsinn und sollte als Giftmüll fachgerecht entsorgt werden. Wie der Code aussehen muss den du brauchst verrät dir - wie schon geschieben - der Seiteninspektor (->F12), auch die zu ändernden Eigenschaften habe ich bereits genannt (Rahmen und Schatten wobei von letzterem deutlich mehr zu sehen ist)

    der kann gerne da bleiben, ich wurde nur gerne die farbe ändern

    Dann mach das doch. Wie gesagt, der Rahmen/Schatten gehört zum label, die Farben kannst du überschreiben. Mehr verrät dir dein Browser wenn du den Seiteninspektor öffnest und das Element untersuchst (Rechtsklick->Untersuchen oder F12)

    Dieser blaue Rahmen zeigt an, dass das Element den Focus hat. Wie Du ihn unterdrücken kannst, kannst Du hier nachlesen:

    Das ist der Nachteil an SO: der größte Müll als Antwort ist und bleibt oben, die einzig sinnvolle Antwort steht weiter unten: https://stackoverflow.com/a/14091101 - der Rahmen darf nicht unterdrückt werden!

    weiss jemand wie ich hier den blauen Rand vom <div class="custom-file" > weg kriege. Ein blauer Rand erscheint wenn der Browse Button geklickt wird.

    Der Rand (bzw. eigentlich Rand+Schatten) gehört nicht zum div sondern zum label - und da sollte er auch unbedingt bleiben, sonst ist bei Tastaturbedienung nicht erkennbar dass das Element den Focus hat!

    Den Aria-Kram braucht kein Mensch (mehr). […]

    Was für ein Schwachsinn!

    Natürlich ist WAI-ARIA immer noch wichtig, die Zugänglichkeit von Seiten wird tendenziell sogar wichtiger als früher: früher[tm] wurde wenig Wert auf die Zugänglichkeit von Seiten gelegt (wohl auch mangels entsprechender Techniken), heute ist das anders. Klar, viel lässt sich erschlagen indem man die semantisch richtigen Elemente funktioniert, aber das geht eben längst nicht immer!

    Wenn du zb auf der Startseite bist gibst du dein <li> eine Klasse

    <li class="active_seite">

    Nein. Das richtige Attribut für den Fall ist aria-current="page" - so ist für jeden Client klar dass sich der Link auf die aktuelle Seite bezieht. Die Formatierung kann dann ja ebenfalls über CSS erfolgen, der Attributselektor existiert.

    Es gibt auch noch die möglichkeit mit :target

    … die aber hier nichts bringt.

    BTW: Für die Navigation kannst Du mit Vorteil auch das nav-Tag verwenden.

    s/kannst/musst (ja, ich weiß das ist Perl, kein PHP)

    woran liegt es wohl?

    Daran dass du nicht alle Dateien hochgeladen hast.


    Aber du kannst dir die Mühe des Hochladens ohnehin sparen: der Code der Seite taugt nichts und gehört fachgerecht entsorgt - die einzig sinnvolle Option ist es die Seite neu zu machen. Wie ich in #10 schon schrieb müssen Seiten auf allen Geräten funktionieren und deine passt sich eben Mobilgeräten nicht an (die machen inzwischen einen großen Anteil aus!) - von der Barrierefreiheit mal garnicht erst anzufangen.

    ja, aber wenn ich dich richtig verstehe, hätte ich die zeile doch in dem visual studio code und darin in der json die zeile löschen sollen,

    Nein, ich schrieb doch dass du die Zeile mit einem anderen Editor löschen sollst. Datei umbenennen, Zeile mit VS Code löschen und wieder zurück benenne wäre natürlich auch gegangen.

    warum hat es nach einer deinstallation und wieder installieren die einstellungen gehalten?

    Weil bei der Deinstallation die die Einstellungen wohl nicht gelöscht werden.

    Ich verstehe nicht genau, was Traffic ist. Ich dachte, dass wären einfach nur die Besucherzahlen. Hat man auf strato automatisch mehr Besucher als auf bplaced. Ich fände irgendwie schade, meine Homepage auf bplaced aufzugeben, nachdem ich mir so viel mühe gegeben habe, aber ich habe praktisch keine Besucher.

    Wie basti1012 schon schrieb ist der Traffic die Menge an Daten die dein Server verschickt (hängt aber idR nicht direkt mit der Größe der Dateien zusammen, wenn die komprimiert übertragen werden, werden weniger Daten übertragen als die Dateien groß sind - zumindest bei HTML/CSS/JS). Der Traffic ist aber idR so großzügig bemessen (oder unbeschränkt) dass du da an keine Grenzen stoßen wirst.

    Mit den Besucherzahlen hat der Traffic aber (erstmal) nichts zu tun zwar hast du bei großeren Besucherzahlen idR mehr Traffic aber die Besucherzahl ist den Anbietern von Webspace egal und deswegen auch bei den Eigenschaften nicht eingeschränkt. Die Anzahl der Besucher hat auch absolut nichts mit dem Hoster zu tun, ob die Seite bei Strato, bei bplaced oder sonst wo liegt ist völlig egal - die Besucherzahl hängt nicht davon ab.


    Ich glaube allerdings dass du dem Irrtum aufsitzt, dass man mal eben schnell eine Seite ins Internet stellen kann und diese dann sofort Massen von Besuchern hat und über Werbung Geld abwirft. Vergiss es.

    Ich weiß nicht welchen Inhalt deine Seite haben soll/hat, aber mal eben so eine Seite hinklatschen funktioniert nicht. Du musst die Seite pflegen und mit Inhalt füttern, mit etwas Glück wird sie dann gefunden, verlinkt und am besten auch regelmäßig wieder besucht. Achja, technisch sollte die Seite natürlich auch in Ordnung sein, also ordentliches HTML und das CSS so geschrieben dass sie sowohl auf Mobilgeräten als auch am Desktop gut aussieht und gut bedienbar ist (Zugänglichkeit für körperlich eingeschränkte Benutzer usw. nicht vergessen!).

    Verabschiede dich auch von dem Gedanken mit der Seite über Werbung Geld zu verdienen, da brauchst du schon richtig viele Besucher (auch solche die die Werbung nicht blockieren, je nach Zielgruppe kann der Anteil derer auch recht hoch sein), rechne erstmal nicht damit mehr als einstellige Cent-Beträge zu bekommen (wenn überhaupt).

    Du solltest Werbung machen und Googel beauftragen deine Page in regelmäßigen Abständen zu crawlen, damit du auch in der Suche gefunden wirst.

    Google findet die Seite schon von alleine, irgendwelche revisit-after-Meta-Tags bringen da exakt garnichts.

    ich habe nun etwas gefunden, man muss eine datei namens settings .json einfach löschen, danach ist das programm irgendwie wieder resetet.

    In der Datei stehen alle deine Einstellungen drin, wenn du die Datei löschst, sind die natürlich weg - deswegen schrieb ich ja dass du nur die Zeile mit »window.zoomLevel« löschen sollst …

    Welche Tastenkombination hast du verwendet? Dein Problem ist vmtl. nicht die Schriftgröße (die hat auf den Einstellungs-Dialog keinen Einfluss) sondern das zoomLevel und das lässt sich standardmäßig mit Strg+- verringern (vergrößern mit Strg+Shift+0). Aber lösch einfach mit einem anderen Editor die Zeile mit »window.zoomLevel« aus der settings.json (unter Linux in: ~/.conf/Code/User, sonst siehe Doku).

    Mal abgesehen davon dass die Meldung ohnehin Unsinn ist: warum verwendest du einen click-Handler wenn du eigentlich auf submit reagieren möchtest?


    Außerdem: dein HTML ist kaputt: es fehlt was, außerdem dürfen IDs nicht mehrfach verwendet werden und "rot" ist ein völlig falscher Name für eine ID (für eine Klasse auch) - IDs/Klassen sollten niemals nach dem Aussehen eines Elementes benannt werden.