An dieser Stelle kann es angebracht sein, zusätzlich zur Validierung durch PHP bereits clientseitig eine mit dem Pattern-Attribut durchzuführen:
Beiträge von Sempervivum
-
-
-
Beachte jedoch, dass diese Befehle zzt. weder von IE noch von Edge unterstützt werden:
-
Wenn man dieses CSS verwendet, füllt das Bild das Browserfenster aus. Ausnahme ist ein schmaler Rand darum herum, den man mit body {margin: 0;} weg bekommt. Dann wird das Bild ohne Scrollbalken angezeigt. Wenn Du nach rechts scrollen kannst, muss das an anderem Inhalt auf deiner Seite liegen.
Zitatwelches den unteren Teil des Bildes nicht zeigt
Das ist ein generelles Problem, wenn man ein Bild in einem vorgegebenen Rahmen anzeigt: Will man das Seitenverhältnis beibehalten, muss man in Kauf nehmen, dass oben oder seitlich abgeschnitten wird. Will man dagegen das Abschneiden verhindern, muss man in Kauf nehmen, dass sich das Seitenverhältnis ändert und das Bild verzerrt wird. Möchtest Du letzteres, musst Du background-size: 100% 100%; verwenden.
ZitatUnd wie wäre es wenn ich die Größe des Bildes prozentual verändern möchte. Sprich vom eigentlichen Bild zb 10% oder 110% usw?
Ich glaube, das hatten wir schon in einem anderen Thread. Wenn Du z. B. 10% vom Bild haben willst, musst Du transform: scale(0.1); verwenden.
-
Wie Du die divs anordnest kannst Du in dem Link in Posting #3 nachlesen. Gleich am Anfang wird es beschrieben.
-
Dann informiere dich über background-color mit rgba, damit kannst Du ein halb transparente Hintergrundfarbe einstellen:
https://wiki.selfhtml.org/wiki/CSS/Eigen…ackground-color -
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?
-
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.