habe bei meinem Kollegen im Forum etwas gesehen, was ich saustark finde, nämlich die Infobox. Das möchte ich jetzt bei mir im Schloss machen, damit ich das Kalenderblatt des WDS Verlages (Du weißt schon) so in den Header bringen könnte und auch noch einige andere Dinge. Einfach so ein paar Boxen nebeneinander. Damit die sich öffnen, wenn man mit der Maus draufgeht. Weißt Du wie man sowas macht? Gruss
Infobox oder Spoiler mit CSS realisieren? Aktualisiert 12.05.17
Hallo Gabriela, bei diesen Infoboxen ist daran zu denken, dass sie einen festen Abstand zum Bildrand haben. Die Platzierung der Toolboxen muss einsprechend angepasst werden und wird jeweils über die Werte von "left:..px" und "top:..px" eingestellt. Das kommt zum Tragen, wenn sie in die Webseite eingebaut werden oder die Fenstergrößen verändert wird. Diese Infoboxen können sich über Schriften oder Bilder legen. Hier muss im Einzelfall darauf geachtet werden, wo sie platziert werden. Entsprechend kann es notwendig werden, dass andere Elemente versetzt werden müssen! Werden die Infoboxen im unteren Teil der Webseite eingebaut, muss genug Platz für das Aufklappen geschaffen werden! Mit dieser Version können mehrere Toolboxen zu Einsatz kommen.
Diese Infoboxen ähneln den Tooltipps, die dynamisch dem Mauszeiger folgen können.
• Will man nur eine Infobox haben, entfallen die Einträge für "box2". • Die Farb- und Pixelwerte können gegebenfalls angepasst werden.
#box a, #box2 a{ display:block; text-decoration:none; color:#FFFFFF; /* Schriftfarbe */ background:#0000AA; /* Hintergrundfarbe der Schrift */ font:bold 16px Comic Sans MS; /* Schrift - Dicke Größe Art */ border:1px solid #000000; /* Schriftrahmen - Dicke, Form, Farbe */ padding:5px; /* Abstand der Schrift zum Rahmen */ padding-left:10px; padding-right:10px; padding-bottom:5px; width: auto; }
#box a:hover, #box2 a:hover { /* Sollen sich die Farben der Infobox beim Mouseover nicht ändern, entfallen die folgenden 3 Positionen */ color:#FFFFFF; /* Änderung der Schriftfarbe beim Mouseover */ background:#5555DD; /* Änderung der Hintergrundfarbe beim Mouseover */ width:400px; /* Breite der Infobox */ }
#box a span, #box2 a span{ display:none; }
#box a:hover span, #box2 a:hover span { display:block; color:black; background:#FFFFFF; /* Hintergrundfarbe der Info-Box */ font:normal 16px Arial; /*Schrift der Infobox - dicke, Größe, Art */ border:1px solid #000000; /*Rahmen der Infobox - Dicke, Form, Farbe */ padding:5px; /* Schriftabstand zum Rahmen der Infobox*/ padding-left:2px; padding-right:2px; padding-bottom:2px; cursor: pointer; /* Mauszeiger */ text-align:center; } </style>
<span id="box"><a href="#">INFOBOX 1<span>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span></a></span>
<span id="box2"><a href="#">INFOBOX 2<span>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span></a></span>
Einbau mehrerer Links in die statische Infobox! Aktualisiert 23.06.19
Hat man sich für die statische Infobox entschieden und will mehrere Links einbauen, funktioniert das gut über den Befehl "onclick" in Verbindung mit "<span>". Notwendig wird auch ein zusätzlicher Eintrag für den Mauszeiger, um eine Mausänderung beim Überfahren der Links zu bewirken. Die Verwendung von Tooltipps sind ebenfalls möglich.
• Einbau mehrerer Links sind möglich! • Einbau von Laufschriften (z.B. marquee) möglich! • Abstand der der Bilder über <br> einstellbar! • Einbau von Tooltipps! • Der Mauszeiger kann jetzt sein Aussehen in den Boxen verändern! • Neu! Läuft jetzt auch in "Opera" und "Google Chrome"!
Die Box mit einem Bild als Auslösung:
1 2 3 4 5 6 7
<span id="box"><a title="Hier geht es zur Bildergalerie" href="https://www.hilfe-tricks-tipps.de/gallery.php">Bildergalerie<span style="cursor: default;">
#box a, #box2 a, #box3 a{ display:block; text-decoration:none; color:#FFFFFF; /* Schriftfarbe */ background-color:#0000AA; /* Hintergrundfarbe der Schrift */ font:bold 18px Comic Sans MS; /* Schrift - Dicke Größe Art */ padding-top:5px; /* Abstand der Schrift zum Rahmen */ padding-left:10px; padding-right:10px; padding-bottom:5px; border:1px solid #000000; /* Schriftrahmen - Dicke, Form, Farbe */ width: auto; }
#box a:hover, #box2 a:hover, #box3 a:hover { display:block; /* Sollen sich die Farben der Infobox beim Mouseover nicht ändern, entfallen die folgenden 3 Positionen */ color:#FFFFFF; /* Änderung der Schriftfarbe beim Mouseover */ background-color:#5555DD; /* Änderung der Hintergrundfarbe beim Mouseover */ width:500px; /* Breite der Infobox */ }
#box a span, #box2 a span, #box3 a span{ display:none; }
#box a:hover span, #box2 a:hover span, #box3 a:hover span { display:block; color:black; background-color:#FFFFFF; /* Hintergrundfarbe der Info-Box */ font:normal 16px Arial; /*Schrift der Infobox - dicke, Größe, Art */ border:1px solid #000000; /*Rahmen der Infobox - Dicke, Form, Farbe */ padding-top:5px; /* Schriftabstand zum Rahmen der Infobox */ padding-left:2px; padding-right:2px; padding-bottom:2px; cursor: pointer; /* Mauszeiger */ text-align:center; }
<div style="color:#FFFF00;"> <br><br> <b>Zurück zum Forum:</b> <a href="https://www.hilfe-tricks-tipps.de/">https://www.hilfe-tricks-tipps.de</a><br><br><br> <b>Zurück zum Beitrag:</b> <a href="https://www.hilfe-tricks-tipps.de/t173f30-Statische-Infobox-mit-CSS-Wie-kann-ich-das-realisieren.html#msg1095">Einbau mehrerer Links in die statische Infobox!</a></div>
<span id="box"><a title="Hier geht es zur Bildergalerie" href="https://www.hilfe-tricks-tipps.de/gallery.php">Bildergalerie<span style="cursor: default;"> <b><u><font face="Comic Sans MS" color="#000080" size="4">Herzlich Willkommen in der Bildergallerie!</font></u></b>
<br><br>
<span title="Eine Mail an Wolfgang Andres schreiben" onClick="parent.location='https://www.hilfe-tricks-tipps.de/private_new.php?option=write&to_user=Wolfgang';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Ideen und Feedback bitte per PM an Wolfgang</u></b></font></span><br><br>
<span title="Hier geht es zur Forumübersicht" onClick="parent.location='https://www.hilfe-tricks-tipps.de';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Hier geht es zur Forumübersicht für Hilfe, Tricks & Tipps</u></b></font></span><br><br>
<span style="padding:10px;" title="Hintergrundbilder - Windows 7" onClick="parent.location='https://www.hilfe-tricks-tipps.de/g21p92-Windows.html';"><font face="Comic Sans MS" color="#000080" size="3"><b><u>Hintergrundbilder - Windows 7</u></b></font></span>
XXL: Animierte Mouseover-Boxen ohne JavaScript - Teil 1
Was können die Mouseover-Boxen:
Das folgende Skript kommt ohne JavaScript aus. Es ist eine reine CSS-Lösung.
Die Boxen haben ein Hintergrundbild, das beim Mouseover mit einem Informationstext überdeckt wird! Die Informationstexte laufen von unten nach oben animiert ein!
Im Beispiel sind 3 Boxen nebeneinander aufgebaut. Wird der Platz zu eng, werden sie untereinander dargestellt!
Informationen und Anzahl der Boxen können beliebig gekürzt oder erweitert werden!
Die Boxe können mit "YouTube-Videos" oder Bildern gefüllt werden.
Die Infos sind als Aufzählung angeordnet!
Für lange Informationstexte, ist ein Scrollbalken eingebaut!
Am Schluss jeder Box steht noch eine Verlinkung zu den PN's.
Auf mobilen Endgeräten, braucht die Infobox zum öffnen nur angetippt zu werden! Ein Antippen auf eine Leere Fläche, schließt die Box!
×
Mouseover-Box beim Einlauf
Mouseover-Box beim Einlauf
Installation
×
Mouseover-Box beim Einlauf
Mouseover-Box beim Einlauf
×
Mouseover-Box mit Scrollbalken für große Informationstexte
Mouseover-Box mit Scrollbalken für große Informationstexte
In Zeile 2+10 kann die Größe der Boxen einstellen werden. Es ist darauf zu achten, dass die Werte übereinstimmen (height + bottom)!
In Zeile 6-8 können Hintergrundbilder für jede Box bestimmt werden!
Über Zeile 10 ist die Animation mit "transition" realisiert. Zusätzlich ist noch eine Einschaltverzögerung mit "transition-delay" eingebaut, um ein kurzes Aufblitzen der Boxen zu vermeiden!
In Zeile 11 kann die Größe der Bilder und Videos in den Boxen anpasst werden!
In den Zeilen 26-29, 44-47, 62-65 sind die Informationen per Aufzählung zu finden.
In Zeile 32,50 und 68 sind die Verlinkungen zu den PN's hinterlegt. Text und Verlinkung können beliebig ausgetauscht und angepasst werden!
In Zeile 22+59 sind Bilder in den Boxen eingefügt, in Zeile 23+41 Videos. Bilder und Videos können beliebig ausgetauscht oder gelöscht werden!
XXL: Animierte Mouseover-Boxen mit JavaScript - Teil 2
Was ist hinzu gekommen:
Das folgende Skript hat alle Funktionen aus Teil 1!
Hinzu kommt eine freie Auswahl der Laufrichtung fürs Öffnens und Schließen der Boxen! In einigen Fällen kann es besser aussehen die Informationen nicht von unter nach oben einlaufen zu lassen, sondern von rechts nach links oder auch diagonal! Es stehen 7 weitere Laufrichtungen zur Verfügung.
Will man die Box schließen, ist es auf mobilen Endgeräten etwas schwierig eine freie Fläche zum Antippen zu finden! Mit dem erweiterten Skript ist es möglich durch Antippen des Bildes die Box zu schließen!
Installation
In Grundstellung ist die Laufrichtung von unten nach oben und zurück eingestellt! Auf mobilen Endgeräten reicht ein Antippen, um die Box zu öffnen und ein Antippen auf das Bild, um die Box zu schließen. Es stehen 7 weitere Laufrichtungen zur Verfügung. Es müssen jeweils immer zwei Zeilen freigegeben werden, einmal fürs Öffnen und einmal fürs Schließen (z.B. Zeile 31 + 125)
Zum Testen oder als Info-Boxen kann das Skript im Template (v1-4) in die "Kopfzeile" und im Xobor (v6) + Mobil in "Eigene Kopfzeile" kopiert werden!
In den Zeilen 16, 19, 22, 25, 28, 31 +34 kann die Laufrichtung für das Öffnen und in Zeile 110, 113, 116, 119, 122, 125 + 128 für das Schließen bestimmt werden! Um die gleiche Laufrichtung fürs Öffnen und Schließen beizubehalten, werden die gleichzahligen Laufrichtungen freigegeben! Es ist auch möglich hier abzuweichen, aber nicht alle Kombinationen funktionieren ordnungsgemäß!
In Zeile 2+12 kann die Größe der Boxen einstellen werden. Es ist darauf zu achten, dass die Werte übereinstimmen (height)!
In Zeile 6-8 können Hintergrundbilder für jede Box bestimmt werden!
Über Zeile 12 ist die Animation mit "transition" realisiert. Zusätzlich ist noch eine Einschaltverzögerung mit "transition-delay" eingebaut, um ein kurzes Aufblitzen der Boxen zu vermeiden!
In Zeile 13 kann die Größe der Bilder und Videos in den Boxen anpasst werden!
In den Zeilen 45-48, 62-65, 79-82 sind die Informationen per Aufzählung zu finden.
In Zeile 51,68 und 85 sind die Verlinkungen zu den PN's hinterlegt. Text und Verlinkung können beliebig ausgetauscht und angepasst werden!
In Zeile 41+76 sind Bilder in den Boxen eingefügt, in Zeile 42+59 Videos. Bilder und Videos können beliebig ausgetauscht oder gelöscht werden!
$('.boxtext').hover(function(e) { /** Grundstellung: Laufrichtung von unten nach oben und zurück! **/ $(this).css({'top':'','right':'','bottom':'-400px','left':'0'});
/** 1. Laufrichtung schließen: Von Ecke links oben nach unten **/ /* $('.boxtext').css({'top':'400px','right':'','bottom':'','left':'250px'}); */
/** 2. Laufrichtung schließen: Von links nach rechts **/ /* $('.boxtext').css({'top':'0','right':'','bottom':'','left':'250px'}); */
/** 3. Laufrichtung schließen: Von Ecke links unten nach oben **/ /* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'250px'}); */
/** 4. Laufrichtung schließen: Von unten nach oben **/ /* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'0'}); */
/** 5. Laufrichtung schließen: Von Ecke rechts unten nach oben **/ /* $('.boxtext').css({'top':'-400px','right':'','bottom':'','left':'-250px'}); */
/** 6. Laufrichtung schließen: Von rechts nach links **/ /* $('.boxtext').css({'top':'','right':'','bottom':'0','left':'-250px'}); */
/** 7. Laufrichtung schließen: Von Ecke rechts oben nach unten **/ /* $('.boxtext').css({'top':'','right':'','bottom':'-400px','left':'-250px'}); */
Hallo. nun hab ich auch Infobox mit Hilfe von Mato. Aber seitdem hab ich eine seltsame Erscheinung im Forum. Hängt garantiert mit der Infobox zusammen, ich hab es ausprobiert. Entferne ich die Box ist alles normal. Und zwar verschwindet im Browser der Scrollbalken rechts wenn man auf die Startseite zurück geht nach dem schreiben oder was immer. Dann muß man nochmal die Startseite anklicken, dann ist der Scrollbalken wieder da. Kann man das irgendwie beheben?
Hallo Rika, eigentlich sollte der Scrollbalken beim Zurückkehren nicht ausgeblendet werden! Wo genau hast Du das Skript eingetragen? Ist es noch aktiv?
Frage: Eigentlich kann es nur am CSS-Eintrag "overflow:hidden" liegen oder an der Class ".infobox", die auch woanders Verwendung findet! Was passiert, wenn Du aus Zeile 2 "overflow:hidden" löscht? Wo kann man mal nachschauen?
Wenn alles nicht hilft: Das folgende Skript verwendet andere Classes..... Was passiert, wenn Du das installierte Skript durch das folgende ersetzt, funktioniert dann der Scrollbalken, wie er soll?
Erstmal vielen Dank Wolfgang. Ist mir ein Rätsel, aber ich hab die Box jetzt wieder rein gestellt und bisher verschwindet der Scrollbalken nicht mehr! Ich hab es im "Eigenes Javascript" und ich glaube ich hatte es davor im Footer, die alte Möglichkeit von v4. Da ist es jetzt drin: https://www.seniorenforum50plus.de/ Sollte es wieder auftreten mit dem Scrollbalken probiere ich Deine Ratschläge aus, ansonsten melde ich mich wieder.
Das ist das verwendete Skript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<script> window.addEventListener('load', function ( ) {
Funktioniert immer noch, hab eine zweite Infobox erstellt. Nur hab ich noch ein anderes "Problem".
Damit die Boxen in der richtigen Reihenfolge stehen hab ich in der Administration die Boxanzeige-Nummerierung alles auf Null gestellt, sonst stehen die selbst erstellten Boxen ganz oben, da sollen aber die Standardboxen von Xobor stehen. Das funktioniert prima solange man eingeloggt ist. Aber Gäste sehen die selbst erstellten Boxen oben als erstes und erst drunter die Anmeldung, Besucherstatistiken... Kann man da was machen das die selbst erstellten Boxen unter den Standardboxen stehen?