Kai Lewendoski: Links- und rechtsbündig in einer Zeile?

Hi Leute,
folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...

Kai

  1. hallo,

    folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...

    <table border="1">
    <tr>
    <td>
    <p>folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
    </p>
    <p style="text-align:right;">Kai ...</p>
    </td>
    </tr>
    </table>

    grüße
    thomas

    1. Hallo Thomas,

      <table border="1">
      <tr>
      <td>
      <p>folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
      </p>
      <p style="text-align:right;">Kai ...</p>
      </td>
      </tr>
      </table>

      da habe ich jetzt wirklich überlegt, aber welchen Zweck erfüllt hier
      die Tabelle?

      [ ] keinen ?

      Viele Grüße,
      Stefan

      1. hallo Stefan,

        da habe ich jetzt wirklich überlegt, aber welchen Zweck erfüllt hier
        die Tabelle?

        [ ] keinen ?

        [x] habe mich verlesen "zelle" ;-)

        grüße
        thomas

        1. Hallo Thomas,

          [x] habe mich verlesen "zelle" ;-)

          passiert, vielleicht sollte man aber jetzt noch sagen, dass es wohl
          keinen Weg gibt, sein Vorhaben zufriedenstellend zu lösen.

          Oder hat jemand eine Idee, wie ich

          bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
          bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
          bla bla bla bla                  (Copyright 2001 Stefan Einspender)

          mit CSS umsetzen kann?

          Erhöhter Schwierigkeitsgrad an dieser Stelle ist, dass der Text auch
          noch skalierbar sein soll und wenn der Platz für (...) nicht mehr aus-
          reicht, die Sache auf einer neuen Zeile (natürlich wieder nach rechts
          ausgerichtet) stehen soll ;-)

          bla bla bla bla bla bla bla bla bla bla bla
          bla bla bla bla bla bla bla bla bla bla bla
          bla bla bla bla bla bla bla bla bla bla bla
          bla bla bla bla bla
                   (Copyright 2001 Stefan Einspender)

          Viele Grüße,
          Stefan

          1. Hi, Stefan

            [...]

            Oder hat jemand eine Idee, wie ich

            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla                  (Copyright 2001 Stefan Einspender)

            Eine Eigenentwicklung? *g*

            mit CSS umsetzen kann?

            Wie wär`s mit

            <p>bla...bla></p>
            <p style="margin-top:-14px;">© 2001 orlando</p>?

            Erhöhter Schwierigkeitsgrad an dieser Stelle ist, dass der Text auch
            noch skalierbar sein soll und wenn der Platz für (...) nicht mehr aus-
            reicht, die Sache auf einer neuen Zeile (natürlich wieder nach rechts
            ausgerichtet) stehen soll ;-)

            bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla
                     (Copyright 2001 Stefan Einspender)

            Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...

            LG Orlando

            1. Hallo,

              Eine Eigenentwicklung? *g*

              klar, da steckt 'ne Menge Gehirnschmalz drin ;-)

              <p>bla...bla></p>
              <p style="margin-top:-14px;">© 2001 orlando</p>?

              nö, damit steht es ja nicht wirklich in einer Zeile, da hat man nur
              einen Workaround, der unter Optimalbedingungen vielleicht auch noch
              funktioniert. Für den Praxiseinsatz würde ich sowas nicht benutzen.

              Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...

              Warum habe ich wohl diese Zeile hingeschrieben:

              dass der Text auch noch skalierbar sein soll

              ?

              Genau, weil ich auf solche Details viel Wert lege ;-)

              Und selbst bei fester Tabellenbreite weiß ich nicht, wie das Layout
              beim User aussieht, entweder ich müßte ihn dazu maximal bevormunden
              oder aber sein Browser ist dazu überhaupt nicht in der Lage.
              Übereinanderliegender Text sieht einfach sch... aus ;-)

              Nix für ungut, da bleibt wohl die folgende Variante bestehen:

              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (Copyright 2001 Stefan Einspender)

              Ist nicht optimal, aber funktioniert in _jedem_ Browser :-)

              Viele Grüße,
              Stefan

              1. Hi, Stefan

                Eine Eigenentwicklung? *g*

                klar, da steckt 'ne Menge Gehirnschmalz drin ;-)

                Da steht wohl ein Software-Patent an ;-)

                <p>bla...bla></p>
                <p style="margin-top:-14px;">© 2001 orlando</p>?

                nö, damit steht es ja nicht wirklich in einer Zeile, da hat man nur
                einen Workaround, der unter Optimalbedingungen vielleicht auch noch
                funktioniert. Für den Praxiseinsatz würde ich sowas nicht benutzen.

                Sorry, habe _Zelle_ gelesen statt _Zeile_. Aber mit <span> und relativer Positionierung ließe sich auch noch etwas basteln. Da wären noch Layer usw.

                Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...

                Warum habe ich wohl diese Zeile hingeschrieben:

                dass der Text auch noch skalierbar sein soll
                ?

                Genau, weil ich auf solche Details viel Wert lege ;-)

                Und ich wollte einfach nur recht haben ... erwischt, na sowas! Wenn ich solch ein Layout aber unbedingt <- will, bleibt mir wohl keine andere Möglichkeit. Es gibt durchaus Gründe für eine feste Tabellenbreite.

                Und selbst bei fester Tabellenbreite weiß ich nicht, wie das Layout
                beim User aussieht, entweder ich müßte ihn dazu maximal bevormunden
                oder aber sein Browser ist dazu überhaupt nicht in der Lage.
                Übereinanderliegender Text sieht einfach sch... aus ;-)

                Wenn sein Browser Stylesheets nicht (vollständig) unterstützt, ändert sich mit einem <span> ja ohnehin nichts am Layout und er sieht ...

                Nix für ungut, da bleibt wohl die folgende Variante bestehen:

                ... genau das:

                bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (Copyright 2001 Stefan Einspender)

                Patent erteilt!

                Ist nicht optimal, aber funktioniert in _jedem_ Browser :-)

                Für das Problem laut Thread gibt es keine _optimale_ Lösung, aber viele Wege führen nach Rom. Kai kennt nun die Probleme und wird uns eine elegante Lösung präsentieren ;-)

                LG Orlando

                1. Hi Leute,

                  Für das Problem laut Thread gibt es keine _optimale_ Lösung, aber viele Wege führen nach Rom. Kai kennt nun die Probleme und wird uns eine elegante Lösung präsentieren ;

                  hatte leider erst abends Zeit, hier wieder reinzuschauen und habe mich dann gewundert, was fürn langer Thread draus geworden ist ;-)

                  Vielen Dank jedenfall, ich werde mir die Lösungen mal anschauen. In der Tat ist es so, dass es weder eine feste Breite oder Position geben soll und der Umbruch auch bei veränderter Breite noch klappen sollte. Wie es scheint, gibt es da keine wirklich perfekte Lösung, aber ich probiere es aus und wenn das Ergebnis nach was aussieht, melde ich mich.

                  Kai

              2. Hallo Stefan!

                Na, na, wer wird denn so schnell aufgeben wollen.
                Wenn es normal nicht klappt, muß man hallt die Verhonepipelungsversion rausholen. Sieht zwar etwas merkwürdig aus und ist auch nicht besonders Praxistauglich, funktioniert aber im Mozilla & Opera so
                halbwegs.

                <html>

                <head>
                  <style type="text/css">
                    p:after {
                      display:marker;
                      float:right;
                      text-align:right;
                      content:"(Copyright 2001 Stefan Einspender)";
                      padding-left:2em;

                /* Optional, damit der Umbruch nicht so 'schräg' aussieht.
                        min-width:30%;
                      */
                    }

                p {
                      background-color:#AAAAAA;
                    }
                  </style>
                </head>

                <body>
                  <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>
                </body>

                </html>

                Viele Grüße,
                Sönke

                1. Hallo Sönke,

                  Na, na, wer wird denn so schnell aufgeben wollen.

                  nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder
                  sage ich besser _nicht_ gesehen hast ... ;-)

                  Wenn es normal nicht klappt, muß man hallt die Verhonepipelungsversion rausholen. Sieht zwar etwas merkwürdig aus und ist auch nicht besonders Praxistauglich, funktioniert aber im Mozilla & Opera so
                  halbwegs.

                  wie schon gesagt, in den aktuellsten Varianten dieser Browser funk-
                  tioniert es nicht, vielleicht probiere ich gelegentlich noch etwas
                  rum, aber so richtig viel Hoffnung habe ich da nicht.
                  Am Ende gibt es bei 20 versch. Browser vielleicht 10 versch. Lösungen
                  und 15 Browser, in denen es überhaupt nicht funktioniert ;-)

                  Viele Grüße,
                  Stefan

                  1. Hallo.

                    nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder sage ich besser _nicht_ gesehen hast ... ;-)

                    Doch, doch. Habe ich! Sonst hätte ich das hier garnicht geschrieben. Also entweder ich habe Deine _Aufgabe_ falsch verstanden (wahrscheinlich) oder meine Opera 6.0B1 / Mozilla 0.96 können mehr als Deine (unwahrscheinlich). :)

                    Bei mir ist bei Opera nur anzumerken das er den Copyright-Text zu früh umbricht, so das ich das Fenster etwas weiter als nötig aufziehen muß.

                    Bilder gefällig?

                    <img src="http://www.cercamon.de/forum/opera.gif" border=0 alt="">

                    <img src="http://www.cercamon.de/forum/mozilla.gif" border=0 alt="">

                    Also habe ich es nicht verstanden???

                    Viele Grüße,
                    Sönke

                    1. Hallo Sönke, hallo Stefan!

                      nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder sage ich besser _nicht_ gesehen hast ... ;-)

                      @Stefan: Bist du etwa auch der Versuchung erlegen, den Quelltext aus Opera heraus zu kopieren? ;-)

                      Doch, doch. Habe ich! Sonst hätte ich das hier garnicht geschrieben. Also entweder ich habe Deine _Aufgabe_ falsch verstanden (wahrscheinlich) oder meine Opera 6.0B1 / Mozilla 0.96 können mehr als Deine (unwahrscheinlich). :)

                      Damit sieht es schon mal gar nicht schlecht aus. Nur: wie läßt sich denn nun wieder der Zeilenumbruch im Copyright-Vermerk unterbinden?

                      sollte man meinen, aber das wäre ja zu einfach gewesen. :-(

                      Semi-optimal ist das Ganze von wegen IE z.Zt. ja ohnehin noch.

                      Gruß,

                      kerki

                      1. Hallo,

                        @Stefan: Bist du etwa auch der Versuchung erlegen, den Quelltext aus Opera heraus zu kopieren? ;-)

                        wenn ich mich dazu jetzt einfach mal nicht äußere, sagt das alles *g*

                        Viele Grüße,
                        Stefan

                        PS: Ja Sönke, funktioniert auch im Mozilla 0.9.6 und Opera 6.0 B1 ;-)

          2. Hallo Stefan,

            Oder hat jemand eine Idee, wie ich

            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla                  (Copyright 2001 Stefan Einspender)

            mit CSS umsetzen kann?

            Opera (5.02) macht es bei mir richtig.
            alle anderen (IE5.5 NS6.1 NS4.6) stellen den autor zumindest rechts dar, wenn auch nicht genau in der selben zeile.

            <html>
            <head>
             <title>Untitled</title>
              <style type="text/css">
              #autor {
              display:block;
              text-align:right;
              float:right;
              }
              </style>
            </head>

            <body>
            <div>
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
            bla bla bla bla
            <span id="autor">Copyright 2001 Stefan Einspender)</span>
            </div>

            </body>
            </html>

            1. Hi, Thomas

              [...]

              Opera (5.02) macht es bei mir richtig.
              alle anderen (IE5.5 NS6.1 NS4.6) stellen den autor zumindest rechts dar, wenn auch nicht genau in der selben zeile.

              Aber es ging doch um

              <html>
              <head>
              <title>Untitled</title>
                <style type="text/css">
                #autor {
                display:block;
                text-align:right;
                float:right;
                }
                </style>
              </head>

              <body>

              <table width="100%"><tr><td>
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              <br>

              bla bla bla bla
              <span id="autor">Copyright 2001 Stefan Einspender)</span>

              </td></tr></table>

              </body>
              </html>

              Und das geht leider so nicht.

              LG Orlando

              1. hallo Orlando,

                Aber es ging doch um

                -----
                folgende Frage: Kann ich mit css _innerhalb_ einer Zeile
                ------
                keine spur von tabelle.
                zeile! nicht zelle! ich habe mich zuerst auch verlesen. ;-)

                grüße
                thomas

                ps:
                ert Kai dann Stefan ging es um:
                -----
                bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                bla bla bla bla                  (Copyright 2001 Stefan Einspender)
                ----

                und das ist so möglich (zumindest mit Opera)

                1. Hi, Thomas

                  Aber es ging doch um


                  folgende Frage: Kann ich mit css _innerhalb_ einer Zeile

                  keine spur von tabelle.
                  zeile! nicht zelle! ich habe mich zuerst auch verlesen. ;-)

                  Gut, jetzt ist die Brille geputzt und das Posting _genau_ gelesen. Verstehen muss ich's jetzt auch noch.

                  ps:
                  ert Kai dann Stefan ging es um:

                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                  bla bla bla bla                  (Copyright 2001 Stefan Einspender)

                  und das ist so möglich (zumindest mit Opera)

                  Ja, das sehe ich. Bevor wir weitere Haare spalten, sollten wir wissen: Ging's Kai jetzt um eine _definierte_ Zeile, oder um die gleiche Höhe im Browserfenster?

                  LG Orlando

                  PS: Stefan wollte doch nur seine Open Source Entwicklung vorstellen - demnächst mehr bei sourceforge! ;-)

            2. Hallo Thomas,

              *ruhigbleiben*

              Opera (5.02) macht es bei mir richtig.

              Opera 6.0 B1 nicht mehr, bei Opera 5.12 klappte es noch ;-)

              Man könnte den Namen natürlich auch auf die Höhe des Titels hin-
              setzen, dann steht der Name rechts und der Titel links.     (se)

              Diese Variante ist ja vergleichsweise "billig" nachzubauen:

              <div id="posting">
              <div style="float:left;">Mein tolles Posting</div>
              <div style="float:right;">von Stefan Einspender</div>
              <p style="clear:both">bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
              </div>

              Bitte nicht erschrecken, die Sache funktioniert auch im Netscape 4.77 ;-)

              Viele Grüße,
              Stefan

              PS:Obengenannter Quellcode ist weltweit geschützt, bei Weiterver-
                 wendung kann ein Zwangsabo des Homep@ge-Magazins nicht unter
                 30 Jahren als Strafe verhängt werden ;-)

            3. Hallo !

              Opera (5.02) macht es bei mir richtig.

              Bist du dir sicher, dass deine Version _richtig_ ist?

              Sie mag ja im Opera 5.12 (bei mir) so aussehen wie gewünscht, im Opera 6 ist dies aber nicht mehr der Fall.

              Opera6 setzt den Copyright-Vermerk genau wie Mozilla 0.9.5 einfach mit Leerschritt hinter den Text. IE 6 setzt ihn tiefer und nach rechts.

              Zudem lese ich bei in SELFHTML zu float u.a.:

              "right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen"
              und
                   "Wenn Sie für ein Element eine Angabe zu float notieren, müssen Sie auch eine Angabe zu width definieren"

              (siehe: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float)

              Dass mit den _nachfolgenden_ stimmt überdies für IE 6. Wenn man zwei deiner <div>-Blöcke untereinandersetzt (class statt id) beginnt der zweite Block links von (C) des ersten.

              Ich glaube, Stefans Aufgabe ist noch nicht gelöst. ;)

              Gruß,

              kerki