[TYPO3-german] Bullets mit CSS formatieren

[JoH asenau]

>> Üblicherweise gibt es bei der Positionierung von bullets keine
>> Crossbrowser-Problematik. Sie werden bezogen auf das dazugehörige
>> <li> in der Regel linksbündig und veritkal mittig angezeigt.
>> Sollte das Ergebnis dennoch davon abweichen, dürfte das daran
>> liegen, daß innerhalb der <li> Tags weitere Tags wie z.B. ein <a>
>> enthalten sind. Die Kunst liegt also nicht darin, die bullets
>> korrekt zu positionieren, sondern die Box des darin enthaltenen Tags.
>>
>> Ein kurzer Ausschnitt aus dem erzeugten HTML-Code sowie des
>> dazugehörigen Abschnitts im CSS wären vielleicht ganz hilfreich.
>>
>> Joey
>
> Dann will ich mal die Ausschnitte vorführen :)

Ich muß zugeben, daß ich wohl besser mal meine Signatur beherzigt hätte ;-)

Wobei es mit ein wenig Gefrickel keine Probleme mit der Positionierung in
der Höhe gibt, solange die <li> Einträge einzeilig bleiben.
Ab dem Zeitpunkt, wo es aufgrund der erzwungenen Breite von 320px zu einem
Zeilenumbruch kommt, funktionieren IE und FF nämlich nochmals völlig
verschieden voneinander.
Damit werden die Tricksereien für die einzeilige Lösung (mit line-height,
max-height, vertical-align und padding) gleich wieder hinfällig.

Weil mich das aber immer stört, wenn etwas nicht geht, habe ich mal etwas
herumgespielt und bin zu folgendem Ergebnis gekommen.
Die Lösung verwendet <dl> als Liste, <dd> als Bullet und <dt> als Text.
Es steht ja nirgendwo geschrieben, daß man Listen mit <ul> bauen muß ;-)

<style>
* {
  font-family:Arial;
  background:#fff;
}

.inhalte dd
{
 position:relative;
 display:list-item;
 list-style-image:url(http://www.4any1.de/fileadmin/bgr_bullet.gif);
 border-bottom:1px solid #fff;
}

* html .inhalte dd
{
 left:-0.5em;
}

.inhalte dt
{
 position:relative;
 margin:0;
 left:2.5em;
 top:-1em;
 margin-top:-2px;
}

.inhalte dl
{
 width:320px;
}
</style>
<div class="inhalte">
<!--  CONTENT ELEMENT, uid:108/text [begin] -->
<a id="c108"></a>
<!--  Header: [begin] -->
<div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Business
Consulting</h1></div>
<!--  Header: [end] -->

<!--  Text: [begin] -->
<p class="bodytext">Business steht für gestaltungsorientierte Bilanzierung
und Steuerdeklaration. Wir verbinden qualitativ hochwertige und innovative
Beratung mit einer umfassenden Mandantenorientierung. Wir fragen uns, welche
Anforderungen an Sie und Ihr Unternehmen gestellt werden und nehmen uns
Zeit, um optimale Lösungen für Ihre wirtschaftlichen und steuerlichen Fragen
zu finden.<strong><br><br>Leistungen:</strong></p><dl><dd><!-- 
BULLET --></dd><dt>Stellungnahmen zu Bewertungsfragen und
Bilanzpolitik</dt><dd><!-- BULLET --></dd><dt>Betriebliche
Steuererklärungen</dt><dd><!-- 
BULLET --></dd><dt>Break-Even-Analyse</dt><dd><!-- 
BULLET --></dd><dt>Kosten-Leistungsrechnung</dt><dd><!-- 
BULLET --></dd><dt>Vorausschauende wirtschaftliche Gestaltung</dt></dl>

<!--  Text: [end] -->

<!--  CONTENT ELEMENT, uid:108/text [end] -->
</div>

Getestet unter IE6, IE7 und FF mit dieser URL
http://www.4any1.de/index.php?id=2361

Vielleicht hilfts ja diesmal ;-)

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your gob sometimes!)
Dieter Nuhr, German comedian
openBC/Xing: http://www.cybercraft.de
T3 cookbook: http://www.typo3experts.com