CSS - text-indent

**Niji-chan** · 06.08.2006 04:05

Hi,

ich möchte in einem div alle Zeilen einrücken, die eine bestimmte Klasse nicht besitzen.

Hier der momentane Style dazu:

HTML-Code:

#quelltext {
  position: relative;
  left: 50px;
  padding: 10px;
  margin: 0px;
  width: 580px;
  border: 2px dotted #ff6600;
  
  background-color: #dcdcdc;
  color: #000000;
  font-family: Courier New,Courier,Times New Roman,Arial;
  text-indent: 10px;
  
  /* IE Hack */
  voice-family: "\"}\"";
  voice-family: inherit;
  
  /* Version der Werte für "korrekte" Browser */
  width: 556px;
}

/* für Opera */
#content>#quelltext {width: 556px;}

.titel {
  text-indent: 0px;
}

Mein Problem ist, dass die Browser nach einem BR-Tag die Zeilen nicht noch weiter einrücken.

Der entsprechende Quelltext von der Seite an sich sieht folgendermaßen aus:

HTML-Code:

<div id="quelltext">
      <p class="titel">#left {</p>
      <p>position: absolute;<br />
      top: 0px;<br />
      left: 10px;<br />
      width: 180px;<br />
      padding: 10px;</p>
      <p>color: navy;<br />
      background-color: white;<br />
      border: 2px solid black;</p>
      <p>/* IE Hack */<br />
      voice-family: "\"}\"";<br />
      voice-family: inherit;</p>
      <p>/* Version der Werte für "korrekte" Browser */<br />
      width: 156px;</p>
      <p class="titel">}</p>
      <p class="titel">/* für Opera */<br />
      body&gt;#left{width: 156px;}</p>
    </div>

Wie schaffe ich es also, dass dann wirklich alle Zeilen, außer den Titelzeilen, eingerückt werden. Es muss IE-freundlich sein, sonst könnte ich es schließlich mit:

HTML-Code:

#quelltext>p {
  padding: 0px;
  margin: 0px;
}

machen und die HTML-File dementsprechend abändern.

mfg niji

**mitaki** · 06.08.2006 09:12

x.x Ich hasse diesen dunklen Hintergrund...

Überschriften solltest du mit den <h1> bis <h6> Elementen auszeichnen, nicht mit .title einfach nur bestimmte Absätze formatieren - Suchmaschienen danken es dir.

Zitat

Mein Problem ist, dass die Browser nach einem BR-Tag die Zeilen nicht noch weiter einrücken.

Ja, text-indent rückt nur die erste Zeile ein, es ist ein Stilmittel, wie Leseratten es aus Büchern kennen.

Zitat

Wie schaffe ich es also, dass dann wirklich alle Zeilen, außer den Titelzeilen, eingerückt werden. Es muss IE-freundlich sein, sonst könnte ich es schließlich mit:

Ist das > wirklich notwendig? Damit sagst du: Alle <p>, die direkt unter #quelltext liegen.
Ich will mal hoffen, dass du keine <div>Suppe hast, dann reicht es,

Code:

#quelltext p

zu schreiben: D.h. Alle <p> die sich innerhalb von #quelltext befinden werden angesprochen. Das wäre ausreichend und funktioniert auch im IE.

**dead_orc** · 06.08.2006 09:36

Wie mitaki schon sagte, soll text-indent gar nichts anderes machen. Aber da <p> ein Blockelement ist, würde ich einfach mal padding-left versuchen (davon abgesehen dass evtl. ein <pre> Bereich besser geeignet wäre, um die Einrückung darzustellen, aber das bleibt ja dir überlassen)

[EDIT]
Also für mich ist es kein Unterschied, ob ich nun padding oder margin verwende, und ich sehe auch nicht wirklich ein, warum der Außenabstand hier besser geeignet sein soll, aber wenn du meinst ^^

**mitaki** · 06.08.2006 11:22

Ich würde eher margin verwenden: Außenabstand

Sieht vor allem dann besser aus, wenn man auch noch einen Rahmen drum herum machen möchte.

[Bearbeitung]:
An deinem Beispiel sieht man nicht, was ich meine. Mein Beispiel zeigt dir, dass margin allgemein besser geeignet ist.

Nebenbei: Der Opera Browser gibt <html> als einziger Browser (logischerweise, d.h. richtig) einen Paddingwert für die Abstände zum Inhalt, denn margin wäre ja durchsichtig und daher nicht Teil des Inhalts.

Allerdings stimme ich dir zu, dass in diesem Fall <pre> vermutlich die Beste Alternative darstellt.

Thema: CSS - text-indent

Themen-Optionen

Anzeige

CSS - text-indent

Berechtigungen