Nein, was mich betrifft, so verstehe ich nicht, was Du mit schwarz transparent meinst. Schwarzer Hintergrund der Container, wo das Hintergrundbild der ganzen Seite durchscheint?
Beiträge von Sempervivum
-
-
Zitat
Nun will ich 3 Elemente die Transparent sind auf die Seite setzen. Dabei soll das mittige Element breiter als rechts und links sein.
Verstehe ich das richtig: Du möchtest, dass das Hintergrundbild die ganze Seite ausfüllt und darüber möchtest Du die drei Container legen, die Text etc. enthalten? Dazu ist zunächst zu sagen, dass ein Container ohnehin zunächst transparent ist, wenn Du nichts anderes mit background-color oder background-image vorgibst. Und für die Anordnung nebeneinander und die Steuerung der Größe informierst Du dich am besten über Flexlayout, z. B. gleich hier:
-
Die Bilder sind viel zu klein, da kann man nichts erkennen. Und eines scheint Code zu enthalten, diesen postest Du besser nicht als Bild sondern als Text in Code-Tags: Oben der dritte Button von rechts </>.
-
Am besten kann man es wahrscheinlich an einem Beispiel erklären:
Angenommen, das Bild ist 400px breit und das div drumherum 800px. Wenn Du jetzt für das Bild max-width:80%; setzt, bezieht sich das auf die 800px des div, d. h. max-width wird auf 80% von den 800px des div gesetzt, was 640px ergibt. Da das immer noch viel größer ist als das Bild selbst, hat es keine Auswirkung. Setzt Du jedoch max-width:10%; so ergibt das 10%, wieder von den 800px des div, also 80px und das Bild wird verkleinert. Diese 80px sind jedoch nicht 10% sondern 20% von dem Bild selbst.
-
Zitat
Und zwar gebe ich max-width von einem bild ein. Zb 80% er nimmt aber nicht die 80% von dem Bild, sondern bleibt ständig bei 100% aber wenn ich 10% eingebe macht er es.
Da hast Du etwas falsch verstanden: Bei Prozentangaben ist die Bezugsgröße nicht das Bild selbst sondern der umgebende Container, in deinem Fall das div.bild
-
Dazu ist folgendes zu sagen:
Dies verursacht einen Syntaxfehler:
Codedocument.write('Hallo Welt.\n\ Welcome to this site');Es ist in der Tat möglich, einen String über Zeilenumbrüche hinweg zu definieren, wenn man Backslash verwendet, insofern bist Du schon auf dem richtigen Weg. Allerdings zählt die Leerzeile mit und müsste ebenfalls mit Backslash abgeschlossen sein. D. h. dies wäre richtig:
Codedocument.write('Hallo Welt.\n\ \ Welcome to this site');oder dies ohne Leerzeile:
Codedocument.write('Hallo Welt.\n\ Welcome to this site');Weiter sind hier:
Codestr.replace(/\n|\r/g, "<br>"); htmlstring = stringContainingNewLines.replace(/(\r\n|\n|\r)/gm, "<br>");die Variablen str und stringContainingNewLines undefiniert, wenn ich das richtig überblicke.
Dann ist die Funktion nl2br zwei Mal definiert. Stackoverflow ist zuverlässig und diese Funktion wird funktionieren, wenn Du sie richtig anwendest.
Außerdem hat man dir wahrscheinlich schon empfohlen, auf document.write() zu verzichten und ich möchte mich dem anschließen.
Weiter verstehe ich dein Vorhaben nicht: Das Newline in <br> umzuwandeln macht nur Sinn, wenn Du einen längeren Text hättest mit zahlreichen Newlines drin. Und so etwas kann ich in dem Code in deinem letzten Posting nicht finden.
-
Kleine Spielerei mit CSS-3D-Animation und der Webanimation-API:
http://webentwicklung.ulrichbangert.de/happy-new-year-la-ola.htmlIch wünsche allen Forenmitgliedern ein frohes neues Jahr!
-
Zitat
Wie programmiert man Gravitation.
Ich habe es mir noch nicht herunter geladen, aber vielleicht hilft dir diese Demo:
-
Zitat
Ah, vielen Dank. Ich habs ausprobiert, es geht momentan nicht.
Dann poste doch mal den Code deines letzten Versuches.
-
Ja, ich habe in diesem Thread auch einiges über 3D-Transormationen gelernt. Interessantes Thema.
-
-
PS: Wie ich sehe, braucht man gar nicht so schweres Geschütz wie three.js aufzufahren, sondern es geht auch mit CSS:
-
Zitat
Kann man beim svg die Einheit ändern ,so das es auf den rest passen würde ?
Das ist gar nicht nötig, da man das fertige SVG im Ganzen verlustfrei skalieren kann. Also einfach eine beliebige Größe zeichnen und dann das ganze SVG mit CSS skalieren:
https://jsfiddle.net/Sempervivum/ogzs91uv/40/
Inzwischen ist mir noch eine elegantere Lösung eingefallen, nämlich in die dritte Dimension gehen: Wenn man das mit realen Karten machen würde, wären sie ja in z-Richtung leicht gekippt. Das könnte man z. B. mit three.js nachbilden, einer Bibliothek, die 3D-Grafik unterstützt.
Dies scheint ein ganz gutes Tutorial zu sein:
-
So geht es mit svg.js und clipPath:
https://jsfiddle.net/Sempervivum/ogzs91uv/26/
Mit jCanvas wäre es noch einfacher, da das Masken unterstützt, aber das wäre dann leider nicht so schön skalierbar wie SVG.
-
Interessantes Problem. Die einzige Lösung, die mir einfällt, ist, die rote Karte in zwei Dreiecke diagonal aufzuteilen, dann kann man die Abdeckung getrennt steuern. Erzeugen der Dreiecke:
- Durch CSS und clip-path. Nachteil: Nicht unterstützt durch IE und Edge.
- Durch SVG und clipPath. Wird laut caniuse durch alle gängigen Browser unterstützt. Am besten mit einer Bibliothek wie svg.js, dann kann man die einzelnen Karten und Dreiecke einheitlich leicht in einer Schleife anlegen.
-
Ja, das geht, aber nur, wenn Du das Bild als Hintergrund anlegst:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-image
Es hat aber den Nachteil, dass sich der Container, in dem das Bild liegt, nicht an die Größe des Bildes anpasst. Nur umgekehrt kann man einstellen, dass sich die Größe des Bildes an den Container anpasst:
-
Poste doch mal das HTML des Bildes mit diesen Zusatzinformationen, dann kann man prüfen, ob es mit CSS geht oder ob man Javascript braucht.
-
Die Größe der Boxen kannst Du über flex-basis, flex-grow und flex-shrink bzw. die Kurzform flex steuern, auch so, dass sie unterschiedlich breit werden. Unter dem Link auf HTML-Seminar wird das erklärt.
Und sofern sich ein Text auf das Bild bezieht, eine Beschreibung o. ä. dazu ist, bietet sich die Verwendung des figure-Tags an:
https://wiki.selfhtml.org/wiki/HTML/Text…urierung/figure
Versuche am besten, einen Entwurf mit Flexlayout zu machen und wenn dann etwas nicht funktioniert wie gewünscht, poste den Code wieder, damit man es sich ansehen kann.
-
Zitat
Hab mein wissen aus youtube und google...
Da hast Du immer das Problem, dass leider sehr viele veraltete Anleitungen herum geistern, wo Du nicht gut beraten bist, dich danach zu richten.
ZitatVon flexbox hab ich noch nix gehört
Dann empfehle ich, dich damit vertraut zu machen, z. B. hier:
-
Zweigleisig würde ich nicht fahren, wahrscheinlich würde das mehr Probleme schaffen als das bisherige mit einer anderen Bibliothek neu zu machen.