Ich habe mir einfach mal eine leuchtende Hover-Mitgliedskarte erstellt. Sie ist einfach gestaltet, Schwerpunkt war ein rundes Bild einzufügen. Per HTML war es schwer, ging gar nicht, war nur rechteckig. Ich versuchte es dann per CSS und schwups ging es. Mit CSS kann man echt sehr viel machen, CSS ist eine sehr mächtige Stylesheet-Sprache. Mich nervt nur das ich es nicht richtig für das Xobor-Forum sauber hinbekomme. Wenn ich zum Testen die HTML-Codes im Layout Kopf- & Fußzeile in Kopfzeile einfüge, sieht es schonmal gut aus, nur der Rest ist zusammengezogen. Bilder werde ich noch unten einfügen. Wenn ich in der CSS "body" drin lasse, sieht es sehr schlimm aus. Ich habe "body" entfernt und schon sieht es sauberer aus, nur halt der Rest ist zusammengezogen. Ich werde da immer verrückt, weil nie etwas klappt hier mit Xobor-Forum. Bei mir auf dem Heim-Server füge ich den gesamten CSS-Code bei mir in styles im Stylesheet ein und bumms wird es sauber angezeigt, nur hier nicht. Bei mir auf PHP-Forum ist alles in PHP. Deswegen verstehe ich es nicht, dass bei mir alles geht und hier bei Xobor-Forum nicht.
Ich weis nur nicht wo ich hier für das Xobor-Forum in meine Codes die Fehler drin habe, das gibt mir zu denken, selber komme ich auch nicht drauf, wo der Fehler liegt.
In der CSS habe ich bei Zeile 1 den Text body vor der klammer entfernt.
Im HTML Code in Zeile 3 ist der Code für das runde Bild und in Zeile 4 der Code für das Bild. Und in CSS in Zeile 9 bis 13 wird der Code für das runde Bild eingefügt. Dieser Code macht das eckige Bild rund.
Hallo Wolfgang. Ich habe die Namen der CSS-TAG's verändert und der Fehler ist behoben, auch hier zeigt es im Xobor-Testforum sauber an. Bild füge ich unten mit ein und "body Code" habe ich aus der CSS komplett entfernt. Ich habe den Namen "main" der CSS-TAG's verändert. Den musste ich auch ändern. Danach ging der Fehler im Xobor-Forum weg.
Wolfgang, ich danke dir für diesen wunderbaren und tollen Rat. Ich werde es mir dick hinter die Ohren schreiben. Das nächste Project, hoffe ich, das ich dir weniger Arbeit mache. Ein Mords dickes Lob an dich und vielen lieben Dank für Rat und Tat und das Du mir so zur Seite stehst.
Bei den eigenen, neuen CSS TAG's muss man auch darauf achten, dass sie sich nicht beeinflussen! Hier funktioniert es oftmals im eigenen Forum aber nicht in fremden Foren! Besonders oft genutzte CSS-Tag's, wie "button", "h2" oder "card" müssen hier beachtet werden! Abhilfe schafft ein einleitender CSS-TAG vom äußersten Div-Container!
z.B.
.main2 .card2, .main2 button, .main2 h2
Mitgliedskarte beim "Mouseover"
Funktioniert in allen Templates & Mobil
Was habe ich geändert:
Habe überall ein einleitenden CSS-TAG vorgesetzt und CSS-Name nachgearbeitet, wegen der Beeinflussung mit anderen CSS-Einträgen!
Ein display:flex eingefügt (Zeile 15), weil der Form-Link sich nicht zentrieren ließ!
RGB-Farbe gegen HEX-Farbe ausgewechselt, wollten nicht im V6 funktionieren!
Einige Farben mit "!important" erweitert, weil sie z.B. im "Gaia" überschrieben wurden!
Schrift "roboto" ausgetauscht, ist eine Google-Import-Schrift. Hat auch nicht funktioniert, weil die Verlinkung gefehlt hat!
Abstand oben / unten eingefügt (Zeile 6) damit der Schatten-Effekt gut zu Geltung kommt!
Wolfgang, mal eine Frage... Wenn ich überall ein einleitenden CSS-TAG mit "Verpackung" also "wrapper3" davorsetze, dürfte ja eigentlich hier im Xobor-Forum sich nix verändern. Ich teste es gerade mit "Codepen", fange da mit der Profilkarte an. Bis jetzt klappt alles gut, zeigt auch schön den kleinen Teil an. Ist ja nur eine Frage, weil ich nix mit "Verpackung", mit "wrapper3" gefunden habe.
Also meine Idee habe ich soweit umgesetzt.
So sieht es recht gut aus und mit dem einleitenden CSS-TAG "wrapper3" funktioniert es soweit.
Ich brauche noch 1-2 Tage, dann bin ich fertig! Das wird schön, wie gesagt, die Symbole werden eine Herausforderung mit externen Link.
Hier mal ein kleiner Vorgeschmack, wie es aussieht. Ist noch nicht fertig, auf der rechten Seite werden Informationen und die Symbole dann sein.
Ich muss 2 verschiedene Codes für die Symbole verwenden.
1.) UC Hex.: Die numerische Unicode-Notation (Hexadezimal)
2.) Mit Font Awesome ist HTML Code "<i class="fab fa-facebook"></i>"
3.) Die Verlinkung neuer TAB z.B . Facebook Symbol "<li><a href="#"" target="_blank"><i class="fab fa-facebook"></i></a></li>"