Mitgliedskarte

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Mitgliedskarte

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Mitgliedskarte datum

10.06.2022 13:15 (zuletzt bearbeitet: 01.02.2023 20:14)

Daishi

Informationen anzeigen

Beitr�ge:	451
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	439

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.

Hier der HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="main">
		<div class="card">
<div class="bild-rund">
<img class="rund" src="https://bilderupload.org/image/7f1155486-daishi.png">
		 <div class="text1">Daishi</div>
      <div class="hover">
       <h2>Mitglied </h2>
      <div class="text2">im Forum Treffpunkt für Hilfe,Tricks & Tipps!</div>
        <button><a href="https://www.hilfe-tricks-tipps.de"" target="_blank">Forum</a></button>
      </div>
     </div>
	</div>
 

Schließen

Hier der CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
body{
  		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
  min-height:100vh;
  background: #212534
}
.rund {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
 
.main{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
	
		}
		.card{
			position: relative;
      display:flex;
			height:330px;
			width: 220px;
			background-color:  #191c29;
			border-radius: 15px;
      justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
      flex-direction:column;
      text-align:center;
      border:2px solid  rgb(88 199 250);
      overflow:hidden;
      transition:.6s;
        box-shadow:0px 0px  100px rgba(88,199,250,.15);
      
 
     }
.text1{
  position:relative;
  font-size:33px;
  font-family:roboto;
  color: rgb(88 199 250);
  font-weight:100;
  letter-spacing:1px;
  transition:.7s;
  transform:translateY(110px);
  
  
    
  
}
.card:hover .text1{transform:translateY(-150px);opacity:0}
.text2{color:#dbf9ff;
  font-family:roboto;
  font-weight:100;
  font-size:14px;
  width:170px;
  line-height:25px;
transform:translateY(200px);
  transition:.7s;
  opacity:0
  
}
.hover{}
h2{
  font-size:38px;
    font-family:roboto;
  color:rgb(88 199 250);
  font-weight:400;
  margin:0;
  padding:0;
  transform:translateY(200px);
    opacity:1;
  transition:.6s;
  opacity:0
  
}
button{
  transform:translatey(200px);
  transition:.88s;
  opacity:0;
  width:110px;
    height:38px;
  border-radius:40px;
  font-size:12px;
  font-family:roboto;
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:1px;
  color:white;
  background-color: #0beef9;
background-image: linear-gradient(315deg, #0beef9 0%, #48a9fe 74%);
  border:none;
  cursor:pointer
}
.card:hover .hover{display:block}
.card:hover h2{transform:translatey(-38px);opacity:1}
.card:hover .text2{transform:translatey(-20px);
opacity:1}
.card:hover button{transform:translatey(5px);opacity:1}
.card:hover{
  transform:scale(110%);
  box-shadow:0px 0px  100px  rgb(88 199 250);
}
 
button:active{
  color:#0beef9
}
/*@keyframes scale
{
  0%{transform:scale(100%) translateY(100px)}
   50%{transform:scale(103%) translateY(100px)}
   100%{transform:scale(100%) translateY(100px)}
}
*/
 
 

Schließen

Mit freundlichen Grüßen Daishi

Daishi

Wolfgang und Mato finden das Top!

Antworten

#2 | RE: Mitgliedskarte datum

11.06.2022 23:59 (zuletzt bearbeitet: 01.02.2023 20:15)

Daishi

Informationen anzeigen

Beitr�ge:	451
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	439

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.

Hier nochmal die Codes, die ich geändert habe

Der Geänderte HTML Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="main1">
		<div class="card1">
<img class="rund" src="https://bilderupload.org/image/7f1155486-daishi.png" width="[200;]" alt="[Alternativtext]">
		 <div class="text1">Daishi</div>
      <div class="hover">
       <h2>Mitglied </h2>
      <div class="text2">im Forum Treffpunkt für Hilfe,Tricks & Tipps!</div>
        <button><a href="https://www.hilfe-tricks-tipps.de"" target="_blank">Forum</a></button>
      </div>
     </div>
	</div>
 

 
 

Schließen

Der geänderte CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
.rund {
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
}
.main1{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		
	
		}
		.card1{
			position: relative;
      
			height:330px;
			width: 220px;
			background-color:  #191c29;
			border-radius: 15px;
      justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
      flex-direction:column;
      text-align:center;
      border:2px solid  rgb(88 199 250);
      overflow:hidden;
      transition:.6s;
        box-shadow:0px 0px  100px rgba(88,199,250,.15);
      
 
     }
.text1{
  position:relative;
  font-size:33px;
  font-family:roboto;
  color: rgb(88 199 250);
  font-weight:100;
  letter-spacing:1px;
  transition:.7s;
  transform:translateY(110px);
  
  
    
  
}
.card1:hover .text1{transform:translateY(-150px);opacity:0}
.text2{color:#dbf9ff;
  font-family:roboto;
  font-weight:100;
  font-size:14px;
  width:170px;
  line-height:25px;
transform:translateY(200px);
  transition:.7s;
  opacity:0
  
}
.hover{}
h2{
  font-size:38px;
    font-family:roboto;
  color:rgb(88 199 250);
  font-weight:400;
  margin:0;
  padding:0;
  transform:translateY(200px);
    opacity:1;
  transition:.6s;
  opacity:0
  
}
button{
  transform:translatey(200px);
  transition:.88s;
  opacity:0;
  width:110px;
    height:38px;
  border-radius:40px;
  font-size:12px;
  font-family:roboto;
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:1px;
  color:white;
  background-color: #0beef9;
background-image: linear-gradient(315deg, #0beef9 0%, #48a9fe 74%);
  border:none;
  cursor:pointer
}
.card1:hover .hover{display:block}
.card1:hover h2{transform:translatey(-38px);opacity:1}
.card1:hover .text2{transform:translatey(-20px);
opacity:1}
.card1:hover button{transform:translatey(5px);opacity:1}
.card1:hover{
  transform:scale(110%);
  box-shadow:0px 0px  100px  rgb(88 199 250);
}
 
button:active{
  color:#0beef9
}
/*@keyframes scale
{
  0%{transform:scale(100%) translateY(100px)}
   50%{transform:scale(103%) translateY(100px)}
   100%{transform:scale(100%) translateY(100px)}
}
*/
 

 

 

 

Schließen

Mit freundlichen Grüßen Daishi

Daishi

Wolfgang und Mato finden das Top!

Antworten

#3 | RE: Mitgliedskarte datum

12.06.2022 14:06

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3954
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1807

Mitgliedskarte

Hallo Daishi,
mal wieder besten Dank für Dein interessantes Skript - Funktioniert!

Meine Bitte!

Setzt Dich nicht so unter Druck!
Ich freue mich über Deine super Arbeit, Deine Ideen und feile gerne an Deinen Vorschlägen!

@Daishi

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!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
.main2 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 5px;
}
.main2 .rund2 {
  margin-top:30px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
}
.main2 .card2 {
  display:flex;
  position: relative;
  height:350px;
  width: 220px;
  background-color:  #191c29;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction:column;
  text-align:center;
  border:2px solid #58c7fa;
  overflow:hidden;
  transition:.6s;
  box-shadow:0px 0px 100px #595959;
}
.main2 .text2 {
  position:relative;
  font-size:33px !important;
  font-family: 'lucida handwriting';
  color: #58c7fa;
  font-weight:bold;
  letter-spacing:1px;
  transition:.7s;
  transform:translateY(110px);
}
.main2 .card2:hover .text2 {
  transform:translateY(-150px);
  opacity:0;
}
.main2 .text_link2 {
  color:#dbf9ff;
  font-family: 'arial';
  font-size:14px !important;
  font-weight:100;
  width:170px;
  line-height:25px;
  transform:translateY(200px);
  transition:.7s;
  opacity:0;
}
.main2 h2 {
  font-family: 'arial';
  font-size:30px !important;
  color: #58c7fa !important;
  font-weight:400;
  margin:0;
  padding:0;
  transform:translateY(200px);
  transition:.6s;
  opacity:0;
}
.main2 button {
  transform:translatey(200px);
  transition:.88s;
  opacity:0;
  width:110px;
  height:38px;
  border-radius:40px;
  font-size:12px;
  font-family:roboto;
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:1px;
  background-color: #0beef9;
  background-image: linear-gradient(315deg, #0beef9 0%, #48a9fe 74%);
  border:none;
  cursor:pointer;
  margin-bottom:30px;
}
.main2 button a {
  color: #000000;
  font-weight:bold;
}
.main2 .card2:hover .hover2 {
  display:block;
}
.main2 .card2:hover h2 {
  transform:translatey(-38px);opacity:1;
}
.main2 .card2:hover .text_link2{
  transform:translatey(-20px);
  opacity:1;
}
.main2 .card2:hover button {
  transform:translatey(5px);
  opacity:1;
}
.main2 .card2:hover {
  transform:scale(110%);
  box-shadow:0px 0px 100px #58c7fa !important;
}
.main2 button:active {
  color:#0beef9;
}
 
/*@keyframes scale {
  0%{transform:scale(100%) translateY(100px)}
  50%{transform:scale(103%) translateY(100px)}
  100%{transform:scale(100%) translateY(100px)}
}*/
 

Schlie�en

Was habe ich geändert:

Bildbreite auf 140px fest eingestellt (Zeile 3), damit andere Avatare ohne Probleme passen!
Class für Forum-Text geändert (.text_link2)!
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!

1
2
3
4
5
6
7
8
9
10
11
 
<div class="main2">
  <div class="card2">
     <img class="rund2" src="//files.homepagemodules.de/b104774/a_442_0281fbd2.png" width="140px">
     <div class="text2">Daishi</div>
       <div class="hover2">
         <h2>Mitglied </h2>
         <div class="text_link2">Im Forum Treffpunkt für Hilfe, Tricks & Tipps!</div>
         <button><a href="https://www.hilfe-tricks-tipps.de" target="_blank">Forum</a></button>
       </div>
  </div>
</div>
 

Schlie�en

Spoiler mit einem Klick öffnen und schließen!

Bis dann und auch hier, besten Dank an Daishi für sein unermüdliches Tun!
Wolfgang

Daishi und Mato finden das Top!

Antworten

#4 | RE: Mitgliedskarte datum

12.06.2022 16:20 (zuletzt bearbeitet: 01.02.2023 20:16)

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>"

Gruß Daishi

Daishi

Wolfgang, Mato und Nara finden das Top!

Antworten

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3! � � Geburtstagskarte

Forum �bersicht → XOBOR-Foren und Homepages →

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! → Mitgliedskarte

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

37%

⚡Stress‑Test

�

🔥 Konsole �ffnen

Um die Browser-Konsole zu �ffnen, dr�cke:

F12 oder Ctrl + Shift + I

W�hle danach den Reiter Console.

Dort kannst du:
� Test-Anfragen sehen
� Fehler erkennen
� Netzwerk-Infos pr�fen