Text auf einer Höhe an drei Breiten flexibel positionieren

[.wired]

Hi,

Ich möchte gerne 3 Kleine Wörter auf einer Höhe einer Seite positionieren, und zwar das erste Wort ganz links, das zweite in der Mitte und das dritte ganz rechts. Außerdem sollte das Erscheinungsbild dieser drei Wörter bei verschiedenen Auflösungen undverändert bleiben.


MfG .wired

[Manuel]

Also spontan würde ich sagen:
3 Div-Layer, einer float:left, einer float:right und einer margin:0px auto;
Müssen wahrscheinlich nicht mals div-Layer sein, aber probiers doch mal so in der Art aus?!

Lg,
Manuel

[.wired]

Eben das hab ich versucht... Ich habe auch schon alle drei Wörter versucht in eine Box zu tun und jeweils mit span und individuellem text-align zu verzieren. Alles nix geworden. Entweder die Wörter sind nicht mehr auf einer Höhe oder das ganze bricht ins totale Chaos aus, nur das mittlere Wort hat bisher immer seine richtige Position eingehalten.

MfG .wired

[veNom]

Nicht in 1 Div-Box sondern in 3 verschiedene, meint Manuel.

Code: Alles auswählen

<div id="left">Text links</div><div id="middle">Text Mitte</div><div id="right">Text Rechts</div

#left {
width: auto;
float: left;
}
#middle {
margin: 0 auto;
width: auto;
#right {
width: auto;
float: right;
}

So meint Manuel das wohl, hab es nicht getestet...

[.wired]

Eben das hab ich versucht... Ich habe auch...

Ich versuchs aber nochmal, denn an "width: auto;" habe ich nicht gedacht, vielleicht lags ja daran

MfG .wired

[.wired]

Nope. Funktioniert leider nicht.

MfG .wired

[Ingo]

Hi.
Leichte Variante, mit text-align:

Code: Alles auswählen

CSS:

#left   { float: left; }
#right  { float: right; text-align:right; }
#middle { text-align:center; }

HMTL:

<div id="left">  Text links </div>
<div id="right"> Text Rechts</div>
<div id="middle">Text Mitte </div>


Die Reihenfolge der Divs im HTML-Text ist wichtig: das div#middle muss
hinter den float-Divs stehen. - Evtl. noch eine Box um alle 3 Divs, um sie
'im Paket' verschieben zu können? - Wie auch immer

[.wired]

Hmmm... Jetzt sind die beiden Worte links und rechts auf einer Ebene, und das mittlere ist unten

MfG .wired

<edit> Mein Fehler, klappt wunderbar. Worin der jetzt lag, sag ich nicht, sonst tragt ihr mir das ewig nach Nur sieht man häufiger den Wald vor lauter Bäumen nicht xD </edit>