Links- und rechtsbündig in einer Zeile?
Kai Lewendoski
- css
Hi Leute,
folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
Kai
hallo,
folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
<table border="1">
<tr>
<td>
<p>folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
</p>
<p style="text-align:right;">Kai ...</p>
</td>
</tr>
</table>
grüße
thomas
Hallo Thomas,
<table border="1">
<tr>
<td>
<p>folgende Frage: Kann ich mit css _innerhalb_ einer Zeile einen Teil des Textes linksbündig ausrichten und einen anderen Teil rechtsbündig? So, dass der rechtsbündige Teil so steht, wie etwa ein Autorenname unter einem Zeitungsartikel...
</p>
<p style="text-align:right;">Kai ...</p>
</td>
</tr>
</table>
da habe ich jetzt wirklich überlegt, aber welchen Zweck erfüllt hier
die Tabelle?
[ ] keinen ?
Viele Grüße,
Stefan
hallo Stefan,
da habe ich jetzt wirklich überlegt, aber welchen Zweck erfüllt hier
die Tabelle?
[ ] keinen ?
[x] habe mich verlesen "zelle" ;-)
grüße
thomas
Hallo Thomas,
[x] habe mich verlesen "zelle" ;-)
passiert, vielleicht sollte man aber jetzt noch sagen, dass es wohl
keinen Weg gibt, sein Vorhaben zufriedenstellend zu lösen.
Oder hat jemand eine Idee, wie ich
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 (Copyright 2001 Stefan Einspender)
mit CSS umsetzen kann?
Erhöhter Schwierigkeitsgrad an dieser Stelle ist, dass der Text auch
noch skalierbar sein soll und wenn der Platz für (...) nicht mehr aus-
reicht, die Sache auf einer neuen Zeile (natürlich wieder nach rechts
ausgerichtet) stehen soll ;-)
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
(Copyright 2001 Stefan Einspender)
Viele Grüße,
Stefan
Hi, Stefan
[...]
Oder hat jemand eine Idee, wie ich
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 (Copyright 2001 Stefan Einspender)
Eine Eigenentwicklung? *g*
mit CSS umsetzen kann?
Wie wär`s mit
<p>bla...bla></p>
<p style="margin-top:-14px;">© 2001 orlando</p>?
Erhöhter Schwierigkeitsgrad an dieser Stelle ist, dass der Text auch
noch skalierbar sein soll und wenn der Platz für (...) nicht mehr aus-
reicht, die Sache auf einer neuen Zeile (natürlich wieder nach rechts
ausgerichtet) stehen soll ;-)
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
(Copyright 2001 Stefan Einspender)
Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...
LG Orlando
Hallo,
Eine Eigenentwicklung? *g*
klar, da steckt 'ne Menge Gehirnschmalz drin ;-)
<p>bla...bla></p>
<p style="margin-top:-14px;">© 2001 orlando</p>?
nö, damit steht es ja nicht wirklich in einer Zeile, da hat man nur
einen Workaround, der unter Optimalbedingungen vielleicht auch noch
funktioniert. Für den Praxiseinsatz würde ich sowas nicht benutzen.
Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...
Warum habe ich wohl diese Zeile hingeschrieben:
dass der Text auch noch skalierbar sein soll
?
Genau, weil ich auf solche Details viel Wert lege ;-)
Und selbst bei fester Tabellenbreite weiß ich nicht, wie das Layout
beim User aussieht, entweder ich müßte ihn dazu maximal bevormunden
oder aber sein Browser ist dazu überhaupt nicht in der Lage.
Übereinanderliegender Text sieht einfach sch... aus ;-)
Nix für ungut, da bleibt wohl die folgende Variante bestehen:
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (Copyright 2001 Stefan Einspender)
Ist nicht optimal, aber funktioniert in _jedem_ Browser :-)
Viele Grüße,
Stefan
Hi, Stefan
Eine Eigenentwicklung? *g*
klar, da steckt 'ne Menge Gehirnschmalz drin ;-)
Da steht wohl ein Software-Patent an ;-)
<p>bla...bla></p>
<p style="margin-top:-14px;">© 2001 orlando</p>?
nö, damit steht es ja nicht wirklich in einer Zeile, da hat man nur
einen Workaround, der unter Optimalbedingungen vielleicht auch noch
funktioniert. Für den Praxiseinsatz würde ich sowas nicht benutzen.
Sorry, habe _Zelle_ gelesen statt _Zeile_. Aber mit <span> und relativer Positionierung ließe sich auch noch etwas basteln. Da wären noch Layer usw.
Na da knall' ich doch einfach eine fixe Tabellenbreite hinein...
Warum habe ich wohl diese Zeile hingeschrieben:
dass der Text auch noch skalierbar sein soll
?
Genau, weil ich auf solche Details viel Wert lege ;-)
Und ich wollte einfach nur recht haben ... erwischt, na sowas! Wenn ich solch ein Layout aber unbedingt <- will, bleibt mir wohl keine andere Möglichkeit. Es gibt durchaus Gründe für eine feste Tabellenbreite.
Und selbst bei fester Tabellenbreite weiß ich nicht, wie das Layout
beim User aussieht, entweder ich müßte ihn dazu maximal bevormunden
oder aber sein Browser ist dazu überhaupt nicht in der Lage.
Übereinanderliegender Text sieht einfach sch... aus ;-)
Wenn sein Browser Stylesheets nicht (vollständig) unterstützt, ändert sich mit einem <span> ja ohnehin nichts am Layout und er sieht ...
Nix für ungut, da bleibt wohl die folgende Variante bestehen:
... genau das:
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (Copyright 2001 Stefan Einspender)
Patent erteilt!
Ist nicht optimal, aber funktioniert in _jedem_ Browser :-)
Für das Problem laut Thread gibt es keine _optimale_ Lösung, aber viele Wege führen nach Rom. Kai kennt nun die Probleme und wird uns eine elegante Lösung präsentieren ;-)
LG Orlando
Hi Leute,
Für das Problem laut Thread gibt es keine _optimale_ Lösung, aber viele Wege führen nach Rom. Kai kennt nun die Probleme und wird uns eine elegante Lösung präsentieren ;
hatte leider erst abends Zeit, hier wieder reinzuschauen und habe mich dann gewundert, was fürn langer Thread draus geworden ist ;-)
Vielen Dank jedenfall, ich werde mir die Lösungen mal anschauen. In der Tat ist es so, dass es weder eine feste Breite oder Position geben soll und der Umbruch auch bei veränderter Breite noch klappen sollte. Wie es scheint, gibt es da keine wirklich perfekte Lösung, aber ich probiere es aus und wenn das Ergebnis nach was aussieht, melde ich mich.
Kai
Hallo Stefan!
Na, na, wer wird denn so schnell aufgeben wollen.
Wenn es normal nicht klappt, muß man hallt die Verhonepipelungsversion rausholen. Sieht zwar etwas merkwürdig aus und ist auch nicht besonders Praxistauglich, funktioniert aber im Mozilla & Opera so
halbwegs.
<html>
<head>
<style type="text/css">
p:after {
display:marker;
float:right;
text-align:right;
content:"(Copyright 2001 Stefan Einspender)";
padding-left:2em;
/* Optional, damit der Umbruch nicht so 'schräg' aussieht.
min-width:30%;
*/
}
p {
background-color:#AAAAAA;
}
</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.</p>
</body>
</html>
Viele Grüße,
Sönke
Hallo Sönke,
Na, na, wer wird denn so schnell aufgeben wollen.
nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder
sage ich besser _nicht_ gesehen hast ... ;-)
Wenn es normal nicht klappt, muß man hallt die Verhonepipelungsversion rausholen. Sieht zwar etwas merkwürdig aus und ist auch nicht besonders Praxistauglich, funktioniert aber im Mozilla & Opera so
halbwegs.
wie schon gesagt, in den aktuellsten Varianten dieser Browser funk-
tioniert es nicht, vielleicht probiere ich gelegentlich noch etwas
rum, aber so richtig viel Hoffnung habe ich da nicht.
Am Ende gibt es bei 20 versch. Browser vielleicht 10 versch. Lösungen
und 15 Browser, in denen es überhaupt nicht funktioniert ;-)
Viele Grüße,
Stefan
Hallo.
nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder sage ich besser _nicht_ gesehen hast ... ;-)
Doch, doch. Habe ich! Sonst hätte ich das hier garnicht geschrieben. Also entweder ich habe Deine _Aufgabe_ falsch verstanden (wahrscheinlich) oder meine Opera 6.0B1 / Mozilla 0.96 können mehr als Deine (unwahrscheinlich). :)
Bei mir ist bei Opera nur anzumerken das er den Copyright-Text zu früh umbricht, so das ich das Fenster etwas weiter als nötig aufziehen muß.
Bilder gefällig?
<img src="http://www.cercamon.de/forum/opera.gif" border=0 alt="">
<img src="http://www.cercamon.de/forum/mozilla.gif" border=0 alt="">
Also habe ich es nicht verstanden???
Viele Grüße,
Sönke
Hallo Sönke, hallo Stefan!
nachdem Du es in Opera 6.0 B1 und in Mozilla 0.9.6 gesehen, oder sage ich besser _nicht_ gesehen hast ... ;-)
@Stefan: Bist du etwa auch der Versuchung erlegen, den Quelltext aus Opera heraus zu kopieren? ;-)
Doch, doch. Habe ich! Sonst hätte ich das hier garnicht geschrieben. Also entweder ich habe Deine _Aufgabe_ falsch verstanden (wahrscheinlich) oder meine Opera 6.0B1 / Mozilla 0.96 können mehr als Deine (unwahrscheinlich). :)
Damit sieht es schon mal gar nicht schlecht aus. Nur: wie läßt sich denn nun wieder der Zeilenumbruch im Copyright-Vermerk unterbinden?
sollte man meinen, aber das wäre ja zu einfach gewesen. :-(
Semi-optimal ist das Ganze von wegen IE z.Zt. ja ohnehin noch.
Gruß,
kerki
Hallo,
@Stefan: Bist du etwa auch der Versuchung erlegen, den Quelltext aus Opera heraus zu kopieren? ;-)
wenn ich mich dazu jetzt einfach mal nicht äußere, sagt das alles *g*
Viele Grüße,
Stefan
PS: Ja Sönke, funktioniert auch im Mozilla 0.9.6 und Opera 6.0 B1 ;-)
Hallo Stefan,
Oder hat jemand eine Idee, wie ich
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 (Copyright 2001 Stefan Einspender)
mit CSS umsetzen kann?
Opera (5.02) macht es bei mir richtig.
alle anderen (IE5.5 NS6.1 NS4.6) stellen den autor zumindest rechts dar, wenn auch nicht genau in der selben zeile.
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#autor {
display:block;
text-align:right;
float:right;
}
</style>
</head>
<body>
<div>
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 id="autor">Copyright 2001 Stefan Einspender)</span>
</div>
</body>
</html>
Hi, Thomas
[...]
Opera (5.02) macht es bei mir richtig.
alle anderen (IE5.5 NS6.1 NS4.6) stellen den autor zumindest rechts dar, wenn auch nicht genau in der selben zeile.
Aber es ging doch um
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#autor {
display:block;
text-align:right;
float:right;
}
</style>
</head>
<body>
<table width="100%"><tr><td>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<br>
bla bla bla bla
<span id="autor">Copyright 2001 Stefan Einspender)</span>
</td></tr></table>
</body>
</html>
Und das geht leider so nicht.
LG Orlando
hallo Orlando,
Aber es ging doch um
-----
folgende Frage: Kann ich mit css _innerhalb_ einer Zeile
------
keine spur von tabelle.
zeile! nicht zelle! ich habe mich zuerst auch verlesen. ;-)
grüße
thomas
ps:
ert Kai dann Stefan ging es um:
-----
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 (Copyright 2001 Stefan Einspender)
----
und das ist so möglich (zumindest mit Opera)
Hi, Thomas
Aber es ging doch um
folgende Frage: Kann ich mit css _innerhalb_ einer Zeile
keine spur von tabelle.
zeile! nicht zelle! ich habe mich zuerst auch verlesen. ;-)
Gut, jetzt ist die Brille geputzt und das Posting _genau_ gelesen. Verstehen muss ich's jetzt auch noch.
ps:
ert Kai dann Stefan ging es um: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 (Copyright 2001 Stefan Einspender)
und das ist so möglich (zumindest mit Opera)
Ja, das sehe ich. Bevor wir weitere Haare spalten, sollten wir wissen: Ging's Kai jetzt um eine _definierte_ Zeile, oder um die gleiche Höhe im Browserfenster?
LG Orlando
PS: Stefan wollte doch nur seine Open Source Entwicklung vorstellen - demnächst mehr bei sourceforge! ;-)
Hallo Thomas,
*ruhigbleiben*
Opera (5.02) macht es bei mir richtig.
Opera 6.0 B1 nicht mehr, bei Opera 5.12 klappte es noch ;-)
Man könnte den Namen natürlich auch auf die Höhe des Titels hin-
setzen, dann steht der Name rechts und der Titel links. (se)
Diese Variante ist ja vergleichsweise "billig" nachzubauen:
<div id="posting">
<div style="float:left;">Mein tolles Posting</div>
<div style="float:right;">von Stefan Einspender</div>
<p style="clear:both">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</p>
</div>
Bitte nicht erschrecken, die Sache funktioniert auch im Netscape 4.77 ;-)
Viele Grüße,
Stefan
PS:Obengenannter Quellcode ist weltweit geschützt, bei Weiterver-
wendung kann ein Zwangsabo des Homep@ge-Magazins nicht unter
30 Jahren als Strafe verhängt werden ;-)
Hallo !
Opera (5.02) macht es bei mir richtig.
Bist du dir sicher, dass deine Version _richtig_ ist?
Sie mag ja im Opera 5.12 (bei mir) so aussehen wie gewünscht, im Opera 6 ist dies aber nicht mehr der Fall.
Opera6 setzt den Copyright-Vermerk genau wie Mozilla 0.9.5 einfach mit Leerschritt hinter den Text. IE 6 setzt ihn tiefer und nach rechts.
Zudem lese ich bei in SELFHTML zu float u.a.:
"right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen"
und
"Wenn Sie für ein Element eine Angabe zu float notieren, müssen Sie auch eine Angabe zu width definieren"
(siehe: http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#float)
Dass mit den _nachfolgenden_ stimmt überdies für IE 6. Wenn man zwei deiner <div>-Blöcke untereinandersetzt (class statt id) beginnt der zweite Block links von (C) des ersten.
Ich glaube, Stefans Aufgabe ist noch nicht gelöst. ;)
Gruß,
kerki