Unterschiedliche Textformatierung in einer Zeile

[HP-User]

Abend Leute

Ich möchte gerne einen beliebigen Text in einer Zeile unterschiedlich formatieren.

Frage: geht das überhaupt, ohne dass ein Umbruch gemacht wird? Also dass die Textänderung innerhalb einer Zeile statt findet?

Beispiel:
Mein Script wirft Gästebuchinhalt in einem Div aus. Dort in der ersten Zeile stehen:
1. Die fortlaufende Nummerierung
2. Der Name
3. Das Datum mit Zeit in der eckigen Klammer.

Sieht so aus.

Ich denke es sieht besser aus, wenn man das Datum/Uhrzeitfeld rechtsbündig im Div-Kontainer ausrichten könnte. Aber innerhalb von einem <p> Tag kann ich nicht die P-Klasse ändern. Jedes neue "p" ergibt automatisch einen Umbruch/Newline.

Gruss HP-User

[Auge]

Hallo

Ich möchte gerne einen beliebigen Text in einer Zeile unterschiedlich formatieren.

Beispiel:
Mein Script wirft Gästebuchinhalt in einem Div aus. Dort in der ersten Zeile stehen:

1. Die fortlaufende Nummerierung
2. Der Name
3. Das Datum mit Zeit in der eckigen Klammer.

Sieht so aus.

Ich denke es sieht besser aus, wenn man das Datum/Uhrzeitfeld rechtsbündig im Div-Kontainer ausrichten könnte. Aber innerhalb von einem <p> Tag kann ich nicht die P-Klasse ändern. Jedes neue "p" ergibt automatisch einen Umbruch/Newline.

Du kannst die anders zu formatierenden Teile über ein <span class="irgendwas"> ansprechen. Wie sich dein Szenario liest, sind diese Informationen auch besser im div und nicht im p der Nachricht aufgehoben.

Tschö, Auge

[HP-User]

Hi Auge

Du kannst die anders zu formatierenden Teile über ein <span class="irgendwas"> ansprechen. Wie sich dein Szenario liest, sind diese Informationen auch besser im div und nicht im p der Nachricht aufgehoben.

im css:

span.zeitpunktausrichter {  
                          text-align: right;  
                         }  

und im Html:

  
<p class="textvariante_c">§1 Soziales <span class="zeitpunktausrichter">Verhalten</span>  
</p>  

Nur für Testzwecke hab ich mal die Regeln-Seite lokal geändert. Das geht aber nicht. Das span hat keinen Einfluss auf den eingekreiseten Text!

Ergo->ich hab irgendwo einen Denkfehler oder die Syntax schlägt mir ein Schnippchen...

Gruss HP-User

Gruss HP-User

[HP-User]

Morgen Forum

@ Auge

[...]Wie sich dein Szenario liest, sind diese Informationen auch besser im div und nicht im p der Nachricht aufgehoben.

Wie meinst du das? Das "div" ist der Container. Das "p" steht im "div" und enthält den Text:

  
<div class="buch_eintrag">  
<p class="textvariante_c">(2) Name: EZ-Team [Datum: 03.08.2012 / 00:52:40  
 Uhr]  
</p>  

Ziel soll sein, dass diese Eckige Klammer samt deren Inhalt in der "div-box" rechtsbündig angezeigt wird. Ist das überhaupt möglich, da der "p"-Inhalt in der "div-box" ja schon linksbündig angezeigt wird?

Beispiel

Gruss HP-User

[Der Martin]

Hallo,

span.zeitpunktausrichter {

text-align: right;
                         }

>   
> ~~~html

<p class="textvariante_c">§1 Soziales <span class="zeitpunktausrichter">Verhalten</span>  

> </p>

das ist fein, aber zweckfrei.

Das span hat keinen Einfluss auf den eingekreiseten Text!

Doch, nur merkt man es nicht. Der Text ist jetzt rechtsbündig innerhalb des span - aber das span-Element selbst ist nicht größer als sein Inhalt, so dass der Effekt nicht sichtbar ist; außerdem läuft das span-Element als Ganzes noch mit dem linksbündigen p-Inhalt mit.

Ergo->ich hab irgendwo einen Denkfehler oder die Syntax schlägt mir ein Schnippchen...

Ersteres. Du kannst nicht zwei verschiedene Text-Ausrichtungen innerhalb desselben Elements haben. Deshalb muss der unterschidelich zu formatierende Textabschnitt in ein separates Element.
Leider hat text-align aber keinen sichtbaren Einfluss auf inline-Elemente - ob du eine in Plastikfolie eingewickelte Kiste an die rechte oder an die linke Seite der Folie drückst, ist egal.

In deinem Beispiel würde ich vorschlagen, das span-Element zu floaten. Damit das richtig wirken kann, muss es aber *vor* dem Text stehen, der drumherum fließen ("ausweichen") soll:

