table/div Objekte innerhalb eines Bereichs zentrieren

[Wolfmartin]

Also, ich weiß nicht mehr weiter... ich hab ja nun schon einiges durch und auch viel gelesen, auch hier in den Foren wo es um ähnlich gelagerte Fälle geht. Aber es klappt alles nicht.

Problem:

Nehmt eine Seite. Packt ein Div (wir nennen es A) rein das selbst einen Bereich von 80% (keine Pixel angaben mögl.) der Seitenbreite einnimmt und zentriert steht. Objekte innerhalb von A sollen zentriert sein, dabei aber nach links floaten.

Das würde bedeuten das wenn nur ein Objekt, nennen wir es B und nehmen wir an es sein eine Tabelle, innerhalb von A existiert, dieses zentriert stehen müsste.

Wären es dagegen zwei Objekte (nennen wir sie B und C) müsste B etwas links von der mitte und C etwas rechts von der mitte, aber beide mit jeweils gleichem abstand zur mitte stehen.

Und so weiter. Erhöhe ich jetzt die Menge an Objekten und packe  D, E, und F dazu verschieben sich diese Objekte innerhalb von A, floaten nach links aber bleiben dabei innerhalb von A im gesamten zentriert.

Ist jetzt die Menge an Objekten innerhalb von A größer als die zur Verfügung stehende Breite müssten die Objekte umbrechen und in der nächsten Zeile weiterfloaten. Auch dabei sollen sie zentriert bleiben

Hab ich mich verständlich ausgedrückt? Ich hoffe es.

Die Frage ist: Geht das überhaupt? Oder geht das nicht?

Wenn es jemanden gibt der dazu die passende Lösung hat so das ich in der Lage bin das mit vertretbarem Aufwand umzusetzen schick ich ihm ne Tüte Gummibärchen.

[wahsaga]

hi,

Objekte innerhalb von A sollen zentriert sein, dabei aber nach links floaten.

floating und Zentrierung schliessen sich m.E. aus.

Was du eigentlich willst, ist display:inline-block.
Die Unterstützung in den Browser ist allerdings noch recht bescheiden. Opera kann's, IE mit einem kleinen Hack auch - Firefox produziert noch unbrauchbare Ergebnisse, kennt aber eine eigene -moz-Property dafür, deren Resultate aber auch nicht immer zufriedenstellend sind.

gruß,
wahsaga

[andy]

Da kommt man leider nicht um Tabellen herum, da die besondere Eigenschaften haben. Sollte ich Falsch liegen und jemand hat eine Lösung ohne Tables, würd ich das gerne sehen.

Du machst also einen DIV mit 80%

In den div packst du Tabellen, dies sind dann die objekte die floaten, dienen also nur als Container. Bei jeder Tabelle setzt du display:inline, damit sie nicht umbrechen.

In der Zelle kannst du dann einen div-Container machen, der wiederum mit display:block definiert wird, damit du darin normal Blockelemente erzeugen kannst.

<div style='width:80%; border:1px solid black;' align='center'>

<table style='display:inline; text-align:center;'><tr>
 <td style='border:1px solid black;'>
  <div style='display:block; width:100px; height:100px;'>text</div>
 </td></tr></table>
<table style='display:inline; text-align:center;'><tr>
 <td style='border:1px solid black;'>
  <div style='display:block; width:100px; height:100px;'>text</div>
 </td></tr></table>
<table style='display:inline; text-align:center;'><tr>
 <td style='border:1px solid black;'>
  <div style='display:block; width:100px; height:100px;'>text</div>
 </td></tr></table>
<table style='display:inline; text-align:center;'><tr>
 <td style='border:1px solid black;'>
  <div style='display:block; width:100px; height:100px;'>text</div>
 </td></tr></table>
<table style='display:inline; text-align:center;'><tr>
 <td style='border:1px solid black;'>
  <div style='display:block; width:100px; height:100px;'>text</div>
 </td></tr></table>

</div>

Dieser Code ist absolut grässlich. Aber er funktionniert.
Ich würde mir überlegen, ob es denn so wichtig ist, dass die Elemente nach dem floaten noch zentriert sind. Denn wenn nicht, geht es sehr einfach.

[Wolfmartin]

Da kommt man leider nicht um Tabellen herum, da die besondere Eigenschaften haben. Sollte ich Falsch liegen und jemand hat eine Lösung ohne Tables, würd ich das gerne sehen.

[...]

Dieser Code ist absolut grässlich. Aber er funktioniert.
Ich würde mir überlegen, ob es denn so wichtig ist, dass die Elemente nach dem floaten noch zentriert sind. Denn wenn nicht, geht es sehr einfach.

Naja, wichtig? Man hat sich ein ganz bestimmtes Layout gewünscht, und wenn HTML und CSS es möglich machen, und ich dafür den Standard nicht verstümmeln muss, dann kann man es auch einsetzen. Der W3C Validator nimmt sowohl den HTML Code als auch das CSS als gültig, und damit kann ich es guten Gewissens benutzen. Ferdsch :-)

Und ansonsten: Prima Hilfe! Du hast Dir ne Tüte Gummibärchen verdient. Schick mir ne Mail mit deiner Adresse an meine Emailadresse wenn Du sie haben willst :-)