Feste Position für zentriertes Element

[Pilo]

Auf meiner Website soll der Benutzer kurze Hinweise aufrufen können. Das läßt sich mit <details> prima machen. Die Hinweise sollen dann mitten auf der Site in einer umrandeten Box erscheinen. Diese Box hat eine maximale Breite, soll aber nicht breiter sein als der Text in ihr. Das ist mit folgendem CSS-Code auch gut möglich:

<style>
info {
  display: table;
  margin: 0 auto;
  max-width: 400px;
  border: 1px solid black;}
</style>

Allein: Wenn ich der Box einen festen Platz auf der Site zuweise (position:fixed), ist sie nicht mehr zentriert. Bei einer relativen Positionierung wird der nachfolgende Inhalt der Site verschoben und bei einer absoluten sind kurze Hinweise nicht mehr zentriert.

 

[Sempervivum]

Normaler Weise lässt sich das mit diesem CSS machen:

position: fixed;
/* Zunächst setzen wir die linke obere Ecke in die Mitte */
left: 50%;
top: 50%;
/* Jetzt verschieben wir die Box um die Hälfte ihrer Breite nach links oben:
transform: translate(-50%, -50%);
/* Nun ist die Box zentriert */

 

[Pilo]

Ganz herzlich bedankt für den vorzüglichen Tip. Das Zentrieren funktioniert nun wunschgemäß.
Bleibt nur ein (neues?) Problem: "overflow: auto" zeigt keine Wirkung

 

[Sempervivum]

Worauf bezieht sich das denn, auf die Box, die wir gerade zentriert haben oder etwas anderes? Damit "overflow: auto" greift, müssen in irgend einer Form die Abmessungen begrenzt werden, damit Scrollbars eingeblendet werden.

 

[Pilo]

Es geht im die Box <info>, für die eine max-height festgelegt ist.

 

[Sempervivum]

Oben sehe ich eine max-width. Gibt es zusätzlich auch eine max-height? Wenn ja, müssten die Scrollbars auftauchen, wenn der Inhalt nicht mehr hinein passt. Wenn das bei dir nicht funktioniert, dann poste das vollständige HTML und CSS oder, besser, die URL der Seite.

 

[Pilo]

Anbei eine stark vereinfachte Version - reines HTML statt PHP (jedoch mit der Endung TXT, weil das Forum merkwürdigerweise HTML nicht akzeptiert)-
Der Link, um den Hinweis anzuzeigen, soll ganz rechts unten auf der Site zu finden sein.

 

[Sempervivum]

Irgend wie hebelt das "display: table" das "max-height" aus, es ist unwirksam. Deaktiviere ich das "display: table" geht die Höhe sofort auf die maximale zurück und die vertikale Scrollbar wird ein geblendet.

 

[Pilo]

Für die wiederum schnelle und nützliche Hilfe danke ich sehr. Das "display:table" war ein Überbleibsel aus früheren Versuchen. Ich hab's entfernt, und nun ist alles so, wie ich erhofft hatte.
Und doch ist da ein Problem: Ich gebrauche auf meiner Homepage <details> auch für andere Zwecke - so für ein Pull-Down-Menu und für eine Kartei im Akkordeon-Stil. Und nun gelten die neuen "summary::marker"-Anweisungen auch für diese Anwendungen. Das läßt sich - denke ich - mit "class"-Anweisungen verändern. Aber wie?

 

[scatello]

Siehe z.B. https://www.w3schools.com/cssref/sel_class.php

 

[Pilo]

Nach einigem Rumprobieren habe ich die Lösung gefunden: summary.help::marker