<p class="textvariante_c"><span class="zeitpunktausrichter">Verhalten</span>§1 Soziales</p>

span.zeitpunktausrichter  
 { float: right;  
 }

Wenn ich mir dein Beispiel so ansehe, kommt es mir allerdings fragwürdig vor. Der Text "§1 Soziales Verhalten" ist eigentlich eher eine Überschrift als ein Textabsatz. Außerdem finde ich es eigenartig, einen Teil der Überschrift links- und den Rest rechtsbündig zu setzen. Zu deinem ursprünglich beschriebenen Setup würde das aber passen.
Merke: Vereinfache deine Beispiele nicht so stark, dass der Sinn darunter leidet.

So long,
 Martin

[HP-User]

Hallo Martin :-)

span.zeitpunktausrichter {
                         text-align: right;
                        }

> >   
> > ~~~html

<p class="textvariante_c">§1 Soziales <span class="zeitpunktausrichter">Verhalten</span>  

> > </p>

das ist fein, aber zweckfrei.

*schmunzel*

In deinem Beispiel würde ich vorschlagen, das span-Element zu floaten. Damit das richtig wirken kann, muss es aber *vor* dem Text stehen, der drumherum fließen ("ausweichen") soll:

[HP-User]

Hallo Nochmal

Sorry, zu früh abgeschickt:

In deinem Beispiel würde ich vorschlagen, das span-Element zu floaten. Damit das richtig wirken kann, muss es aber *vor* dem Text stehen, der drumherum fließen ("ausweichen") soll:

Jetzt ist es so geändert:

  
<p class="textvariante_c"><span class="zeitpunktausrichter">[Datum: 03.08.2012 / 00:52:40 Uhr]</span>(2) Name: EZ-Team  
</p>  

Ich finde es schon erstaunlich, dass man die Worte umderehen muss, um sie recht das erste als letztes zu erhalten. Klar, durch float-rechts leuchtet es schon ein, wiederstrebt aber dem "normalem" Denken.

Wahnsinn wie du so um die Ecke gedacht hast - wie kommt man auf sowas?
Es läuft jetzt so, wie ich mir das gewünscht habe - Vielen Dank Martin.

Kostprobe.

Bei der Gelegenheit hab ich gemerkt, dass der Quelltext nach den Sekunden einen unschönen Umbruch hatte. Klar - die Sekunden sind die letzten Daten in der CSV-Datei - dann kommt eine neue Zeile...
Aber ein beherztes chomp(DB_Sekunden); hat geholfen.

Gruss und Tschüss

HP-User

PS.: Hmmm, vielleicht mach ich das Datum mit Uhrzeit von der Schriftgrösse etwas kleiner... mal schauen...

[Der Martin]

n'Abend ...

<p class="textvariante_c"><span class="zeitpunktausrichter">[Datum: 03.08.2012 / 00:52:40 Uhr]</span>(2) Name: EZ-Team

</p>

  
ja, so hatte ich es gemeint.  
  

> Ich finde es schon erstaunlich, dass man die Worte umderehen muss, um sie recht das erste als letztes zu erhalten. Klar, durch float-rechts leuchtet es schon ein, wiederstrebt aber dem "normalem" Denken.  
  
So ist Floating in CSS definiert: Erst kommt das, was an einer Seite (rechts oder links) kleben soll, und dann der Rest, der drumherum fließen soll.  
  

> Wahnsinn wie du so um die Ecke gedacht hast - wie kommt man auf sowas?  
  
Verstehen der Spezifikationen. Erfahrung. Whatever.  
Ich fand es nicht ganz so merkwürdig, aber ich kann verstehen, dass man als Unerfahrener nicht von allein auf die Lösung und die richtige Anordnung kommt.  
  

> Bei der Gelegenheit hab ich gemerkt, dass der Quelltext nach den Sekunden einen unschönen Umbruch hatte.  
  
Nur der Quelltext? - Das wäre nicht weiter tragisch; Zeilenumbrüche im Quelltext werden ja einfach als Whitespace betrachtet, also so, als wären es normale Blanks (Ausnahme: Elemente mit white-space:nowrap).  
  

> Klar - die Sekunden sind die letzten Daten in der CSV-Datei - dann kommt eine neue Zeile...  
> Aber ein beherztes chomp(DB\_Sekunden); hat geholfen.  
  
PHP? - Nein, offensichtlich nicht, denn PHP kennt kein chomp(). In PHP hätte ich stattdessen trim() erwartet.  
  
Ciao,  
 Martin  

-- 
Sozial ist, wenn andere bezahlen.  
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(

[HP-User]

Der Mühe Lohn ;-)

das ist fein, aber zweckfrei.

*schmunzel*

HP-User