innerhalb eines <P>-elements ein <SPAN> ausrichten?

L

loginvergessen

Aktives Mitglied
Thread Starter
Dabei seit
03.05.2006
Beiträge
313
Reaktionspunkte
15
hallo,

ich habe ein problem mit der formatierung von texten und möchte gerne wissen, ob mir hier jemand einen tip geben kann, oder ob mein vorhaben gar nicht möglich ist.

also: meine textblöcke (zwischen <p> und </p>) sehen so aus:

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla [BLUBB]


das BLUBB steht zwischen <span>-tags einer bestimmten klasse. gibt es eine möglichkeit, diese SPAN-elemente per CSS nach rechts, ans ende der zeile zu rücken?

also so - natürlich ohne punkte!:
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla.......................................[BLUBB]


:noplan:
 
Einfach Für die Class von dem <Span>
Code: 
text-align: right;

Oder habe ich ich falsch verstanden?
 
Jass schrieb:
Einfach Für die Class von dem <Span>
Code: 
text-align: right;
Zum Vergrößern anklicken....
nein
Jass schrieb:
Oder habe ich ich falsch verstanden?
Zum Vergrößern anklicken....
ja.
deine lösung richtet das BLUBB innerhalb des SPANs nach rechts aus - bewirkt also nix, da das SPAN beim 3. B schon zu ende ist :)
 
Ich würd das mittels eines Tricks machen:

Notier das <span> da drunter, und richte es Rechts aus.
Dann läst Du es noch eine Zeile nach oben verrücken, mittels "position:relative; top:-123em", wobei 123 für die Entsprechende Höhe steht (spontan würd ich so einen Wert um die "1" vermuten).
Der Trick ist halt die negative Angabe :)

Das wäre zumindest EINE Möglichkeit von sicherlich noch vielen.
 
koli.bri schrieb:
Ich würd das mittels eines Tricks machen:

Notier das <span> da drunter, und richte es Rechts aus.
Dann läst Du es noch eine Zeile nach oben verrücken, mittels "position:relative; top:-123em", wobei 123 für die Entsprechende Höhe steht (spontan würd ich so einen Wert um die "1" vermuten).
Der Trick ist halt die negative Angabe :)

Das wäre zumindest EINE Möglichkeit von sicherlich noch vielen.
Zum Vergrößern anklicken....

guter ansatz, funktioniert aber nicht. habs ausprobiert: sobald das bla bla bis FAST ans zeilenende geht, überlappen sich bla und BLUBB. schade...
 
Wie wäre es mit floaten?
für den Span:
.rechts {
float: right;
}
 
imperfekt schrieb:
Wie wäre es mit floaten?
für den Span:
.rechts {
float: right;
}
Zum Vergrößern anklicken....

hm. in safari funktioniert das prima. firefox (PC und mac) sowie IE 6 (PC) rücken das BLUBB trotzdem in eine neue zeile.
rechts steht es bei allen 4 browsern.
 
Das ist mir aus dem Kopf gefallen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>RightBlock</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
border: 0;
}

p {
padding-right: 1em;
line-height: 1.5em;
background-color: #999;
}

p span {
margin-top: -1.5em;
display: block;
text-align: right;
}
-->
</style>
</head>

<body>

<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla <span>[BLUBB]</span></p>

</body>
</html>
Zum Vergrößern anklicken....

Funktioniert unter Windows: IE6/IE7/FF und am Mac: Safari/FF soweit ganz gut. Ein bisschen zu verfeinern wäre das ganze noch bzgl. der Buchstabenüberschneidungen bei bestimmten Browserbreiten ( z. B. mit [&nbsp;] )...


2nd
 
2ndreality schrieb:
Das ist mir aus dem Kopf gefallen:
Zum Vergrößern anklicken....

danke, habe das mal ausprobiert. leider habe ich es nicht hinbekommen, bei bestimmten längen des bla-bla-textes die überschneidungen mit dem blubb wegzubekommen.
mittlerweile haben wir uns aber eh' für eine andere lösung entschieden, also ist es nicht so tragisch.




danke für all eure ideen!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten