Blocksatz in nur einer Zeile

[ajay]

Hallo,
ich habe folgendes Problem und denke, dass man es evtl. mit CSS lösen könnte:

In eine DIV-Container stehen in einer Zeile eine variable (vorher ungekannte) Anzahl von Wörtern (ca. 3-10). Diese sollen mit gleichmäßigem Abstand über die gesamte Breite des DIV-Containers verteilt werden. Die Blocksatz-Textausrichtung funktioniert ja erst bei einem Text, der sich über mehr als eine Zeile erstreckt. Von daher habe ich auf Anhieb keine Lösung gefunden.

Hier noch ein Bild, dass das Ganze auch noch einmal verdeutlicht. *klick*

Kann mir jemand helfen?

-ajay-

 

[muhkuh]

Mmh, ich wüsste wie man das recht einfach mit ner Tabelle lösen kann

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <colgroup>
    <col width="1*" />
    <col width="1*" />
    <col width="1*" />
    <col width="1*" />
    <col width="1*" />
    <col width="1*" />
  <colgroup>
  <tbody>
    <tr>
      <td>Link #1</td>
      <td>Link #2</td>
      <td>Link #3</td>
      <td>Link #4</td>
      <td>Link #5</td>
      <td>Link #6</td>
    </tr>
  </tbody>
</table>

Ist eigentlich selbsterklärend. Mit "*1" wird festgelegt, dass die Spalte genau 1 Teil der Anzahl an Spalten durch die Summe der Teiler ist. Jede Spalte ist also genau so breit ein sechstel der Gesamtbreite der Tabelle. Stünde hier bei einer col width="*2" wäre diese spalte doppelt so breit wie die anderen fünf, nämlich zwei siebtel der Gesamtbreite der Tabelle.
Besser erklärt bekommst du das hier: http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren / Beispielschema 3

 

[ajay]

Okay, ich hatte vergessen zu erwähnen, dass ich von Tabellen weg und alles mit DIVs machen wollte.
Wenn es nicht anders geht, dann wäre wohl doch eine Tabelle die Alternative.

 

[Maik]

Meines Wissens bietet CSS für dein Vorhaben keine Lösungsmöglichkeiten, da die Anzahl der Wörter und deren Zeichenlänge unbekannt bzw. variabel ist, und sie sich nicht über mehrere Zeilen erstrecken.

Somit greifen auch nicht die CSS-Eigenschaften word-spacing oder text-align:justify.

 

[versuch13]

Anhand von deiner Grafik gehe ich mal davon aus dass es sich um eine Navigation handelt oder?

Kommen die Navigationspunkte aus einer Datenbank oder ähnliches? Du könntest die Punkte zählen, ein Listenmenü erstellen und je nach Anzahl der Navigationspunkte width für die <li>Listenpunkte</li> bestimmen.

Werden also z.B. vier Punkte gezählt, rechnest du 100/4 = 25% width.

Vielleicht ein Lösungsansatz...


Gruß

 

[ajay]

Ja genau! Es ist ein Menü und die Einträge kommen aus einer Datenbank.
Auf deine Lösung hätte ich eigentlich auch kommen können. Klingt machbar, aber ich kann es im Moment nicht ausprobieren, da ich nicht an meinem Rechner sitze.

Allerdings - und da habe ich mich vielleicht im Moment ein wenig affig - möchte ich Style-Sachen in eine externe CSS-Datei verpacken. Da ja die Breite bei dieser Lösung dynamisch angepasst wird kann ich doch nicht einfach ein Stückchen PHP-Code in die CSS-Datei packen. Oder doch? Wie gesagt, kann es grad nicht testen.

 

[versuch13]

Keine Ahnung, also im PHP Dokument selbst wäre es ja kein Problem, dann muss man das notfalls halt mal so machen.

 

[Maik]

Da ja die Breite bei dieser Lösung dynamisch angepasst wird kann ich doch nicht einfach ein Stückchen PHP-Code in die CSS-Datei packen. Oder doch?

Nein, PHP lässt sich nicht in einem Stylesheet (CSS) integrieren.