[HTML][CSS]Koło i napis w środku Opcje

[senior.pol]

Witam,

Chcę, zrobić koło, a w nim tekst np. "1".

Krótki zapis kodu:

[HTML] pobierz, plaintext 
<ul class="xxx">
        <li><i class="nr">1</i> Jakiś tam tekst.</li>
</ul>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.xxx li i.nr {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	text-align: center;
}
[CSS] pobierz, plaintext 

Próbowałej już kombinować, ale na razie bez efektów. Proszę o pomoc w rozwiązaniu problemu.

Ten post edytował senior.pol 15.01.2014, 22:28:41

[JarekPMI]

Nie prościej będzie utworzyć jakiś png? a potem go ładnie ustawić?

[PrinceOfPersia]

Nie prościej będzie utworzyć jakiś png? a potem go ładnie ustawić?

nie będzie prościej.
- więcej kilobajtów do ładowania
- png się nie skaluje (tj. przy powiększeniu png widać piksele)
- nie da się łatwo modyfikować, np. koloru, rozmiaru (łatwo = bez odpalania programu graf. i eksportowania do png)

sztuczka z border-radius to trochę hack, ale i tak zrobienie i eksport obrazka w PNG wcale nie jest prostsze od dopisania tych paru linijek HTMLa...

Reszta prostych kształtów: http://css-tricks.com/examples/ShapesOfCSS/
(chociaż przy bardziej złożonych kształtach kod robi się niezbyt elegancki)

Ten post edytował PrinceOfPersia 16.01.2014, 02:14:13