nicht angemeldet
Überschrift mit align im Text
Hallo,
wahrscheinlich ist die Antwort völlig trivial, ich krieg es aber nicht hin
und das Archiv ist leider nicht zugänglich ....
Also:
Ich möchte eine Überschrift so gestalten, dass sie so ausschaut:
"Ueberschrift text text ... 20.10.03"
Und das Datum soll in der selben Zeile ganz am rechten Rand stehen. div align=right macht ja leider
einen Zeilenumbruch :-(
Dank und Gruß,
Petra
-
Hi Petra,
ich nehme für sowas einfach eine Tabelle mit 2 Spalten. Ist halt die langweiligste Lösung *g* Vielleicht gibt es ja noch eine andere.
Gruß
Ben-
deine überschrift<span align="right">datum</span>
versuch's mal damit, weiß nicht ob's klappt, theoretisch könnte es aber gehen :)
zumindest macht das <span>-tag keinen zeilenumbruch wie <div>-
Hallo Günther,
nein, das funktioniert leider nicht, obwohl es eigentlich klappen müsste.
Jetzt sieht es so aus:"Überschrift text test20.10.03"
deine überschrift<span align="right">datum</span>
versuch's mal damit, weiß nicht ob's klappt, theoretisch könnte es aber gehen :)
zumindest macht das <span>-tag keinen zeilenumbruch wie <div>
-
-
-
Hallo,
"Ueberschrift text text ... 20.10.03"
Ich habe was für dich gebastelt: http://jeenaparadies.servebeer.com/open/selfbilder/petra.html
Ich weiß jetzt nicht richtig ob es was sinnvolleres als span gibt womit man das Datum besser auszeichnen könnte, aber falsch ist es denke ich nicht.
<html>
<head>
<title>test</title>
<style type="text/css">
h1 span { float: right; }
</style>
</head>
<body>
<h1>Ueberschrift text text ...<span>20.10.03</span></h1>
</body>
</html>Grüße
Jeena Paradies--
Ich bin mir ziemlich sicher dass es im Leben mehr gibt als nur wirklich wirklich gut auszusehen ...
<img src="http://home.arcor.de/vivosomuertos/self/zoolander.jpg" border="0" alt="">
Bambergs Fasching - nur ein großer (Werbe-)Flop?
http://jeenaparadies.de/artikel/fasching/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de-
Hallo,
bei mir gibt diese Lösung wieder einen Zeilenumbruch. Ok, das scheint jetzt
doch nicht so trivial zu sein. Vielleicht bastle ich doch einzeilige Tabellen?Viele Grüße,
Petra-
Hallo,
bei mir gibt diese Lösung wieder einen Zeilenumbruch. Ok, das scheint jetzt
doch nicht so trivial zu sein. Vielleicht bastle ich doch einzeilige Tabellen?sorry für meine Unachtsammkeit, Jetzt müsste es auch in anderen Browsern als dem Opera funktionieren.
<html>
<head>
<title>test</title>
<style type="text/css">
h1 span.links { float: left; }
h1 span.rechts { float: right; }
p { clear: both;}
</style>
</head>
<body>
<h1>
<span class="links">Ueberschrift text text ...</span>
<span class="rechts">20.10.03</span>
</h1>
<p>viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text
viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text
</p>
</body>
</html>http://jeenaparadies.servebeer.com/open/selfbilder/petra.html
Grüße
Jeena Paradies--
Jeenas Weblog, fast jeden Tag neu!
http://jeenaparadies.de/weblog/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de-
hi,
h1 span.links { float: left; }
h1 span.rechts { float: right; }float erfordert auch noch eine width-angabe.
gruss,
wahsaga-
Hallo,
float erfordert auch noch eine width-angabe.
Ich frage mich wann ich das endlich lernen werde?
h1 span.links { float: left; width: auto;}
h1 span.rechts { float: right; width: 4em; text-align: right;}Ist es in Ordnung wenn man da beim linken ein width: auto; macht?
Grüße
Jeena Paradies--
Jeenas Weblog, fast jeden Tag neu!
http://jeenaparadies.de/weblog/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de-
Ist es in Ordnung wenn man da beim linken ein width: auto; macht?
Nein. Das ist ja gerade der Witz daran.
</archiv/2004/3/74842/#m431220> usw.Mathias
-
-
h1 span.links { float: left; }
h1 span.rechts { float: right; }float erfordert auch noch eine width-angabe.
Wie wäre es, dass man mitdenkt, bevor man reflexartig reagiert? Es zerschlägt das Konzept, wenn hier width angegeben wird, weil die Breite eben nicht vorhersehbar ist. Eine Breite bei beiden floats anzugeben, ist somit Unsinn, da muss schon das Konzept grundlegend geändert werden. Die Breite des Datum-Float ist ja relativ vorhersehbar und die Umstände sind ansonsten auch günstig (das Datum bricht nicht um bei kleineren Fensterbreiten, Vergrößerung usw.), daher wäre eine Lösung mit diesem einen floatenden Datums-span denkbar, wenn ich nichts übersehen habe. Es müsste halt nur zuerst im Quelltext erscheinen.
Mathias
-
hi,
Wie wäre es, dass man mitdenkt, bevor man reflexartig reagiert?
was soll das?
das float hier eine explizite breitenangabe erfordert, wirst du wohl kaum bestreiten.Es zerschlägt das Konzept, wenn hier width angegeben wird, weil die Breite eben nicht vorhersehbar ist.
dann ist eben das konzept hier nicht durchdacht genug. an der tatsache, dass width erforderlich ist, ändert das aber gar nichts.
Eine Breite bei beiden floats anzugeben, ist somit Unsinn, da muss schon das Konzept grundlegend geändert werden.
zwei mal float anzugeben, halte ich hier für überflüssig.
nur den datums-bereich zu floaten, halte ich für ausreichend. (dann müsste er allerdings im coding als erstes nach <h1> stehen.)
und der restliche textinhalt der überschrift bräuchte m.E. auch gar nicht mal in einen zusätzlichen span eingefasst zu werden.Die Breite des Datum-Float ist ja relativ vorhersehbar und die Umstände sind ansonsten auch günstig (das Datum bricht nicht um bei kleineren Fensterbreiten, Vergrößerung usw.), daher wäre eine Lösung mit diesem einen floatenden Datums-span denkbar, wenn ich nichts übersehen habe. Es müsste halt nur zuerst im Quelltext erscheinen.
wir sind doch offenbar ziemlich einer meinung, warum also deine harsche reaktion am anfang deines postings?
gruss,
wahsaga-
Hallo,
Wie wäre es, dass man mitdenkt, bevor man reflexartig reagiert?
was soll das?
das float hier eine explizite breitenangabe erfordert, wirst du wohl kaum bestreiten.Freilich war deine Aussage richtig, was ich auch nicht bezweifelt habe. Sie war nur im Kontext des Gesprächs wenig relevant und missverständlich, weil sie vermuten ließ bzw. auch so verstanden wurde, dass du mit diesem Hinweis dazu raten wollest, zur zitierten Lösung width hinzuzugeben und dass dies direkt zur Problemlösung beitragen würde bzw. dass dies der vornehmliche Kritikpunkt der zitierten Lösung sei. Du siehst ja, dass diese Erkenntnis an sich nicht dazu beigetragen hatte, dass die Lösung als unpassend erkannt wurde, auch wenn du es vielleicht implizit damit ausdrücken wolltest, weil ja jedem klar sein sollte, dass hier nicht mit festen Breiten gearbeitet werden kann.
wir sind doch offenbar ziemlich einer meinung
Du hattest diese Meinung nicht hinreichend vollständig und eindeutig geäußert, hättest du dies getan, hätte es uns der Problemlösung schneller nähergebracht, nicht mehr und nicht weniger habe ich kritisiert.
Mathias
-
-
-
-
jetzt funktioniert die Sache mit dem rechten alignment, aber dafür erscheint die
nächste Zeile zu weit oben.<style type="text/css">
h3 span.rechts { float: right; }
h3 span.links { float: left; }
h4 span.rechts { float: right; }
h4 span.links { float: left; }
</style>.....
<H4><span class="links">Überschrift text text </span>
<span class="rechts">Datum</span>
</H4><p><i>Weiter gehts!</i></p>
liefert:
"Überschrift text text Weiter gehts! Datum"
Habs auch mit <br> in der Überschrift probiert, gleicher Effekt.
-
Hallo,
jetzt funktioniert die Sache mit dem rechten alignment, aber dafür erscheint die
nächste Zeile zu weit oben.
<style type="text/css">
h3 span.rechts { float: right; }
h3 span.links { float: left; }
h4 span.rechts { float: right; }
h4 span.links { float: left; }
</style>So wie es jetzt ist müsste der Text zwischen der Überschrift und dem Datum nach unten hinauisfließen. du musst dann danach noch dem <p> ein clear: both geben damit nicht mehr gefloatet wird. Da kannst du dann noch den Abstand so machen wie du willst, und zwar mit margin.
Grüße
Jeena Paradies--
Jeenas Weblog, fast jeden Tag neu!
http://jeenaparadies.de/weblog/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de-
Hallo miteinander,
jetzt möchte ich mich erst einmal für Eure Hilfe bedanken. Mit CSS habe ich bishe
noch nicht gearbeitet und eine Menge dazu gelernt (auch sonstwo darüber
gelesen).Hat mich ja getröstet, dass das Problem doch so ganz einfach nicht zu
lösen war.Jetzt klappt es mit <p style="clear: left;"> bei Überschriften und den folgenden
Absätzen. Nur für die Tags UL und LI sieht es ein bisschen komisch aus:
da ist ein Zeilenumbruch direkt nach dem Aufzählungszeichen. So:<UL>
<LI><span class="links">Text links </span><span class="rechts">Datum</span>
<P style="clear: left;"><i>Text drunter</i></P>
</UL>Viele Grüße
Petra-
Hallo,
Jetzt klappt es mit <p style="clear: left;"> bei Überschriften und den folgenden
Absätzen. Nur für die Tags UL und LI sieht es ein bisschen komisch aus:
da ist ein Zeilenumbruch direkt nach dem Aufzählungszeichen.Das gleiche Problem hatte ich bei meiner Seite bei den Kommentaren wie z. B. http://jeenaparadies.de/artikel/webdesign/#c54 da floate ich diese Zahl, die als Permanentlink dient auch so ungefär wie du. Ich habe es dann so gelöst dass ich als Aufzählungszeichen ein Hintergrundbild genommen habe und es an die richtige Stelle positioniert habe.
Grüße
Jeena Paradies--
Geordnete Listen - ist das Formatieren unmöglich?
http://jeenaparadies.de/weblog/2004/april/listenformatierung/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de
-
-
-
-
h1 span.links { float: left; }
h1 span.rechts { float: right; }Wieso sind hier zwei floats nötig? <h1><span class="datum">20.10.03</span> Überschrift text text ...</h1> mit float und width sollte m.W. ausreichen.
Mathias
-
Hallo,
Wieso sind hier zwei floats nötig? <h1><span class="datum">20.10.03</span> Überschrift text text ...</h1> mit float und width sollte m.W. ausreichen.
Ja da hast du vollkommen Recht. Dann hüpft es auch nicht unten drunter. Ich bin nur nicht draufgekommen, dass es im Quelltext davor sein müsste.
Grüße
Jeena Paradies--
Jeenas Weblog, fast jeden Tag neu!
http://jeenaparadies.de/weblog/
Kinder schlagen zu Erziehungszwecken ist in Deutschland verboten!
http://jeenaparadies.de/artikel/kinderschlagen/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de
-
-
-
bei mir gibt diese Lösung wieder einen Zeilenumbruch. Ok, das scheint jetzt
doch nicht so trivial zu sein. Vielleicht bastle ich doch einzeilige Tabellen?Was meinst du mit Zeilenbumbruch?
Du meinst vermutlich den Abstand zum nächsten Absatz, den bekommst du ohne Probleme mit CSS weg. (Tipp: margin)
Struppi.
-
-
-
Hallo.
Eine Möglichkeit ohne "float" -- und damit ohne feste Breite:
<h1>Ueberschrift text text ...<span>20.10.03</span></h1>
in Verbindung mit:
h1 {text-align:left; line-height:0; margin-top:1.5em;}
h1 span {text-align:right; display:block;}
Hier erzeugt "display:block;" den Umbruch, der dank "line-height:0; nicht auffällt. Diese Variante erfordert allerdings gegebenfalls komplexe Verschachtelungen bei der Verwendung von separaten Hintergundbildern oder -farben.
MfG, at-
Eine Möglichkeit ohne "float" -- und damit ohne feste Breite:
<h1>Ueberschrift text text ...<span>20.10.03</span></h1>
in Verbindung mit:
h1 {text-align:left; line-height:0; margin-top:1.5em;}
h1 span {text-align:right; display:block;}Auf die Schnelle getestet erzeugt das in drei Browsern drei sehr unterschiedliche Ausgaben, die wahrscheinlich Browserweichen nötig machen bzw. zum Teil unvereinbar sind.
Hier erzeugt "display:block;" den Umbruch, der dank "line-height:0; nicht auffällt. Diese Variante erfordert allerdings gegebenfalls komplexe Verschachtelungen bei der Verwendung von separaten Hintergundbildern oder -farben.
Diese Variante vereitelt vor allem den sinnvollen bzw. gewohnten Einsatz von margin, padding, border und height. Sie scheint insgesamt mehr Probleme aufzuwerfen, als sie löst.
Mathias
-
Hallo.
Auf die Schnelle getestet erzeugt das in drei Browsern drei sehr unterschiedliche Ausgaben, die wahrscheinlich Browserweichen nötig machen bzw. zum Teil unvereinbar sind.
Das mag sein. Die IE-Sippe sortiere ich ohnehin aus, damit ich auch die älteren Versionen bedienen kann; Mozilla hatte ich zum Testen gerade nicht zur Hand.
Diese Variante vereitelt vor allem den sinnvollen bzw. gewohnten Einsatz von margin, padding, border und height. Sie scheint insgesamt mehr Probleme aufzuwerfen, als sie löst.
Mit zusätzlichen Elementen, nicht einmal <span>, sondern gern auch <a> als Sprungziel etc., funktioniert dieser Ansatz ganz gut, insbesondere wenn etwa das Datum ausgeschrieben werden soll. Eine gemeinsame Breite für "1. Mai" und "22. September" ist eben schwer zu finden. Ich persönlich verwende diese Methode allerdings eher für nach recht abgesetzte Autorennamen unter Artikeln.
MfG, at
-
-