Block-Text absolut zentrieren

[Deus Figendi]

Hallo,
ich hoffe der Thread-Titel verwirrt nicht ^^
Also ich habe schwierigkeiten einen Text bzw. ein Blockelement zu zentrieren, weil ich es absolut ausrichten will/muss. Hier mal der relevante Code:

<div class="schwebebox">  
  <img src="./bild.png" alt="Bild" />  
  <p>Kurzer Text</p>  
</div>

und das CSS dazu:

.schwebebox {  
left:100px;  
padding:7px;  
position:fixed;  
top:100px;  
}  
.schwebebox p {  
bottom:10px;  
margin-left:auto;  
margin-right:auto;  
position:absolute;  
text-align:center;  
}

(Jeweils auf das relevante zusammengekürzt, gibt noch Farben und so'n Kram).
Mein Ziel ist, wie man hoffentlich sieht, dass der Text im Paragraph (mal sehen, vielleicht nehme ich da auch ein passenderes Element) auf dem Bild schweben soll und zwar zehn Pixel von unten aus gesehen. Das Bild wird immer größer sein als der Text und somit die Größe des <div> bestimmen.
Das Problem ist eben, dass ich bei absoluter Positionierung des <p> dieses nicht mehr zentrieren kann und bei relativer Positionierung kann ich es nicht mehr "10 Pixel von unten" ausrichten, sondern bestenfalls "20 Pixel höher" oder so, was dann aber unerwünschte Effekte hat sollte der Inhalt des <p> mal mehrzeilig werden.

Hat jemand 'ne Idee, wie ich das Problem löse?
Größe von Bild und Text sind nicht (genau) bekannt, weil es innerhalb einer Forensofware passiert (Nickname über Avatar und die Größe von beidem wird vom User bestimmt, aber es gibt eben einen "üblichen Spielraum").
Äh was hab ich probiert? Jemand in #css (freenode) meinte ich möge es mit margin-bottom probieren, aber das ging auch nicht (gleiches Problem im Grunde).

[ChrisB]

Hi,

Das Problem ist eben, dass ich bei absoluter Positionierung des <p> dieses nicht mehr zentrieren kann

http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

MfG ChrisB

[Deus Figendi]

Hi,

» Das Problem ist eben, dass ich bei absoluter Positionierung des <p> dieses nicht mehr zentrieren kann

http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

MfG ChrisB

Ja aber das klappt doch so nicht...
wie ich schrieb...

Größe von Bild und Text sind nicht (genau) bekannt

was die Methode mit "absolute" zunichte macht und damit magin:auto funktioniert darf es nicht "absolute" sein. "Absolute" brauche ich aber um

"10 Pixel von unten" ausrichten

Tabelle ginge natürlich... sind aber keine tabellarischen Daten.
Ich mach's erstmal indem ich die Breite des <p> festsetze, aber falls noch jemand einen anderen Vorschlag hat bin ich absolut offen :)

[ChrisB]

Hi,

Ja aber das klappt doch so nicht...
wie ich schrieb...

Größe von Bild und Text sind nicht (genau) bekannt
was die Methode mit "absolute" zunichte macht und damit magin:auto funktioniert darf es nicht "absolute" sein.

Damit margin:auto funktioniert, müsste das Element eine Breitenangabe bekommen - deshalb war ich davon ausgegangen, dass du eine solche sowieso machen wolltest.

"Absolute" brauche ich aber um

"10 Pixel von unten" ausrichten

Dann verlasse dich nicht auf die bei absolute angewandte Breitenberechnung shrink-to-fit, sondern sorge dafür, dass das Element eine bestimmte Breite bekommt - dann kannst du Textinhalt nach wie vor über text-align zentrieren.
Bspw. in dem du sowohl eine left- als auch eine right-Koordinate angibst. (Das kann der IE < 7 noch nicht, aber da tut's dann ja zur Not auch eine Ausrichung an einem Rand und eine explizite width-Angabe.)

MfG ChrisB

[Deus Figendi]

Danke Chris,
ich habe jetzt tatsächlich dem <p> einfach eine feste Breite gegeben und dann ging der Vorschlag und ich muss sagen: Es ist zwar anders als ich es mir vorgestellt hatte, aber es schaut recht gut aus!

Der IE <7 ist mir schnuppe, wer das benutzt hat es nicht besser verdient als dass es blöd aussieht ;) (ja ich weiß manche können da nichts für).
Naja, ist eh nonprofit und irgendwas unter 2% IE6 und ich bekomme auch kein Geld dafür also passt das schon :)

Wie gesagt, schönen Dank, anders als gedacht aber trotzdem gut.

[suit]

Der IE <7 ist mir schnuppe, wer das benutzt hat es nicht besser verdient als dass es blöd aussieht ;) (ja ich weiß manche können da nichts für).

Warum muss es denn blöd aussehen? Warum kanns nicht vernünftig, aber etwas anders aussehen?

Naja, ist eh nonprofit und irgendwas unter 2% IE6 und ich bekomme auch kein Geld dafür also passt das schon :)

Sind die 2% IE 6 geraten oder Fakten? Wenn zweiteres zutrifft, beneide ich dich :)

[Deus Figendi]

Sind die 2% IE 6 geraten oder Fakten? Wenn zweiteres zutrifft, beneide ich dich :)

Hehe beides, es war geraten, gerade habe ich nachgesehen, im April waren es:
2,7% IE 6
2,3% IE 7
das meiste ist FF.
Also es sind eher drei als zwei Prozent, aber du darfst trotzdem neidisch sein :)

» Der IE <7 ist mir schnuppe, wer das benutzt hat es nicht besser verdient als dass es blöd aussieht ;) (ja ich weiß manche können da nichts für).
Warum muss es denn blöd aussehen? Warum kanns nicht vernünftig, aber etwas anders aussehen?

Ja hast Recht, ich neige einfach dazu es standardkonform zu machen und wenn das für den 6er okay ist, dann passt das ja. Es ist idR nicht so dass ich extra Stolperfallen einbaue, es ist mir einfach nur egal.
Und wenn wie in diesem Fall der IE6 den Text über dem Bild nicht 30% transparent macht... dann eben nicht.
In der Regel sind standardkonforme Seiten ja durchaus mit dem IE<7 benutzbar, es sieht also nicht "blöd" aus, sondern nur nicht "wie es soll" bzw. eben schlechter als mit einem anderen Browser.

[suit]

In der Regel sind standardkonforme Seiten ja durchaus mit dem IE<7 benutzbar, es sieht also nicht "blöd" aus, sondern nur nicht "wie es soll" bzw. eben schlechter als mit einem anderen Browser.

Aufgrund diverser Bugs kann es durchaus vorkommen, dass das komplette Layout zerstört ist - sowas sollte man schon fixen.