[CSS] Text in einer Zeile links und rechtsbündig?

tobias-digital · #1 (**permalink**) 13.06.2005, 11:40

Hallo!

Ich bastel momentan daran das angehängte Layout mit CSS umzusetzen.

Das Problem ist der "mehr"-Link. Ich will das der Text linksbündig steht, der "mehr"-Link jedoch rechts ausgerichtet ist. Geht das irgendwie mit CSS?

Danke und Grüße, Tobias

mazzo · #2 (**permalink**) 13.06.2005, 11:56

float sollte da helfen.

tobias-digital · #3 (**permalink**) 13.06.2005, 12:00

Hm, also das hab ich schon probiert, und zwar so (ich mach die Styles mal inline):

Code:

lorem ipsum <span style="float: right;">mehr...</span></p>

Das hat aber nur bewirkt, dass der "mehr"-Link zwar rechtsbündig, aber in eine neue Zeile wandert. Er soll aber in der gleichen Zeile stehen.

ulle · #4 (**permalink**) 13.06.2005, 12:05

Und was passiert wenn der "normale" Text erst am Ende der Zeile fertig ist, also bis ganz nach rechts geht?

mazzo · #5 (**permalink**) 13.06.2005, 12:13

Code:

<div style="width: 50%;border: 1px dotted #F00;">
allgemeiner Text allgemeiner Textallgemeiner Text allgemeiner Text allgemeiner Text allgemeiner Text allgemeiner Text allgemeiner Text
allgemeiner Text allgemeiner Text allgemeiner Text allgemeiner Text allgemeiner Text 
<span style="float: right; font-size: 10px; color: #0F0;">mehr...</span>
allgemeiner Text allgemeiner Text allgemeiner Text 
</div>

Es kommt wohl drauf an wo der span im umgebenden text steht.
Ansonsten kannst Du dem flaot bei einer fixen Breite der Box ja den margin-left mitgeben, um es rechts anzuordnen.

tobias-digital · #6 (**permalink**) 13.06.2005, 12:43

Zitat:

Zitat von ulle

Und was passiert wenn der "normale" Text erst am Ende der Zeile fertig ist, also bis ganz nach rechts geht?

Dann ist es OK wenn der Text umbricht, nur rechtsbündig soll es stehen.

wahsaga · #7 (**permalink**) 13.06.2005, 14:44

ist so mit float m.E. nicht zu machen.

ist aber m.E. sowieso sinnvoller, wenn der ">> mehr"-link in einer neuen zeile steht.

stell dir die möglichkeit vor, dass der fließtext in der letzten zeile gerade noch genug platz für das ">> mehr" auf der gleichen zeile lassen würde (sehr leicht möglich, denn auf die wirkliche darstellung der schrift in meinem browser hast du ja nur bedingt einfluss),

Code:

lorem ipsum blah laber
sülz blah quasel jodel
grmpf hihi aha >> mehr

dieser ">> mehr"-link am ende dieses absatzes lässt sich jetzt beim groben optischen "abscannen" des seiteninhaltes nicht mehr so schnell erkennen (insbesondere, wenn du dein im beispiel gezeigtes farbschema beibehalten wolltest.)

Code:

lorem ipsum blah laber
sülz blah quasel jodel
grmpf hihi aha
               >> mehr

das ist für mich als nutzer sehr viel schöner; selbst bei nicht so stark vom text abgrenzend formatierten links erkenne ich hier den ">> mehr"-link optisch viel schneller, weil er sich vom textabsatz abhebt.

toscho · #8 (**permalink**) 13.06.2005, 15:13

Vielleicht hilft dir dieser Beitrag weiter?
http://www.xhtmlforum.de/viewtopic.php?p=6324#6324

tobias-digital · #9 (**permalink**) 13.06.2005, 15:19

Hi!

Danke für die ganzen Tipps. Nach endlosem ausprobieren diverser Lösungsansätze bin ich zu dem Schluss gekommen, dass das Layout in dieser Form nicht umzusetzen ist.

Ich werde das "mehr" wohl (wie schon von wahsaga angemerkt) in die nächste Zeile rechts ausgerichtet setzen. Ist wahrscheinlich besser.

Gruß, Tobias

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Float und Clear	Earl of Green	CSS	3	22.02.2009 19:48
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 14:14
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 21:03
Internet Explorer verschluckt Grafik	Webentwickler Eric	CSS	4	06.07.2007 15:53
Falsche Darstellung beim Internet Explorer	LordAvalon	CSS	4	09.04.2007 17:22