text-indent aber umgekehrt

[th23]

Hallo,

ich habe eine Frage bei der ich nicht weiter komme... Ich möchte bei einem Absatz die erste Zeile weiter links beginnen lassen wie den Rest. (siehe auch Bild anbei) Das umgekehrte Ergebnis ist ja mit text-indent zu erreichen, aber wenn ich dieses mit negativem Wert benutzen möchte, fängt der Text links von dem beabsichtigten Bereich an.

Gibt es noch eine andere Lösung?

Vielen Dank für Eure Hilfe,
Thorsten

[MudGuard]

Hi,

ich habe eine Frage bei der ich nicht weiter komme... Ich möchte bei einem Absatz die erste Zeile weiter links beginnen lassen wie den Rest. (siehe auch Bild anbei) Das umgekehrte Ergebnis ist ja mit text-indent zu erreichen, aber wenn ich dieses mit negativem Wert benutzen möchte, fängt der Text links von dem beabsichtigten Bereich an.

text-indent erlaubt negative Werte.

cu,
Andreas

[Thorsten]

wenn ich dieses mit negativem Wert benutzen möchte, fängt der Text links von dem beabsichtigten Bereich an.

text-indent erlaubt negative Werte.

Danke, wie gesagt... kenne ich, dann kommt aber folgendes Ergebnis heraus. Das ist nicht gewünscht. Der Anfang soll am richtigen "Fleck" sein.

Gruß
Thorsten

[Candid Dauth]

Heißa, Thorsten,

Danke, wie gesagt... kenne ich, dann kommt aber folgendes Ergebnis heraus. Das ist nicht gewünscht. Der Anfang soll am richtigen "Fleck" sein.

Weise deinem linken padding den Betrag der text-indent-Eigenschaft zu und du wirst finden, wonach du suchest.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Thorsten]

Weise deinem linken padding den Betrag der text-indent-Eigenschaft zu und du wirst finden, wonach du suchest.

Hi,

Problem: Ich habe (in der konkreten Situation) keinen Zugriff auf das linke padding des parent objects. Dieses ist Teil des Anzeigebereichs eines Forums und die konkrete Textpassage ist eine Anzeige daraus, die aber für die User entsprechende Formatierung zulassen soll :-/

Trotzdem Danke für die Hilfe,
Thorsten

[Sven Rautenberg]

Moin!

Weise deinem linken padding den Betrag der text-indent-Eigenschaft zu und du wirst finden, wonach du suchest.

Problem: Ich habe (in der konkreten Situation) keinen Zugriff auf das linke padding des parent objects. Dieses ist Teil des Anzeigebereichs eines Forums und die konkrete Textpassage ist eine Anzeige daraus, die aber für die User entsprechende Formatierung zulassen soll :-/

Wenn du kein Padding an das Element setzen kannst, kannst du auch kein text-indent an das Element setzen. Wenn du text-indent an das Element setzen kannst, kannst du auch padding an das Element setzen.

- Sven Rautenberg

[Thorsten]

Wenn du kein Padding an das Element setzen kannst, kannst du auch kein text-indent an das Element setzen. Wenn du text-indent an das Element setzen kannst, kannst du auch padding an das Element setzen.

Ok, sorry... Missverständnis: Habs herausbekommen!

Lösung: style="text-indent: -25px; padding-left: 25px;" Also den negativen text-indent Wert als positiven padding-left Wert benutzen!

Vielen Dank Euch allen für die superschnelle Hilfe! Genial!

Thorsten

[Christoph Zurnieden]

Hi,

(siehe auch Bild anbei)

Das Bild läßt vermuten, das Du das mit einer Textverarbeitung produziert hast. Das zusammen mit dem Fakt, das Du Text als Bild postest führt bei mir zu der These, das Du eine Definitionsliste basteln möchtest, also sowas in der Art:

Foo Ein Foo ist eine Dingens, welches per Dingens
 ausgedingst wird. Deshalb sind Dingen nicht
 zur Zusammenarbeit mit Dingern zu bewegen.

Bar Ein Bar ist entweder der zweite Teil von -> Foo
 oder eines der berühmten Dinger.

<dl>
<dt>Foo</dt>
<dd>
Ein Foo ist eine Dingens, welches per Dingens
ausgedingst wird. Deshalb sind Dingen nicht
zur Zusammenarbeit mit Dingern zu bewegen
</dd>
<dt>Bar</dt>
<dd>
Ein Bar ist entweder der zweite Teil von -> Foo
oder eines der berühmten Dinger.
</dd>
</dl>

Alles Maße, Farben und Fontmerkmale lassen sich so bequem per CSS regeln.

so short

Christoph Zurnieden

[Thorsten]

Hi Christoph,

diese Variante führt leider nicht ganz zu dem Ergebnis, das ich will. Aber Deine Annahme mit der Aufzählung ist schon richtig.

Will nur wissen, ob es einen CSS Weg dafür gibt. Per TABLE ist das ja kein Problem, aber extra dafür zig TABLEs einbauen gefällt mir nicht.

Gruß
Thorsten

[Christoph Zurnieden]

Hi,

diese Variante führt leider nicht ganz zu dem Ergebnis, das ich will.

Was hast Du denn probiert?

Aber Deine Annahme mit der Aufzählung ist schon richtig.

Dann ist das auch die korrekte Auszeichnung für diese Semantik.

Will nur wissen, ob es einen CSS Weg dafür gibt.

Das _ist_ der korrekte CSS Weg.

Wenn Dir nicht gefällt wie der Browser eine Definitionsliste darstellt dann kannst Du das mit CSS ändern, genau, wie Du das auch wolltest:

dl {
    /* Angaben für die gesamte Liste */
   }
dt {
    /* Angaben für den Definitionstherm */
   }
dd {
    /* Angaben für die Definition */
   }

Wo liegt jetzt das genaue Problem?

so short

Christoph Zurnieden

[Christoph Zurnieden]

Hi,

/* Angaben für den Definitionstherm */

Wenn Dir das zu warm ist kannst Du natürlich auch einen Definitionsterm nehmen ;-)

Wofür gibt's eigentlich Rechtschreibprüfungen, Christoph?
Tststs!
;-)

so short

Christoph Zurnieden

[Thorsten]

/* Angaben für den Definitionstherm */

Wenn Dir das zu warm ist kannst Du natürlich auch einen Definitionsterm nehmen ;-)

Wofür gibt's eigentlich Rechtschreibprüfungen, Christoph?
Tststs!

??? Falscher Thread?

[Christoph Zurnieden]

Hi,

??? Falscher Thread?

Nein, simples Selbstgespräch.

so short

Christoph Zurnieden

[Thorsten]

Hi Christoph,

Danke nochmal... aber das das dd-Element eine Zeile unter dem dt-Element angezeigt wird und nicht in der selben Zeile kann ich doch so nicht beeinflussen, oder?

Wie dem auch sei, in dem anderen Zweig auf mein Posting ist eine mögliche Lösung gefunden.

Trotzdem interessiert mich jetzt, ob es auch anders ginge... Danke nochmal für die Bemühungen

Thorsten

[MudGuard]

Hi,

Danke nochmal... aber das das dd-Element eine Zeile unter dem dt-Element angezeigt wird und nicht in der selben Zeile kann ich doch so nicht beeinflussen, oder?

Doch, natürlich. float hilft. Und margin.

cu,
Andreas

[Christoph Zurnieden]

Hi,

Danke nochmal... aber das das dd-Element eine Zeile unter dem dt-Element angezeigt wird und nicht in der selben Zeile kann ich doch so nicht beeinflussen, oder?

Selbstverständlich kannst Du das.

Wie dem auch sei, in dem anderen Zweig auf mein Posting ist eine mögliche Lösung gefunden.

Nein, das ist ein Workaround, da nicht bekannt war, was Du überhaupt darstellen wolltest.

Trotzdem interessiert mich jetzt, ob es auch anders ginge... Danke nochmal für die Bemühungen

Selbstverständlich geht das auch anders, nämlich wie von mir vorgeschlagen. Das wäre ein korrekte Lösung Deines Problems.
Einen Weg wie Du da mittels CSS hinkommst hat ja schon MudGuard aufgezeigt.
Wenn Du damit nicht klarkommst oder nicht weißt, was genau gemeint ist: frag' einfach nochmal genauer nach, dafür sind wir schließlich hier.

so short

Christoph Zurnieden

[Christoph Zurnieden]

Hi,

bevor sich jetzt die "Lösung" mit dem text-indent noch durchsetzt weil im Archiv gefunden:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Definitionsliste mit CSS formatieren</title>  
<style type="text/css">  
dl {  
    /* Angaben für die gesamte Liste */  
    /*border: 1px solid red;*/  
    line-height: 2ex;  
   }  
dt {  
    /* Angaben für den Definitionsterm */  
    /*border: 1px solid blue;*/  
    line-height: 2ex;  
    font-weight:bold;  
    margin-top:2ex;  
   }  
dd {  
    /* Angaben für die Definition */  
    /*border: 1px solid green;*/  
    line-height: 2ex;  
    margin-top: -2ex;  
    margin-left: 6em;  
   }  
</style>  
</head>  
<p>  
Ein Paragraph zwecks Klammerung.  
</p>  
<dl>  
<dt>Foo</dt>  
<dd>  
Ein Foo ist eine Dingens, welches per Dingens  
ausgedingst wird. Deshalb sind Dingen nicht  
zur Zusammenarbeit mit Dingern zu bewegen  
</dd>  
<dt>Bar</dt>  
<dd>  
Ein Bar ist entweder der zweite Teil von -> Foo  
oder eines der berühmten Dinger.  
</dd>  
</dl>  
<p>  
Ein zweiter Paragraph zwecks Klammerung  
</p>  
  
</html>  

Ja, _so_ einfach ist das wirklich ;-)
(nicht getestet mit dem IE, ich glaube da braucht es noch etwas mehr.)

so short

Christoph Zurnieden