Alex: Formatierungen in einer Zeile.

Eine vielleicht simple Frage, aber dennoch bin ich hierbei ratlos:

Wie kann ich innerhalb einer Zeile komfortabel Schrift-Formatierungen ändern. Bisher löse ich das wie im folgenden Beispiel:

<p>  
Name1 <FONT color="#777777">| Beschreibung1</FONT><br>  
Name2 <FONT color="#777777">| Beschreibung2</FONT><br>  
Name3 <FONT color="#777777">| Beschreibung3</FONT><br>  
</p>

Aber da muss es doch etwas Besseres geben. Insbesondere, um per CSS ohne viel Aufwand allgemein umzu-designen.

Danke.

  1. Bisher löse ich das wie im folgenden Beispiel:

    <p>

    Name1 <FONT color="#777777">| Beschreibung1</FONT><br>
    Name2 <FONT color="#777777">| Beschreibung2</FONT><br>
    Name3 <FONT color="#777777">| Beschreibung3</FONT><br>
    </p>

      
    Dieser Code ist nicht semantisch und hat auch mit CSS nichts zu tun. Der Inhalt entspricht derzeit einer Definitionsliste (dl). Nutze diese, gebe ihr eine ID oder Klasse und formatiere die entsprechenden Elemente mit CSS:  
      
    ~~~html
    <dl class="dlist">  
    <dt>Name1</dt><dd>| Beschreibung1</dd>  
    <dt>Name2</dt><dd>| Beschreibung2</dd>  
    <dt>Name3</dt><dd>| Beschreibung3</dd>  
    </dl>
    
    .dlist dt, .dlist dd { display: inline; }  
    .dlist dd { color: #777777; }
    

    Gruß, LX

    --
    X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: Unusual
    X-Please-Search-Archive-First: Absolutely Yes
    1. Lieber LX,

      <dl class="dlist">

      <dt>Name1</dt><dd>| Beschreibung1</dd>
      <dt>Name2</dt><dd>| Beschreibung2</dd>
      <dt>Name3</dt><dd>| Beschreibung3</dd>
      </dl>

        
      in den <dd>-Elementen würde ich keine Pipe notieren, sondern tatsächlich nur die Beschreibung alleine. Die Pipe (oder jede andere visuelle Gestaltung) überlässt man doch CSS!  
        
      Und ja, ich habe Deine Noten betrachtet. Mir ist nicht klar, wozu es "abc" bedarf. Gibt es nicht längst ein XML-Derivat für musikalische Notation? Ich meine selbst capella hätte ein solches XML-Format, das wiederum von einem offenen Standard her übernommen und angepasst wurde...  
        
      Liebe Grüße,  
        
      Felix Riesterer.
      
      -- 
      ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
      
      1. Die Pipe (oder jede andere visuelle Gestaltung) überlässt man doch CSS!

        Das ist für mich ein optionales Extra, welches den Fragesteller möglicherweise überfordert hätte.

        Und ja, ich habe Deine Noten betrachtet. Mir ist nicht klar, wozu es "abc" bedarf. Gibt es nicht längst ein XML-Derivat für musikalische Notation? Ich meine selbst capella hätte ein solches XML-Format, das wiederum von einem offenen Standard her übernommen und angepasst wurde...

        Es gibt zwarMusicXML, aber das ist kein offizieller Standard und auch längst nicht so einfach aufgebaut wie abcplus. XML ist eben nicht immer der Weisheit letzter Schluß.

        Gruß, LX

        --
        X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: Unusual
        X-Please-Search-Archive-First: Absolutely Yes
        1. Das ist für mich ein optionales Extra, welches den Fragesteller möglicherweise überfordert hätte.

          Stimmt. :-)
          Interessiert mich natürlich auch, weil ich gar nicht wusste, dass das funktioniert. Felix hat mir aber schon geholfen.

          Es gibt zwarMusicXML, aber das ist kein offizieller Standard und auch längst nicht so einfach aufgebaut wie abcplus. XML ist eben nicht immer der Weisheit letzter Schluß.

          Dürfte ich einen Link zu Noten und Umsetzung erfahren?
          Interessiert mich sehr.

          Danke.

          1. Die Noten sind nicht verlinkt. Die Umsetzung ist mit abcplus realisiert. Wenn Du Deine Mail-Adresse preisgibst, schicke ich Dir auch ein paar Noten.

            Gruß, LX

            --
            X-Self-Code: sh:( fo:) ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
            X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
            X-Will-Answer-Email: Unusual
            X-Please-Search-Archive-First: Absolutely Yes
      2. in den <dd>-Elementen würde ich keine Pipe notieren, sondern tatsächlich nur die Beschreibung alleine. Die Pipe (oder jede andere visuelle Gestaltung) überlässt man doch CSS!

        Wie genau mache ich das?
        Klar, ist noch kompliziert für mich, aber ich würde es gerne wissen. Wie kann ich im CSS angeben, dass "|" dazwischengesetzt werden soll bzw. was sind die passenden Suchworte dafür?

        Und ja, ich habe Deine Noten betrachtet. Mir ist nicht klar, wozu es "abc" bedarf. Gibt es nicht längst ein XML-Derivat für musikalische Notation? Ich meine selbst capella hätte ein solches XML-Format, das wiederum von einem offenen Standard her übernommen und angepasst wurde...

        Ich nehme an, es handelt sich um Noten von "LX". Für mich allerdings auch ein spannendes Thema. Wo finde ich die Website von "LX" mit den Noten?

        Danke Euch,
        Alexander

        1. Lieber Alex,

          Wie kann ich im CSS angeben, dass "|" dazwischengesetzt werden soll bzw. was sind die passenden Suchworte dafür?

          <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=:before und content> - oder Du nimmst ein Hintergrundbild für diesen Zweck (mit passendem linken Padding). Das Hintergrundbild sollte auch in Möchtegernbrowsern (z.B. IE) so umgesetzt werden, wie Du es visuell beabsichtigst.

          Ich nehme an, es handelt sich um Noten von "LX". Für mich allerdings auch ein spannendes Thema. Wo finde ich die Website von "LX" mit den Noten?

          Das weiß nur LX.

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
          1. <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=:before und content> - oder Du nimmst ein Hintergrundbild für diesen Zweck (mit passendem linken Padding). Das Hintergrundbild sollte auch in Möchtegernbrowsern (z.B. IE) so umgesetzt werden, wie Du es visuell beabsichtigst.

            Super. Danke. Da werde ich mich mit beschäftigen.
            Findet man Dich auch in Communities? Oder eine Website?

            1. Lieber Alex,

              Super. Danke. Da werde ich mich mit beschäftigen.

              gern geschehen.

              Findet man Dich auch in Communities?

              Also ich muss doch sehr bitten! Ich bin erwachsen!

              Oder eine Website?

              Ja.

              Liebe Grüße,

              Felix Riesterer.

              --
              ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
              1. »» Findet man Dich auch in Communities?
                Also ich muss doch sehr bitten! Ich bin erwachsen!

                Netzwerken ist doch alles oder etwa nicht?

                »» Oder eine Website?
                Ja.

                Danke.

                Einen angenehmen Sonntag,
                Alex

            2. »» <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=:before und content> - oder Du nimmst ein Hintergrundbild für diesen Zweck (mit passendem linken Padding). Das Hintergrundbild sollte auch in Möchtegernbrowsern (z.B. IE) so umgesetzt werden, wie Du es visuell beabsichtigst.

              Habe das nun bei "HOME" so gelöst (mit dt und dd).
              Unter "TERMINE" dachte ich mir, dass ich doch besser die Elemente sinnvoll benenne mit "datum" und "ort". Funktioniert auch einwandfrei, aber:

              http://validator.w3.org/check?uri=http%3A%2F%2Fwww.e-motion.cd%2Fgo%2Findex.php%3Fid%3Devents

              Kann ich die neuen Elemente irgendwie definieren, dass ich das W3-OK erhalte?

              Danke,
              Alexander

              1. Lieber Alex,

                1.) Wozu benötigst Du dieses Markup?

                <p class="eventlist">  
                <datum>01.04. bis 04.04.</datum>Frankfurter Musikmesse<ort>Halle 4.2, J, Stand 50</ort><br>  
                <datum>25.04. bis 05.05.</datum>Mannheimer Maimarkt<ort>Halle 35, Metropolregion Rhein-Neckar, neben der Bühne</ort><br>  
                </p>
                

                Das sind doch ganz klar tabellarischen Inhalte!! Nutze also <table>!

                2.) Warum Du unbedingt einen <iframe> nutzen musst, erschließt sich mir nicht.

                3.) Wie man eine Navigation sinnvoll auszeichnet, findest Du hier: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>. Das, was Du da gemacht hast, ist böser Unsinn:

                <p class="navi_links">  
                	<a href="./index.php?id=home">Home</a><br>  
                	<a href="./index.php?id=news">News</a><br>  
                	<a href="./index.php?id=events">Termine</a><br>  
                </p>  
                <hr noshade size="1px;">
                

                Kann ich die neuen Elemente irgendwie definieren, dass ich das W3-OK erhalte?

                Nein. Deine "neuen" Elemente haben nichts mit (X)HTML zu tun - was Du aber mit Deinem Doctype behauptest.

                Liebe Grüße,

                Felix Riesterer.

                --
                ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
                1. Hallo Felix!

                  1.) Wozu benötigst Du dieses Markup?
                  Das sind doch ganz klar tabellarischen Inhalte!! Nutze also <table>!

                  Und ich dachte, man solle <table> nicht benutzen. Oder gilt das wirklich nur für den Layout-Aufbau einer Website?

                  2.) Warum Du unbedingt einen <iframe> nutzen musst, erschließt sich mir nicht.

                  Copy-Paste von Google aus. Handelt sich um den Google-Kalender.

                  3.) Wie man eine Navigation sinnvoll auszeichnet, findest Du hier: <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten>. Das, was Du da gemacht hast, ist böser Unsinn:

                  <p class="navi_links">

                  <a href="./index.php?id=home">Home</a><br>
                  <a href="./index.php?id=news">News</a><br>
                  <a href="./index.php?id=events">Termine</a><br>
                  </p>
                  <hr noshade size="1px;">

                  Ich hatte es auch zunächst mit <ul> und <li> eingebunden, aber damit konnte ich den <hr>-Balken nicht unterbringen.  
                  Wieso sollte man <ul> nutzen?  
                  Dann also drei <ul>-Päckchen für meinen Zweck und dazwischen die <hr>?  
                    
                  
                  > »» Kann ich die neuen Elemente irgendwie definieren, dass ich das W3-OK erhalte?  
                  > Nein. Deine "neuen" Elemente haben nichts mit (X)HTML zu tun - was Du aber mit Deinem Doctype behauptest.  
                  
                  Kann ich das mit dem Doctype sozusagen wieder "richtig" machen?  
                    
                  Danke Dir.
                  
                  1. Mahlzeit Alex,

                    »» Das sind doch ganz klar tabellarischen Inhalte!! Nutze also <table>!
                    Und ich dachte, man solle <table> nicht benutzen. Oder gilt das wirklich nur für den Layout-Aufbau einer Website?

                    Das <table>-Element ist zur Auszeichnung von Tabellen da. Für nichts anderes. Umgekehrt bedeutet das aber auch, dass man tabellarische Inhalte mittels eines <table> auszeichnen sollte.

                    Ich hatte es auch zunächst mit <ul> und <li> eingebunden, aber damit konnte ich den <hr>-Balken nicht unterbringen.

                    Ich behaupte, dass es sich bei diesem "Balken" um ein reines Design-Element handelt. Dafür ist CSS da.

                    Wieso sollte man <ul> nutzen?

                    Listen sollten als Listen ausgezeichnet werden. Ein Menü ist in der Regel eine Liste (von Links). Nutze also das passende HTML-Element (in diesem Fall <li>) - die Anzeige kannst Du wiederum mit CSS formatieren. Z.B. könntest Du auch Listen verschachteln, um Untermenüs zu strukturieren:

                    <ul>  
                      <li>  
                        <ul>  
                          <li>Home</li>  
                          <li>News</li>  
                          <li>Termine</li>  
                        </ul>  
                      </li>  
                      <li>  
                        <ul>  
                          <li>Ein weiterer Menüpunkt</li>  
                          <li>Noch einer</li>  
                        </ul>  
                      </li>  
                    </ul>
                    

                    Den einzelnen <li> der äußeren Liste (oder auch den enthaltenen Untermenüs) könntest Du dann entsprechende Rahmen verpassen.

                    Dann also drei <ul>-Päckchen für meinen Zweck und dazwischen die <hr>?

                    Nein. Es handelt sich doch um EIN zusammenhängendes Menü, oder nicht?

                    »» »» Kann ich die neuen Elemente irgendwie definieren, dass ich das W3-OK erhalte?
                    »» Nein. Deine "neuen" Elemente haben nichts mit (X)HTML zu tun - was Du aber mit Deinem Doctype behauptest.
                    Kann ich das mit dem Doctype sozusagen wieder "richtig" machen?

                    Was genau meinst Du? Entweder Du hältst Dich an den von Dir angegebenen DOCTYPE, dann ist Dein Dokument valide - oder Du lässt es: dann musst Du damit leben, dass der eine oder andere Browser ggf. nicht weiß, wie er Dein Dokument darzustellen hat bzw. Murks macht.

                    MfG,
                    EKKi

                    --
                    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                    1. Das <table>-Element ist zur Auszeichnung von Tabellen da. Für nichts anderes. Umgekehrt bedeutet das aber auch, dass man tabellarische Inhalte mittels eines <table> auszeichnen sollte.

                      Okay. Ich verstehe.

                      Ich behaupte, dass es sich bei diesem "Balken" um ein reines Design-Element handelt. Dafür ist CSS da.

                      Habe es nun mit border-bottom realisiert.

                      Listen sollten als Listen ausgezeichnet werden. Ein Menü ist in der Regel eine Liste (von Links). Nutze also das passende HTML-Element (in diesem Fall <li>) - die Anzeige kannst Du wiederum mit CSS formatieren. Z.B. könntest Du auch Listen verschachteln, um Untermenüs zu strukturieren:

                      Den einzelnen <li> der äußeren Liste (oder auch den enthaltenen Untermenüs) könntest Du dann entsprechende Rahmen verpassen.

                      So habe ich es nun realisiert. Danke!
                      Dennoch die Frage: Warum? Es sieht nun genauso aus wie vorher?

                      Nein. Es handelt sich doch um EIN zusammenhängendes Menü, oder nicht?

                      Ein Main-<ul> und ein Sub-<ul>.

                      Was genau meinst Du? Entweder Du hältst Dich an den von Dir angegebenen DOCTYPE, dann ist Dein Dokument valide - oder Du lässt es: dann musst Du damit leben, dass der eine oder andere Browser ggf. nicht weiß, wie er Dein Dokument darzustellen hat bzw. Murks macht.

                      Das hat mir sehr geholfen. Danke Dir!

                      1. Hallo

                        »» Listen sollten als Listen ausgezeichnet werden. ...

                        So habe ich es nun realisiert. Danke!
                        Dennoch die Frage: Warum? Es sieht nun genauso aus wie vorher?

                        Aber nur, weil du es entsprechend formatiert hast. Gehe bitte davon aus, dass HTML eine Auszeichnungssprache ist. Jeglicher Inhalt soll entsprechend seiner Bedeutung ausgezeichnet werden. Eine Überschrift ist eine Überschrift (<hx>), ein Textabsatz ein Textabsatz (<p>) und eine Linkliste ist schlussendlich eine Liste (<ul>, <ol> -> <li>) von Links (<a>). Wie es in einem graphischen Browser aussehen soll[1], kannst du mit CSS bestimmen. Es kann aber sein, dass da (jemand mit) ein(em) Programm daherkommt, dass mit CSS nichts (oder sehr wenig) anfangen kann. Dann sollte die Struktur des Dokuments (darum handelt es sich bei einer HTML-Datei) trotzdem die Struktur des Inhalts widerspiegeln und dazu ist HTML da.

                        [1] Es gibt auch CSS-Anweisungen für die Ausgabe am Drucker, im Vorleseprogramm und einige andere. Die werden aber von den entsprechenden Programmen höchst unterschiedlich und unvollständig unterstützt.

                        Tschö, Auge

                        --
                        Die deutschen Interessen werden am Liechtenstein verteidigt.
                        Veranstaltungsdatenbank Vdb 0.3
                      2. Mahlzeit Alex,

                        »» Den einzelnen <li> der äußeren Liste (oder auch den enthaltenen Untermenüs) könntest Du dann entsprechende Rahmen verpassen.
                        So habe ich es nun realisiert. Danke!
                        Dennoch die Frage: Warum? Es sieht nun genauso aus wie vorher?

                        Damit die Struktur stimmt. Jetzt können auch Suchmaschinen oder Browser, die mit CSS nicht umgehen können bzw. damit ihre Schwierigkeiten haben oder gar überhaupt gar keine Bildschirmausgabe generieren (z.B. Screenreader) klar erkennen, welche Struktur Dein Menü hat, was zusammengehört, welcher Menüpunkt welchem zuzuordnen ist usw.

                        »» Nein. Es handelt sich doch um EIN zusammenhängendes Menü, oder nicht?
                        Ein Main-<ul> und ein Sub-<ul>.

                        Also EIN Menü mit Untermenüs. Trenne nicht, was inhaltlich, strukturell oder logisch zusammengehört. Insbesondere nicht, wenn das nur der Darstellung halber geschieht. Dafür ist CSS da - nicht HTML.

                        MfG,
                        EKKi

                        --
                        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        2. Hallo

          »» in den <dd>-Elementen würde ich keine Pipe notieren, sondern tatsächlich nur die Beschreibung alleine. Die Pipe (oder jede andere visuelle Gestaltung) überlässt man doch CSS!
          Wie genau mache ich das?
          Klar, ist noch kompliziert für mich, aber ich würde es gerne wissen. Wie kann ich im CSS angeben, dass "|" dazwischengesetzt werden soll bzw. was sind die passenden Suchworte dafür?

          Mit den Pseudoelementen <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=:before und :after> kannst du Inhalt vor bzw. hinter den eigentlichen Inhalt von Elementen notieren.

          Tschö, Auge

          --
          Die deutschen Interessen werden am Liechtenstein verteidigt.
          Veranstaltungsdatenbank Vdb 0.3
          1. Liebes Auge,

            ätsch - ich war schneller! ;-)

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
            1. Hallo

              ätsch - ich war schneller! ;-)

              Hehe, macht nüscht, is mir wurscht, bin ja nicht auf der Flucht. :-)

              Tschö, Auge

              --
              Die deutschen Interessen werden am Liechtenstein verteidigt.
              Veranstaltungsdatenbank Vdb 0.3
    2. <dl class="dlist">

      <dt>Name1</dt><dd>| Beschreibung1</dd>
      <dt>Name2</dt><dd>| Beschreibung2</dd>
      <dt>Name3</dt><dd>| Beschreibung3</dd>
      </dl>

      
      >   
      > ~~~css
      
      .dlist dt, .dlist dd { display: inline; }  
      
      > .dlist dd { color: #777777; }
      
      

      Danke. Das hilft mir definitiv weiter.

      Ein Problem habe ich noch:
      Mit welchem CSS-Attribut konfiguriere ich, dass nach Abschluss des Attributs die Zeile nicht umgebrochen wird. Bspw. könnte ich doch vielleicht Obiges auch mit <p>-Klassen umsetzen, aber da habe ich das Problem, dass bei </p> sofort ein Zeilenumbruch stattfindet. Und genau dieses Attribut suche ich.

      Danke.

      P.S. "white-space" hilft mir da leider nicht weiter.

      1. Hallo

        »» ~~~html

        <dl class="dlist">

        »» <dt>Name1</dt><dd>| Beschreibung1</dd>
        »» <dt>Name2</dt><dd>| Beschreibung2</dd>
        »» <dt>Name3</dt><dd>| Beschreibung3</dd>
        »» </dl>

        
        > »»  
        > »» ~~~css
        
        .dlist dt, .dlist dd { display: inline; }  
        
        > »» .dlist dd { color: #777777; }
        
        

        Danke. Das hilft mir definitiv weiter.

        Ein Problem habe ich noch:
        Mit welchem CSS-Attribut konfiguriere ich, dass nach Abschluss des Attributs die Zeile nicht umgebrochen wird. Bspw. könnte ich doch vielleicht Obiges auch mit <p>-Klassen umsetzen, aber da habe ich das Problem, dass bei </p> sofort ein Zeilenumbruch stattfindet. Und genau dieses Attribut suche ich.

        Jedes http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente@title=Blockelement erzeugt einen Block (Binsenweisheit), so natürlich auch <p>. Dieses Verhalten kann man CSS-seitig mit display:inline; ändern (wie es übrigens auch im Code von LX gelöst ist).

        Tschö, Auge

        --
        Die deutschen Interessen werden am Liechtenstein verteidigt.
        Veranstaltungsdatenbank Vdb 0.3
        1. Jedes http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente@title=Blockelement erzeugt einen Block (Binsenweisheit), so natürlich auch <p>. Dieses Verhalten kann man CSS-seitig mit display:inline; ändern (wie es übrigens auch im Code von LX gelöst ist).

          Wobei ich den Pipe (|) mittels :before (oder zumindest mittels Hintergrundbild) eingefügt hätte.

          1. Hallo

            »» Jedes http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente@title=Blockelement erzeugt einen Block (Binsenweisheit), so natürlich auch <p>. Dieses Verhalten kann man CSS-seitig mit display:inline; ändern (wie es übrigens auch im Code von LX gelöst ist).

            Wobei ich den Pipe (|) mittels :before (oder zumindest mittels Hintergrundbild) eingefügt hätte.

            Es spricht ja nichts dagegen, das zu tun (wurde ja auch schon angemerkt). Besser, als es direkt im HTML-Quelltext zu notieren, ist es allemal. Allerdings ging es in diesem Zweig(chen) um die "Nichtblockdarstellung" des Ganzen.

            Tschö, Auge

            --
            Die deutschen Interessen werden am Liechtenstein verteidigt.
            Veranstaltungsdatenbank Vdb 0.3
          2. Wobei ich den Pipe (|) mittels :before (oder zumindest mittels Hintergrundbild) eingefügt hätte.

            Und warum sollte das besser sein als im HTML-Text?

            1. »» Wobei ich den Pipe (|) mittels :before (oder zumindest mittels Hintergrundbild) eingefügt hätte.

              Und warum sollte das besser sein als im HTML-Text?

              Weil es nur der Darstellung dient - genauso wie die führenden und abschließenden Gänsefüßchen bei einem Zitat nur der Darstellung dienen. Wenn du das Pipe-Zeichen ins HTML betonierst, kannst du dir folgende Darstellungsformen (die mit CSS kein Problem darstellen) in die Haare schmieren.

              Definition
                Term
                Term
                Term
              Definition
                Term

              oder

              Definition: Term
                          Term
                          Term
              Definition: Term
                          Term

              oder

              Definition (Term, Term, Term)
              Definition (Term)

              oder

              Definition: Term, Term, Term
              Definition: Term

              oder

              Definition | Term, Term, Term
              Definition | Term,

              oder

              Definition → Term, Term, Term
              Definition → Term,

              1. »» Und warum sollte das besser sein als im HTML-Text?
                Weil es nur der Darstellung dient - genauso wie die führenden und abschließenden Gänsefüßchen bei einem Zitat nur der Darstellung dienen. Wenn du das Pipe-Zeichen ins HTML betonierst, kannst du dir folgende Darstellungsformen (die mit CSS kein Problem darstellen) in die Haare schmieren.

                ABER:
                Nun habe ich es über CSS realisiert und in Firefox sieht das auch klasse aus, aber im IE fehlt das Pipe-Zeichen!!

                Wie kann ich das Problem lösen?

                IE kennt scheinbar kein before und after!?

                1. Hallo

                  Nun habe ich es über CSS realisiert und in Firefox sieht das auch klasse aus, aber im IE fehlt das Pipe-Zeichen!!

                  Wie kann ich das Problem lösen?

                  IE kennt scheinbar kein before und after!?

                  Ja. Für den IE kannst du mittels <http://de.selfhtml.org/css/layouts/browserweichen.htm@title=CSS-Hacks oder Conditional Comments> eigene CSS-Anweisungen definieren. Hier, so nicht noch weitere umfangreiche Anpassungen anstehen, sollte ein entsprechender Hack ausreichen. Anstatt des per :before oder :after eingefügten Pipes müsstest du für den IE ein Hintergrundbild vergeben und entweder den Text des Links per padding oder den Link selbst mit margin um ein dem Hintergrundbild angepasstes Stück verschieben.

                  Was du machst, kommt jetzt auf die gewählte HTML-Struktur an. Bei einer Liste, deren Listenpunkte per display:inline; nebeneinander angeordnet sind, würde ich das Hintergrundbild an das <li> vergeben und demnach, da Inlineelemente (wie <a>) selbst kein margin haben, den Text mit padding verrücken. Benutzt du hingegen float:left;, um die Listenpunkte nebeneinander darzustellen, kannst du auch die darin enthaltenen Links zu Blockelementen machen und mit margin arbeiten. Vorteil der letzteren Methode ist, dass die Links eine einheitliche Breite haben können (Blockelementen kann man die zuweisen, Inlineelementen nicht).

                  Tschö, Auge

                  --
                  Die deutschen Interessen werden am Liechtenstein verteidigt.
                  Veranstaltungsdatenbank Vdb 0.3
                2. Mahlzeit Alex,

                  IE kennt scheinbar kein before und after!?

                  Beachten Sie "<http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=Beachten Sie:>" ...

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
      2. Hi,

        Mit welchem CSS-Attribut konfiguriere ich, dass nach Abschluss des Attributs die Zeile nicht umgebrochen wird.

        Von was fuer einem Attribut redest du?

        Bspw. könnte ich doch vielleicht Obiges auch mit <p>-Klassen umsetzen,

        Es gibt keine "<p>-Klassen".

        aber da habe ich das Problem, dass bei </p> sofort ein Zeilenumbruch stattfindet. Und genau dieses Attribut suche ich.

        Mit P zeichnest du Absaetze im Fliesstext aus. Handelt es sich bei dem, was du gesondert hervorheben willst, nicht um einen ganzen Absatz - dann nutze kein P.

        em und strong eignen sich bspw. dazu, Inhaltsbestandteile mit einer besonderen Bedeutung auszuzeichnen.

        MfG ChrisB

        --
        „This is the author's opinion, not necessarily that of Starbucks.“