Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> lista wypunktowana obrazkiem
smiady
post 8.02.2015, 20:18:16
Post #1





Grupa: Zarejestrowani
Postów: 137
Pomógł: 2
Dołączył: 2.07.2007
Skąd: Ostrzeszów

Ostrzeżenie: (0%)
-----


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 ?
Go to the top of the page
+Quote Post
trueblue
post 8.02.2015, 20:26:48
Post #2





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


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 */
}


--------------------
Go to the top of the page
+Quote Post
smiady
post 10.02.2015, 20:45:04
Post #3





Grupa: Zarejestrowani
Postów: 137
Pomógł: 2
Dołączył: 2.07.2007
Skąd: Ostrzeszów

Ostrzeżenie: (0%)
-----


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>
Go to the top of the page
+Quote Post
trueblue
post 10.02.2015, 20:57:16
Post #4





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


background-position:0 center;

line-height wtedy nie jest potrzebne.

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



--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 5.05.2025 - 08:20