Dirk: Position von Textlayern geht schief...

Hallo,

ich habe gerade mal meine Seiten etwas umgestellt -> http://www.dirkleyhe.de
Eigentlich sollten die Textlayer die in der Überschrift übereinander sind sich rechts bündig anordnen.
Dummerweise tun sie das natürlich nicht. Je länger der Text der Überschrift ist, desto weiter geht die große Schrift dabei nach links und wandert mir dabei auf das Logo :(
Die Schriften sind mit CSS formatiert:

<span style="text-align:right; font-weight:700; font-size:75; color:#EDEEF4; font-family=Arial; position:relative; top:5px; right:00px"><i>|</i></span>

<span style="font-size:20; color:#80A9EC; font-family=Arial; position:relative; top:5px; right:50px"><i>|</i></span>

Dort wo die beiden | sind, kommt jeweils der Text der überschrift rein... Wird automatisch von Typo3 gesetzt, hat also nichts mit HTML oder CSS zu tun.

Wie kann ich verhindern, dass die Schrift auswandert? (Klickt mal auf die links Home und Badminton, dann werdet ihr sehen was ich meine. Schießen habe ich schon abgeändert, das war vorher Bogenschießen, aber da wanderte die Schrift schon fast aus dem Bild...)

  1. es wird noch schlimmer, wenn man den Viewport (Browserfenster) verkleinert wandert die Schrift immer mehr da hinein...

    du mußt ganz offensichtlich die Breite der ersten Tabellenzelle "fixieren" und gleichzeitig etwas größer machen als die aktuellen 800, dazu ein overflow:hidden / table-layout:fixed und dann sollte es gehen

    mfG
    Micha

  2. Hi,

    <span style="text-align:right; font-weight:700;
    font-size:75;

    Das ist gleichbedeutend mit font-size:medium

    color:#EDEEF4;

    font-family=Arial;

    Das kannst Du auch ganz weglassen.

    position:relative; top:5px; right:00px"><i>|</i></span>

    <span style="font-size:20;

    Das ist gleichbedeutend mit font-size:medium

    color:#80A9EC;

    font-family=Arial;

    Das kannst Du auch ganz weglassen.

    position:relative; top:5px; right:50px"><i>|</i></span>

    Korrigiere doch bitte erstmal alle Fehler im Code. Sowohl im HTML als auch im CSS. Vorher hat es wenig Sinn, über die Darstellung nachzudenken.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    http://www.schreinerei-waechter.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo,

      vielen Dank für eure Antworten, bin aber selbst drauf gekommen.

      1. Im Code ist kein Fehler!
      Das was du meinst ist nicht richtig. Immerhin kann ich doch mehrere Formatoptionen angeben und brauche keine Wollmilchlegende Eiersau.

      Das Problem ist wie folgt: Eigentlich sind es ja zwei Worte, die hintereinander gesetzt sind. Dann wird das vordere um 50 Pixel nach links verschoben. Dabei geht man aber von der Grundposition aus. Bei einem Langen Wort ist aber die Grundposition viel weiter links. Von daher wird die große Überschrift viel weiter versetzt als bei kurzen Worten.

      Grüsse

      Dirk

      1. Hi,

        1. Im Code ist kein Fehler!

        Im Code sind einige Fehler. Die habe ich genannt. Wenn Du sie verleugnest, ist das Dein Problem.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.