Sebastian: Ausrichtung sowohl links als auch rechts / Gummi-Leerzeichen

Hallo,

ich wuerde gerne in einer HTML-Tabelle folgendes verwirklichen:

+--------------------------------------------+
| Text eins                        Text zwei |
+--------------------------------------------+
| Fließtext ueber die ganze Zeile            |
+--------------------------------------------+
| noch ein Text    und nochmal rechtsbuendig |
+--------------------------------------------+
| hier linksbuendiger Text        und rechts |
+--------------------------------------------+

Also: jeweils EINE Zeile, die zwei Textbausteine enthaelt, von denen einer links- und der andere rechtsbuendig ist.

* Blocksatz geht nicht, weil es sich nur um EINE Zeile handelt, die nicht vollstaendig gefuellt ist - die bleibt somit linksbuendig.

* zwei Spalten ohne Trennstrich (wobei die zweite Zeile dann mit colspan=2 zusammengefuegt waere) geht nicht, weil dann die dritte und vierte Zeile so aussaehen:

+-----------------------------------------------------+
| noch ein Text             und nochmal rechtsbuendig |
+-----------------------------------------------------+
| hier linksbuendiger Text                 und rechts |
+-----------------------------------------------------+

...und soviel Platz hab ich nicht.

* mit nbsp auffuellen geht zwar, aber dann funktionierts nur bei bestimmten Browsern und Schriftgroessen. Außerdem soll das ganze eine dynamisch aus ner Datenbank generierte Tabelle werden, und dann beisst das mit den Leerzeichen aus. Hoechstens wenn ich weiss wie breit die einzelnen Buchstaben sind und ich noch einiges an Code reinschreibe zur Berechnung der Textbreite koennte das noch funktionieren...

Gibt es irgendeinen Workaround? Ich hatte mal ein nettes Textverarbeitungsprogramm, das kannte sog. Gummi-Leerzeichen, die sich soweit ausgebreitet haben, dass sie den Text drumrum praktisch nach links und rechts an den Rand gedrueckt haben, so wie ich das hier braeuchte. Aber sowas gibts in HTML sicher nicht.

Irgendwelche brauchbaren Ideen?

Vielen Dank,
Sebastian

PS: Waere nett, wenn ihr mir an meine Email-Adresse seb-html@zutoll.de antworten koenntet!

  1. Hi,

    Du kannst es mit CSS realisieren. Jede Zeile in ein P mit text-align:right und hierin ein span mit float:left und einer passenden Breite in em für den linken Textteil.

    freundliche Grüße
    Ingo

    1. Hi Ingo,

      Du kannst es mit CSS realisieren. Jede Zeile in ein P mit text-align:right und hierin ein span mit float:left und einer passenden Breite in em für den linken Textteil.

      Oder eine zweispaltige Tabelle nehmen.

      Viele Grüße
      Mathias Bigge

      1. Hi,

        Oder eine zweispaltige Tabelle nehmen.

        das hatte er doch bereits ausgeschlossen:

        ...und soviel Platz hab ich nicht.

        Mathias Bigge

        freundliche Grüße
        Ingo

        1. Hi Ingo,

          Oder eine zweispaltige Tabelle nehmen.
          das hatte er doch bereits ausgeschlossen:

          ...und soviel Platz hab ich nicht.

          Das schien mir nur an der Textbreite zu liegen, aber vielleicht hast Du Recht.

          Viele Grüße
          Mathias Bigge

        2. Ingo,

          Oder eine zweispaltige Tabelle nehmen.
          das hatte er doch bereits ausgeschlossen:

          Nö.

          Nimm jeweils eine zeispaltige Tabelle für jede Zeile, die geteilt werden soll.

          Gruß,
          Gunnar

          --
          „Solang wir noch tanzen können
          und richtig echte Tränen flennen,
          ist noch alles offen,
          ist noch alles drin.“
          (Gundermann)
          1. hi,

            Oder eine zweispaltige Tabelle nehmen.
            das hatte er doch bereits ausgeschlossen:

            Nimm jeweils eine zeispaltige Tabelle für jede Zeile, die geteilt werden soll.

            oder eine tabelle mit ein oder zwei dutzend spalten - und dann wird halt je nach textbreite mal schön mit colspan rumgefuhrwerkt :-)

            gruß,
            wahsaga

            --
            "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    2. Hallo,

      Du kannst es mit CSS realisieren. Jede Zeile in ein P mit text-align:right und hierin ein span mit float:left und einer passenden Breite in em für den linken Textteil.

      Die spannendste Frage ist doch: Was ist hier eine »passende Breite«? Denn von Zeile zu Zeile variiert die Aufteilung der Flächen. Mal kann es anscheinend 70%-30% sein, mal umgekehrt. Individuelle Breiten, gar über Inline-Styles, sind denkbar uneffizient. (Ich plädiere ja gerne für keine width-Angabe, da alle mir bekannten Browser den CSS-Standard in diesem Punkt offenbar bewusst missachten...)

      Mathias

      1. Hi,

        Die spannendste Frage ist doch: Was ist hier eine »passende Breite«?

        Die durch Versuch ermittelte und sicherheitshalber etwas vergrößerte. Natürlich in em angegeben und natürlich in allen angegebenen Schriftarten getestet.

        Individuelle Breiten, gar über Inline-Styles, sind denkbar uneffizient.

        Das stimmt, aber hier nur zu vermeiden, wenn man:

        (Ich plädiere ja gerne für keine width-Angabe, da alle mir bekannten Browser den CSS-Standard in diesem Punkt offenbar bewusst missachten...)

        was aber irgendwann doch einmal zu Problemen führen könnte. Ich finde es daher doch zu unsicher.
        Es wäre natürlich extrem hilfreich, wenn die jetzige Interpretation mit CSS3 zum Standard erklärt würde.

        freundliche Grüße
        Ingo

        1. Hi Ingo,

          [float]

          (Ich plädiere ja gerne für keine width-Angabe, da alle mir bekannten Browser den CSS-Standard in diesem Punkt offenbar bewusst missachten...)

          Es wäre natürlich extrem hilfreich, wenn die jetzige Interpretation mit CSS3 zum Standard erklärt würde.

          bereits in CSS2.1 ist nichts mehr von explizit notwendiger width-Angabe zu lesen, siehe

          http://www.w3.org/TR/REC-CSS2/visuren.html#floats und
           http://www.w3.org/TR/CSS21/visuren.html#floats

          Grüße,
           Roland

          1. Hallo Roland!

            bereits in CSS2.1 ist nichts mehr von explizit notwendiger width-Angabe zu lesen, siehe

            http://www.w3.org/TR/REC-CSS2/visuren.html#floats und
            http://www.w3.org/TR/CSS21/visuren.html#floats

            Gratuliere, Du hast gut recherchiert!
            Ich habe gerade die Problemstellung dieses Threads mit float:left und float:right probiert. Funktioniert mit Firefox und Konqueror tadellos.
            Wenn ich nächstesmal XP boote schau ich mir das noch mit dem IE an.
            Der Validator akzeptiert das Stylesheet auch ohne explizite width-Angabe.

            Grüße
            saltun

          2. Hi,

            bereits in CSS2.1 ist nichts mehr von explizit notwendiger width-Angabe zu lesen, siehe

            schön zu wissen, danke.
            Dann kann man ruhigen Gewissens float ohne width einsetzen, wenn man berücksichtigt:

            "If there isn't enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present."

            Bzw. wenn eine solche Konsturktion heute funktioniert, brauche ich keine Angst mehr zu haben, daß sie in zukünftigen Browserversionen Probleme bereitet.

            freundliche Grüße
            Ingo

  2. Hallo!

    Also: jeweils EINE Zeile, die zwei Textbausteine enthaelt, von denen einer links- und der andere rechtsbuendig ist.

    Ich hab mich einmal mit einem ähnlichen Problem herumgeschlagen und bin auf die relative Positionierung gekommen.

    Im Stylesheet:

    .links {position:relative;
        top:0;left:0;
        height:2em;
        margin:0;
        padding:0;
        font-size:1em;
        }
     .rechts {position:relative;
        top:-2em;left:0;
        height:2em;
        text-align:right;
        margin:0;
        padding:0;
        font-size:1em;
       }

    In HTML:

    <p class="links">linksstehend</p>
    <p class="rechts">rechtsstehend</p>

    In den Browsern Firefox, Konqueror, IE 6 und Opera 7.2.1 funktioniert es so.

    Problematisch ist, daß sich der Text bei Schriftvergößerung im Browser ineinanderschiebt, wenn nicht ein relativ großer Zwischenraum vorhanden ist.
    Nur Opera verhält sich da anders, da bleibt immer ein Abstand zwischen den Textblöcken.

    Weiß jemand warum Opera ein abweichendes Verhalten zeigt?

    Grüße
    saltun