Philipp Grashoff: Text ganz links + Text ganz rechts in einer Zeile

Hi all!

Nachdem ich aus dem Urlaub zurueck bin, fuehle ich mich irgendwie wie ein HTML-Newbie, der nix kapiert... und sitze seit 2 Stunden vor einem scheinbar billigem Problem:

Ich habe ein div mit variabler Hoehe und Breite, in dem will ich Zeilenweise Text platzieren, wo ein Teil linksbuendig und ein anderer rechtsbuendig ist.... sollte doch eigentlich einfach sein. Tabellen will ich nicht benutzen, mit float: gehts auch net, weil nachfolgende Elemente in den Zwischenraum rutschen.

MFG

Philipp

  1. Hi all!

    Nachdem ich aus dem Urlaub zurueck bin, fuehle ich mich irgendwie wie ein HTML-Newbie, der nix kapiert... und sitze seit 2 Stunden vor einem scheinbar billigem Problem:

    Ich habe ein div mit variabler Hoehe und Breite, in dem will ich Zeilenweise Text platzieren, wo ein Teil linksbuendig und ein anderer rechtsbuendig ist.... sollte doch eigentlich einfach sein. Tabellen will ich nicht benutzen, mit float: gehts auch net, weil nachfolgende Elemente in den Zwischenraum rutschen.

    MFG

    Philipp

    Hallo,
    such mal nach display:inline ;)
    Mark

    1. Hi Mark,

      leider hat das nichts gebracht: sobald man bsp. ein div mit display:inline ausruestet erstreckt es sich nichtmehr ueber nur eine ganze Zeile, sondern nur noch soweit wie sein Inhalt, und dann steht man vor dem gleichen Problem ;(

      MFG

      Philipp

  2. Moin!

    Nachdem ich aus dem Urlaub zurueck bin, fuehle ich mich irgendwie wie ein HTML-Newbie, der nix kapiert... und sitze seit 2 Stunden vor einem scheinbar billigem Problem:

    Ich habe ein div mit variabler Hoehe und Breite, in dem will ich Zeilenweise Text platzieren, wo ein Teil linksbuendig und ein anderer rechtsbuendig ist.... sollte doch eigentlich einfach sein. Tabellen will ich nicht benutzen, mit float: gehts auch net, weil nachfolgende Elemente in den Zwischenraum rutschen.

    <div class="deinDIV">
    <div class="links">Linker Text</div>
    <div class="rechts">Rechter Text</div>
    <!--beliebig abwechseln-->
    </div>

    Die Klassendefinition lautet dann:
    .links { text-align:left; }
    .rechts { text-align:right; }

    - Sven Rautenberg

    1. Hi!

      Das geht eben nicht, da die browser jedes neue Div in einer Neuen Zeile anzeigen... ich brauch aber beides in der gleichen Zeile....

      MFG

      Philipp

      1. Yo!

        Das geht eben nicht, da die browser jedes neue Div in einer Neuen Zeile anzeigen... ich brauch aber beides in der gleichen Zeile....

        Ich dachte mir sowas.

        .links { text-align:left; float:left; width:50%; }
        .rechts { text-align:right; clear:left; width:50%;}

        Hoffentlich geht das auch.

        - Sven Rautenberg

        1. Hi Sven,

          nein, das geht leider auch nicht, weil der IE so ungleichlich dumm ist und Prozentangaben auf die Weite des Anzeigefensters anstatt auf die Breite des Elternelements interpretiert... und da ich eine Variable breite habe mit zwei balken, die eine feste Groeße haben, geht das leider auch net ;(

          MFG

          Philipp

          P.s.: Er interpretierts sogar noch falscher zzzz

          1. Yo!

            nein, das geht leider auch nicht, weil der IE so ungleichlich dumm ist und Prozentangaben auf die Weite des Anzeigefensters anstatt auf die Breite des Elternelements interpretiert... und da ich eine Variable breite habe mit zwei balken, die eine feste Groeße haben, geht das leider auch net ;(

            Dann laß für rechts die Breitenangabe weg und nimm für links eine feste Angabe in Pixeln.

            Sei kreativ. ;)

            - Sven Rautenberg

  3. Hi all!

    Nachdem ich aus dem Urlaub zurueck bin, fuehle ich mich irgendwie wie ein HTML-Newbie, der nix kapiert... und sitze seit 2 Stunden vor einem scheinbar billigem Problem:

    Ich habe ein div mit variabler Hoehe und Breite, in dem will ich Zeilenweise Text platzieren, wo ein Teil linksbuendig und ein anderer rechtsbuendig ist.... sollte doch eigentlich einfach sein. Tabellen will ich nicht benutzen, mit float: gehts auch net, weil nachfolgende Elemente in den Zwischenraum rutschen.

    MFG

    Philipp

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <html>
    <head>
    <title>inliner</title>
    <style>
      #kasten {
        position:absolute;
        left:100px;
        top:100px;
        width:400px;
        height:100px;
        background:#d3d3d3;
        border:1px solid #696969;
        }
      #inlinediv {                  /* 300px breiter Bereich innerhalb des kastens            */
                                    /* zur Demo, dass sich die mit display:inline markierten  */
                                    /* Bereiche sich nicht über den ganzen kasten verteilen   */
        width:300px;
        font:400 11px verdana;
        color:#000;
        background:#fff;
        }
      .links {
        display:inline;
        float:left;
        }
      .rechts {
        display:inline;
        float:right;
        }
    </style>
    </head>

    <body>
      <div id="kasten">
        <div id="inlinediv">
          <span class="links">links</span>
          <span class="rechts">rechts</span>
        </div>
      </div>
    </body>

    </html>

    1. Hi all!

      <style>
        #kasten {
          position:absolute;
          left:100px;
          top:100px;
          width:400px;
          height:100px;
          background:#d3d3d3;
          border:1px solid #696969;
          }

      Nachdem ich CSS erst nur widerwillig benutzt habe...
      Kurze dumme Zwischenfrage.

      Kann man die position:absolute eigentlich dynamisch verändern? Also z.B. den Kasten mit seinem ganzen Inhalt mit der Maus über den Bildschirm schieben (und das Ergebnis natürlich nachher abspeichern).

      Bitte erschlagt mich nicht mit langen Schimpftexten. Ein paar Links würde es auch tun ;-))

      Gruß

      Tom

      1. Moin!

        <style>
          #kasten {
            position:absolute;
            left:100px;
            top:100px;
            width:400px;
            height:100px;
            background:#d3d3d3;
            border:1px solid #696969;
            }

        Nachdem ich CSS erst nur widerwillig benutzt habe...
        Kurze dumme Zwischenfrage.

        Kann man die position:absolute eigentlich dynamisch verändern? Also z.B. den Kasten mit seinem ganzen Inhalt mit der Maus über den Bildschirm schieben (und das Ergebnis natürlich nachher abspeichern).

        Im Prinzip ja, aber nur durch intensive Anhäufung von Javascript - und möglicherweise serverseitigen Aktionen. Im DHTML-Kapiten von SelfHTML sollte dazu mehr stehen, und in der alten 7er-Version war IIRC auch ein Beispiel zum Verschieben mit der Maus drin - keine Ahnung, ob in der 8er-Version auch noch - da hab ich noch nicht nachgeschaut. Aber da du ja meinst:

        Bitte erschlagt mich nicht mit langen Schimpftexten. Ein paar Links würde es auch tun ;-))

        sage ich einfach http://selfhtml.teamone.de - Links folgen kannst du ja offensichtlich. :) Und selbersuchen macht schlau. ;)

        - Sven Rautenberg