Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : 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:
#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:
<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:
#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.


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.


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,
#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 (http://deadorc.ath.cx/~dead_orc/padding.html) oder margin (http://deadorc.ath.cx/~dead_orc/margin.html) 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.

:
An deinem Beispiel sieht man nicht, was ich meine. Mein Beispiel (http://adventures.mania-network.de/pub/pum.html) 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 [B]die Beste Alternative darstellt.