Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: lista wypunktowana obrazkiem
Forum PHP.pl > Forum > Po stronie przeglądarki
smiady
Witam.

Mam taką listę wypunktowaną słoneczkiem smile.gif
  1. ul {
  2. list-style-image: url('http://www.przedszkole-sloneczko.eu/sites/all/themes/sloneczko/images/sloneczko-icon.png');
  3. }
  4. <ul>
  5. <li>pierwsza linijka</li>
  6. <li>druga linijka</li>
  7. <li>trzecia linijka</li>
  8. <li>czwarta linijka</li>
  9. <li>piąta linijka</li>
  10. </ul>


Chodzi o to, że jeśli obrazek ma większą wysokość od tekstu to tekst jest na dole przy obrazku, a warto żeby było po środku (najlepiej pobrać sobie kod i zobaczyć).
Jak wyśrodkować tekst przy słoneczku ?
trueblue
Kod
li{
    background: url(url_do_grafiki) no-repeat;
    line-height: Xpx; /* X=wysokość grafiki */
    vertical-align: middle;
    padding-left: Xpx; /* X=szerokość grafiki + odległość od tekstu */
}
smiady
Potrzebuje jeszcze inna kwestię tzn gdy jest odwrotnie - obrazek jest mniejszy od tekstu to też tworzy pewne problem przy odpowiednim sformatowaniu.
Problem ten obrazuje przykład:
  1. ul {
  2. list-style-image: url('http://moneyzoom.pl/blog/wp-content/uploads/2010/10/dom1.jpg');
  3. }
  4. <ul>
  5. <li>pierwsza<br/>linijka</li>
  6. <li>druga<br/>linijka</li>
  7. <li>trzecia<br/>linijka</li>
  8. <li>czwarta<br/>linijka</li>
  9. <li>piąta<br/>linijka</li>
  10. </ul>
trueblue
background-position:0 center;

line-height wtedy nie jest potrzebne.

Wydaje mi się, że vertical-align w obydwu przypadkach nie jest potrzebne.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.