Diese Seite enthält ein paar kleine Codesnippets und Notizen für CSS. Es handelt sich nicht um hochwissenschaftliche Ergüsse, sondern eher um ein ausgelagertes Gedächtnis.

Ein benutzerdefiniertes Bullet-Image für eine Liste (CSS-Standard: list-style-image) kann schöner positioniert werden, wenn es nicht als list-style-image benutzt wird, sondern als Hintergrundbild für den Listeeintrag.

Im HTML haben wir dabei eine simple unsortierte Liste:

 

<ul>
  <li>ein Punkt</li>
  <li>und noch ein Punkt</li>
</ul>

 

 

Im CSS können wir diese so mit einem Image versehen:

 

ul li {
  list-style-image: none;
  list-style-type: none;
  background: url(/img/aufzaehlung.png) 0 0 no-repeat;
  margin-left: -23px;
  padding-left: 18px;
}

 

 

Mit dem margin-left und padding-left können wir eine Feinpositionierung der Liste und des Listentextes vornehmen, über die Positionsangabe des background-Images auch eine genaue Positionierung desselben (insbesondere in der Vertikalen interessant).

 

 

Altes Problem:

Man hat div-Elemente definiert und der Inhalt, der in den Elementen drinsteht, läuft drüber hinaus.

Ursachen können sein:

• ein Unterelement, welches Daten enthält, hat im CSS eine "float"-Eigenschaft. Das bricht die automatische Höhe auf und der Inhalt läuft aus dem Rahmen.
• ein Unterelement wurde mit "position: absolute;" positioniert - auch hier weiß das übergeordnete Element, welches sich eigentlich automatisch vergrößern soll, nichts mehr davon und bleibt bei seiner voreingestellten Größe.