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.

Nie wiem, o co Ci chodzi dokładnie, lukaj.

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

[CSS] pobierz, plaintext 
.xxx {
  list-style-type: none;
}
.circle {
  background: #fc2e5a;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  padding: 10px 15px;
  line-height: 40px;
}
[CSS] pobierz, plaintext 

Wkleję tez tu, bo mi coś jsfiddle mnie nie lubi

1. display: inline-block; by móc nadać wysokość i szerokość elementowi.
2. line-height: [100% wysokości]px; text-align: center; by wycentrować tekst w elemencie;
3. border-radius: 50%; by uzyskać kształt koła.
4. Jakieś tło.

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

Dzięki Panowie. Wszystko wygląda teraz jak trzeba

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)