Jeena Paradies: Text rechts und Linksbuendig

Hallo,

In ASCII-Art wuerde das was ich versuche zu machen in etwa so aussehen:

**text1********************************text2 TEXT3**
**------------------------------------------------**

Die Sternchen sollen die Hintergrundfarbe darstellen und die Minuse unten einen Strich von 1px. Es soll also ein bischen Abstand rein dann Text1 linksbuendig und dann Text2 und TEXT3 rechtsbuendig, wobei TEXT3 in 2em geschrieben wird.

Mein erster Versuch war: <p>text1 <span>text2 <strong>TEXT3</strong></span></p> und dem span dann float: right; line-height: 0; text-align: right; width: 100%; border-bottom: 1px solid black; zu geben. Klappt im Opera so wie ich das wollte, aber im IE und Fx gibt es vom text1 zum border leider mehr abstand als bei text2 und TEXT3.

Der zweite Versuch war eine Tayouttabelle, die ich per padding auf dem Hintergrund so setze, dass dieser rechts und Links herausguckt und dann den tds den border gebe. Klappt im Opera und Fx wunderbar, im IE nicht, der springt auf das padding bei table nicht an.

Kennt einer Von euch noch irgendeine sinnvolle möglichkeit, ausser der Layouttabelle noch rechts und Links zwei leere Zellen zu geben?

Grüße
Jeena Paradies

--
Steuererklärung online gar nicht so einfach | Jlog | Gourmetica Mentiri
  1. wobei TEXT3 in 2em geschrieben wird.
    aber im IE und Fx gibt es vom text1 zum border leider mehr abstand als bei text2 und TEXT3.

    Das liegt vermutlich an dem 2 em großen TEXT3. Hast du's mal mit Text in der gleichen Größe probiert, ob es dann hinhaut? Wenn ja, könnte man vielleicht über vertical-align: text-bottom; oder einer min-height für alle Elemente was lösen.

    Viele Grüße!
    _ds

    --
    Der Druck von außen wurde in den letzten Monaten immer größer. So ging etwa durch die Medien, dass US-Rapsängerin Missy Elliott ihrem Yorkshire-Terrier ein mit Brillanten verziertes Hunde-T-Shirt (1500 Dollar) mit der Aufschrift »Ich hasse Tinkerbell« kaufte.
    Medienrauschen, Paris und Tinkerbell: Henne. Hahn.
    1. Hallo,

      Das liegt vermutlich an dem 2 em großen TEXT3. Hast du's mal mit Text in der gleichen Größe probiert, ob es dann hinhaut? Wenn ja, könnte man vielleicht über vertical-align: text-bottom; oder einer min-height für alle Elemente was lösen.

      Danke euch beiden, werde mal noch etwas rumpfuschen, ideal ist das aber alles nicht wirklich, vor allem nervt es mich, da genau diese Aufgabenstellung zur zeit sehr häufig vorkommt bei mir.

      Grüße
      Jeena Paradies

      --
      Steuererklärung online gar nicht so einfach | Jlog | Gourmetica Mentiri
  2. hi,

    Mein erster Versuch war: <p>text1 <span>text2 <strong>TEXT3</strong></span></p>

    Was hältst du davon, wenn du darauf mal

    span { display:block; position:relative; text-align:right; border-bottom:1px solid #000; margin-top:-1.9em; padding-bottom:0; }  
    strong { font-size:2em; line-height:1em; }
    

    anwendest ...?

    Sieht doch schon ganz passabel aus, finde ich.

    Das position:relative braucht der IE, da der sonst auf grund des "Hochziehens" über negatives margin-top unsinnigerweise den oberen Teil von Text3 abschneidet.
    Und durch eben dieses "Hochziehen" eignet es sich natürlich auch nur dann, wenn die Texte allesamt so kurz sind, dass keine Überlagerungen bei zu geringer Breite von p zu befürchten sind.

    Wenn du den Rahmen näher am Text haben willst, dann musst du mal ein bisschen mit der line-height für strong und dem negativen margin-top für span herumspielen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }