HTML & CSS - Text nach "außen" verschieben

[Mr.Tr33]

Moin,
ich habe so ein kleines Problem woran ich gerade extrem verzweifle :/

Es geht um folgenden Code/Inhalt:

Ich möchte am Ende die graue Box, die auf dem Menü ist drunter haben OHNE, dass der Hintergrund kaputt geht und sich trotzdem mit der größe des Textes automatisch anpasst.
Desweiteren möchte ich den die freie Fläche der grauen Box über dem Text und unter dem Text verschwinden lassen. Heißt, der Text muss irgend wie über das eigentliche Object hinnausragen. Leider geht hierbei ebenfalls der große Hintergrund hinter der grauen Box kaputt

Weiß jemand eine Lösung OHNE Javascript und nur mit reinem HTML & CSS?

MfG,
Mr.Tr33

[.Shalom]

Einfach mit position:absolute; positionieren und dann jeweils mit margin verschieben, wäre eine Möglichkeit.

[Mr.Tr33]

Ehm ja danke aber ich würde nicht um Hilfe fragen, wenn ich nicht schon fast alles versucht hätte :/



Kreis 1: Der Hintergrund passt sich meinem Text nicht automatisch an = doof
Kresi 2: Hier müsste ich jeden einzelnen Pixel zurecht schieben was nicht gerade schön ist :/

[Xodex]

rechts ? oder mittig?

[Mr.Tr33]

Nee, dann würde der Hintergrund ja schwachsinnig aufgeteilt sein.
Dazu überlappt sichd er Schaten

 Spoiler

Und bei dir ist der Text hoch genug, nur der untere Teil eben zu tief.