Hallo, Wolfgang, ich bastele jetzt knapp 1 Woche am Design vom Spoiler rum, ich wollte es nach meinen Wünschen anpassen, soweit hat es ja für mich gut geklappt. Ich bekomme innen den Rahmen nicht gerundet und ich habe es so weit geschafft, dass man jetzt überall den Schatten sieht. Ich hänge ein Bild noch an, wie es aussieht. Ich habe da noch paar Fehler drin, bekomme das nicht korrigiert. Ich habe da deinen Code als Vorlage benutzt. Ich weiß nicht weiter, da ist jetzt mein Können so weit zu Ende.

Hier der Code:

/*Spoiler-Design*/
.hpm_spoiler  {display:inline-block; width:auto; max-width:98%; margin-right: 12px;}
.hpm_spoiler, .hpm_spoiler_headinput {outline:none; color:#ffffff !important;}
 
.hpm_spoiler_body {width:auto; background-color:#4d4d4d; color:#000000; border-color:#f0efee; border-style:double; border-width:0 5px 5px 5px; border-radius:0 0 12px 12px;box-shadow: 12px 12px 12px #000000; rgba(0, 0, 0, 0.3); margin-left:12px; }
 
.hpm_spoiler_headdiv {background:#4d4d4d; border:2px solid #f0efee; border-radius:12px;box-shadow: 12px 12px 12px #000000; rgba(0, 0, 0, 0.3);}
.hpm_spoiler_headdiv input {position:relative; color:#000000 !important;}
.hpm_spoiler_headdiv:hover {background:#4d4d4d;}
 
.hpm_spoiler_closebutton {background-color:#4d4d4d; font:normal 5px Verdana,Arial,sans-serif; font-style:italic; border-top:1px solid #f0efee; padding:2px 12px;}
.hpm_spoiler_closebutton a {display:block; width:100%; text-decoration:none; color:#000000 !important; }
.hpm_spoiler_closebutton:hover {background-color:#4d4d4d;}
 
 pre {width:auto; max-width: 65vw; min-width:10vw;}
.codelines {background-color:#4d4d4d; color:#000000; float:left !important;}
.bbcode_code {color:#4d4d4d;}
.code {display:inline-block; max-width:90%;}
.code pre {background-color:#4d4d4d; color:#000000; width:auto !important;}
 pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto;max-width:100vw;}
 
 
 

Nee alles bestens Wolfgang, ist der Firefox-Browser, der alles zentriert anzeigt. Seit dem Update zeigt es komischerweise manche Dinge an, die es gar nicht gibt. Habe das mal im ganzen Haus getestet bei den Nachbarn am PC und mit dem Microsoft Edge. Wird noch schlimmer, da zeigt er alles außerhalb an. Einige Funktionen haben sich geändert, das wurde auch beim Nachbarn getestet. Bei SeaMonkey bekommst du Warnungen, wenn du am Bearbeiten bist, dass das Forum nicht sicher sei und versucht die Bearbeitung zu blocken. Habe extra meine Nachbarin gefragt, ob ich mal an ihrem PC testen darf. Kommt überall beim Firefox dasselbe weiße Fenster, wenn ich bearbeite, wie im Video und SeaMonkey macht da dicht. Ich habe mich jetzt daran gewöhnt, dass er Dinge anzeigt, die es nicht gibt. Bei Microsoft Internet Windows 7 zeigt er alles normal an, nur sind manche Punkte und so außerhalb, beim Firefox ist alles zentriert.


Vielen Dank für die Erklärung und Hilfe, vielen Dank.

So habe mal einige Änderungen gemacht, in ".codeblock". War alles so dunkel und man konnte den Code Syntax nicht erkennen.

Hier mal ein Bild, wie mein Spoiler jetzt aussieht.

Habe es geändert, ich benutze es jetzt so, sieht ein bisschen anders aus.

<!-- Hier Beginnt das Syntax-Highlighting: Foren-Code farbig darstellen -->
<!-- Hier Beginnt das Syntax-Highlighting: Foren-Code farbig darstellen -->
<!-- Hier Beginnt das Syntax-Highlighting: Foren-Code farbig darstellen -->
 
<link rel="stylesheet" href="https://yandex.st/highlightjs/7.5/styles/googlecode.min.css">
 
<style>
/* Nummerierung Codeliste: Schrift + Hintergrund */
.bbcode_code .codeblock .codelines {
  color: #000000;
  background-color: #949494;
}
/* Codeliste: Hintergrund */
.bbcode_code .codeblock pre {
  background-color: #949494 !important;
}
/* CSS-Fix für Syntax-Highlighting: */
pre code {
  background-color:transparent !important; 
  padding:inherit !important; 
  font-weight:bold; 
  font-size:14px; 
  overflow-x:auto;
}
 
/* Eigene Syntax-Highlighting Farb-Codes */
  pre .comment { color:#aaaaaa !important; }
  pre .attr_selector { color: #227722 !important; }
  pre .attribute, pre .subst { color:#7035a1 !important; }
  pre quote { color:#aaaaaa !important; }
  pre .keyword { color:#dd7000 !important; }
</style>
 
<script src="https://yandex.st/highlightjs/7.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
 
<!-- Hier endet das Syntax-Highlighting: Foren-Code farbig darstellen -->
<!-- Hier endet das Syntax-Highlighting: Foren-Code farbig darstellen -->
<!-- Hier endet das Syntax-Highlighting: Foren-Code farbig darstellen -->   
 

Sieht jetzt so aus: