 Einrücken von Elementen mit HTML und CSS
Eine Einrückung gibt es als Defaulteinstellung in HTML-Listen. Manchmal ist eine Einrückung auch bei Textblöcken / Abschnitten sinnvoll. Sei es um die Wichtigkeit hervorzuheben oder um Zeilenlängen zu verkürzen.
Der erste Abschnitt dieses Beitrags ist veraltet! sihen zweiten Abschnitt  CSS-Technik
Transpixel als Layout-Hilfsmittel im HTML-Code
Auch hier möchte ich, bevor sie weiterlesen, auf die weit zeitgemäßerere Layout- und Designtechniken mit CSS hinweisen. Querverweise siehe unten.
Außerdem möchte ich ihnen dann browserunabhängige Lösungen anbieten. Leider gibts immer noch von Browser zu Browser unterschiedliche Darstellungen bei CSS-formatierten Elementen, z.B. bei Margin- und Padding, Breitenbstimmungen mit % (Prozent) und Schrifthöhenangaben.
(Zusätzliche) Einrückung von Elementen mit HTML
Beispiel: Einrückung von Listen mit HTML
- Menüleiste
- Symbolleiste
- Titelzeile
Sie können eine solche Aufzählung natürlich mit Hilfe einer Tabelle vom linken Rand absetzen. Das geht aber auch mit einem Transpixel! Zentrieren wäre hier keine Lösung.
 Menüleiste
Symbolleiste
Titelzeile
Menüleiste
Symbolleiste
Titelzeile
Ganz einfach ein transparentes Image vor der Liste notieren. Breite und Höhe passend bestimmen und die Ausrichtung auf links setzen.
<img align="left" src="transpixel.gif" width="80" height="50" border="0">
Menüleiste
Symbolleiste
Titelzeile
Einrückung von List-Elementen mit CSS
Für das oben dargestellte Beispiel einer Aufzählung gibt es eine bessere Lösung durch die Formatierung mit CSS. Eigene Aufzählungssymbole, Einrückung, ... Sogar die Positionierung des gesamten Aufzählungsblocks mit CSS-Anweisungen ist möglich.
Beispiele finden sie im Menü  Diverses 02 SiteMaps
Für Aufzählungen <ul> <li>
im Head-Bereich:
<style type="text/css">
<!--
ul.liste01{
list-style-image:url(grafikname.gif);
line-height:120%;
padding: xxpx;
margin: xxpx;
}
li.liste01 {
font-family: Arial,sans-serif;
font-size: 11px;
font-weight: normal;
color: #4F4F4F;
line-height:120%;
padding: xxpx;
margin: xxpx;
}
-->
</style>
experimentieren sie mit diesen Angaben:
list-style-image:url(grafik.gif);
list-style-position: Angaben; // zur positionierung
padding: xxpx;
margin: xxpx;
im BODY-Bereich:
<ul class="liste01">
< class="liste01"li>element1</li>
< class="liste01"li>element2</li>
< class="liste01"li>element3</li>
</ul>
Einrückung von Text / Bildern / ...
CSS-Anweisung im Head:
.block {
font-family: Verdana;
font-size: 11px;
background-color: #FFCEBF;
color: #2F2F2F;
padding: 15px;
margin-left: 40px;
margin-top: 0px;
line-height: 13px;
border:1px solid #BFBFBF;
}
Code im Body:
<div class="block">
Man will sie nicht kaputtmachen, und dann siegt doch die Neugier,
wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a.
Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und
gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich
die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß
färbt und gleich darauf das zweigeteilte Stück auf die Finger
zurückschnappt.
</div>
Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt.
Grafiken / Aufzählungszeichen vor Listelementen mit CSS
Grafiken / Aufzählungszeichen vor Listelementen mit HTML
farbige Bullets / Aufzählungszeichen mittels Sonderzeichen
| 
WWW.WEB-TOOLBOX.NET