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

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

senior.pol Zobacz profil	15.01.2014, 22:19:50 Post #1
Grupa: Zarejestrowani Postów: 158 Pomógł: 0 Dołączył: 10.08.2011 Ostrzeżenie: (0%)	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

Kshyhoo Zobacz profil	15.01.2014, 23:20:54 Post #2
Grupa: Opiekunowie Postów: 3 855 Pomógł: 317 Dołączył: 4.01.2005 Skąd: że	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 Powód edycji: [Kshyhoo]: -------------------- Jak poprawnie zadać pytanie \| Jak poprawnie zatytułować wątek Najczęstsze błędy \| Błędy E_NOTICE \| PHP FAQ \| FAQ PHPedia \| SQL-Injection \| Logowanie i sesje \| Hashowanie haseł \| Server - od czego zacząć ? \| Manual PHP Alternatywne Forum dla Ekspertów Nie pomagam na PW, nie mam GG

Crozin Zobacz profil	15.01.2014, 23:28:35 Post #3
Grupa: Zarejestrowani Postów: 6 476 Pomógł: 1306 Dołączył: 6.08.2006 Skąd: Kraków Ostrzeżenie: (0%)	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.

JarekPMI Zobacz profil	15.01.2014, 23:38:56 Post #4
Grupa: Zarejestrowani Postów: 25 Pomógł: 0 Dołączył: 14.01.2014 Ostrzeżenie: (0%)	Nie prościej będzie utworzyć jakiś png? a potem go ładnie ustawić?

senior.pol Zobacz profil	16.01.2014, 00:03:16 Post #5
Grupa: Zarejestrowani Postów: 158 Pomógł: 0 Dołączył: 10.08.2011 Ostrzeżenie: (0%)	Dzięki Panowie. Wszystko wygląda teraz jak trzeba

PrinceOfPersia Zobacz profil	16.01.2014, 02:12:14 Post #6
Grupa: Zarejestrowani Postów: 717 Pomógł: 120 Dołączył: 18.04.2009 Ostrzeżenie: (0%)	Cytat(JarekPMI @ 15.01.2014, 23:38:56 ) 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 -------------------- Live demo mojej wtyczki do Atoma (lepsza nawigacja po plikach)

1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)

0 Zarejestrowanych:

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Aktualny czas: 26.04.2025 - 01:40

Hosting zapewnia

Forum PHP.pl