Selfhtml ist immer eine gute Quelle. Hier ist es beschrieben:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Rahmen
Beiträge von Sempervivum
-
-
So ist es wesentlich besser!
Bei dem CSS fällt auf, dass die abschließenden Semikolons fehlen. In dem Screenshot in Posting #4 ist es richtig.
-
Das ist kein I sondern ein Schrägstrich in spitzen Klammern:
-
Zitat
Das ganze sieht bei mir dann so aus :
Da hast Du wohl vergessen, etwas einzufügen.
Und beachte bitte meinen Hinweis oben:
ZitatBTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.
So ist es auch viel einfacher und schneller als mit Screenshots.
-
PS: Und das <link ... im head-Bereich muss mit einer spitzen Klammer abgeschlossen werden.
-
Da sehe ich drei Fehler:
<html> lang="de">
muss so aussehen:
<html lang="de">
Und hier gehört das Gänsefüßchen nicht hin und die Überschrift h1 auch nicht:
"<title><h1>CSS zum TESTEN</h1></title>
Statt dessen gehört das h1 in den Body-Bereich, zwischen <body> und </body>.
BTW: Code besser als Text kopieren und einfügen mit Codetags, das </> in der Werkzeugleiste oben. Dann hat man es leichter, ebenfalls mit Copy&Paste zu arbeiten.
-
Das kannst Du relativ leicht erreichen, indem Du nach dem Erzeugen der neuen Bilderreihe einen Klick auf das erste Bild simulierst durch Aufruf der Funktion click():
Code
Alles anzeigenfunction createHeroes(heroes, heroeslist, name) { // Create, chain Img const htmlFragment = document.createDocumentFragment(); x = 0; y = 0; for (let i = 0; i < heroes; i++) { const image = document.createElement('section'); image.classList.add('hero_img', 'class_' + name); image.id = heroeslist[i]; htmlFragment.appendChild(image); image.style.backgroundPosition = x + '% ' + y + '%'; statusAvatar(image, x, y, name); console.log(image); moveAxis(x, y); } htmlFragment.querySelector('.hero_img').click(); bgHeroes.appendChild(htmlFragment); }BTW: Als ich den Code in meinen Editor übertragen habe, hat dieser beanstandet, dass am Ende des HTML zwei schließende </div> fehlen.
-
Vermutlich ist es einfacher, das Layout des Formulars von kontaktformular.com so zu gestalten wie das in deinem Eingangsposting als das PHP für letzteres neu einzurichten.
-
Mal sehen, ob ich das richtig verstehe: Drückt man oben einen kreisförmigen Kreis, wird ein Satz von Bildern in die Zeile in der Mitte geladen.
Im Moment erkennt man das nicht, weil bei allen Knöpfen die selben Bilder geladen werden. Dass sich etwas ändert, erkennt man aber daran, dass sich die Anzahl ändert.
Drückt man auf ein Bild in der mittleren Zeile, soll es in dem unteren Fenster mit der Beschreibung angezeigt werden.
Funktioniert soweit alles.
Das Problem ist jetzt: Du möchtest, dass jedes Mal, wenn man einen runden Knopf oben drückt, wieder das erste Bild in dem Fenster mit der Beschreibung angezeigt wird?
-
Am besten auch informieren, wie man Dateien in HTML referenziert:
-
Ja, bei mir sieht das auch so aus, die Rundung ist mehr elliptisch. Man kann sie rund bekommen mit clip-path:
clip-path: circle(200% at 50% -100%);
aber anscheinend ist die y-Position des Kreises der Prozentwert der Breite und nicht der Höhe, so dass man Probleme bekommt, das Ganze responsiv zu bekommen. Kein Problem ist es, wenn der Container entweder quadratisch ist oder eine feste Höhe hat.
-
Bei mir sind beide Seiten gleich, allerdings sieht die Rundung ganz anders aus als auf deinem Screenshot. Hast Du Scollbars? Wenn ja, ist das möglicher Weise eine Täuschung und kann behoben werden, indem Du body ein margin: 0; gibst.
-
Zitat
Anstelle von Fontawesome kann man auch ein eigenes png nehmen
Dann sind natürlich beide Möglichkeiten gangbar.
-
Da gibt es im wesentlichen zwei Möglichkeiten, die jeweils verschiedene Vor- und Nachteile haben. Hier eine Demo:
https://jsfiddle.net/Sempervivum/k84scz1a/24/
PS: Mir ist noch eingefallen: Fraglich, ob es möglich ist, ein Fontawesome-Icon als Hintergrundbild zu setzen?
-
Das ist dann leider nicht mehr so einfach. Ich habe da mal eine Lösung gebaut mit allen Bildern in einem Container. Die Umschaltung zwischen einer, zwei und drei Spalten geschieht dabei, indem man die Breite der Bilder setzt auf 100%, 50% und 33.33%. Großer Nachteil: Man muss die Höhe des Containers anpassen, damit die Bilder annähernd gleich auf die Spalten verteilt sind. Dadurch ist das Layout schwer zu erweitern und es wäre am besten, wenn man die optimale Höhe mit Javascript berechnen würde.
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Galerie mit drei Spalen</title> <style> .col { display: flex; flex-direction: column; } .col img { width: 100%; height: auto; } @media (min-width: 600px) { .col { flex-wrap: wrap; max-height: 1600px; } .col img { width: 50%; height: auto; } } @media (min-width: 800px) { .col { max-height: 800px; } .col img { width: 33.33%; } } </style> </head> <body> <div class="col"> <img src="images/dia0.jpg"> <img src="images/dia1.jpg"> <img src="images/dia2.jpg"> <img src="images/busleft.png"> <img src="images/dia3.jpg"> <img src="images/dia4.jpg"> <img src="images/01.png"> <img src="images/02.png"> <img src="images/03.png"> </div> </body> </html> -
Auch das ist einfach: Du kannst mit einer Mediaquery die Anordnung der Container auf "column" ändern:
Code@media (max-width: 600px) { body { flex-direction: column; } } -
Du kannst mit Flexlayout drei Spalten anlegen und die Bilder dort hinein tun:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Galerie mit drei Spalen</title> <style> body { display: flex; } .col { flex: 1; display: flex; flex-direction: column; } .col img { width: 100%; } </style> </head> <body> <div class="col"> <img src="images/dia0.jpg"> <img src="images/dia1.jpg"> <img src="images/dia2.jpg"> </div> <div class="col"> <img src="images/busleft.png"> <img src="images/dia3.jpg"> <img src="images/dia4.jpg"> </div> <div class="col"> <img src="images/01.png"> <img src="images/02.png"> <img src="images/03.png"> </div> </body> </html> -
Genau, Du musst nur die Tabelle anlegen, d. h. entweder mit deinem SQL:
CodeCREATE TEMPORARY TABLE fre2 like fre;oder ebenfalls mit phpmyadmin, dann die Daten einlesen und dann übertragen mit dem letzten Teil ab update.
-
Doch, das sind dann zwei Schritte:
Zunächst mit der Importfunktion die Daten in die temp. Tabelle laden.
Dann mit SQL die Daten in die Zieltabelle übertragen.
-
Dieses Problem würde sich nicht stellen, wenn Du die Importfunktion von phpmyadmin verwenden würdest, dann hast Du keine Probleme mit Rechten und Pfaden.