12.October 2024    
   homeProjekteSoftwareCSS-Snippets

 

Hobby 234x60
reichelt elektronik – Elektronik und PC-Technik
Seite zuletzt geändert: 19.07.2013 18:57

CSS-Snippets

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.

Positionieren von list-style-image zum li-Text

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).

 

 

Ursachen für Probleme mit automatischer Höhe von div-Elementen

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.

 

 

Keine Kommentare
Kommentar hinzufügen

* - Pflichtfeld

*



*
Copyright © 2008-2017