Forum PHP.pl > Ustawienie line-height i linki z ikonami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Ustawienie line-height i linki z ikonami

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

WebCM

11.11.2010, 15:59:18

Element <body> ma własności:

[CSS] pobierz, plaintext 
font-family: Tahoma,sans-serif;
font-size: 12px;
color: #313131
[CSS] pobierz, plaintext

W wielu miejscach stosuję linki z ikonami. Wygląda to tak:

[HTML] pobierz, plaintext 
<a href="adres/użytkownika" class="user">Użytkownik</a>
[HTML] pobierz, plaintext

Takich klas jest dużo, a czasami ustawiam background-image w kodzie HTML. Kod CSS tej klasy:

[CSS] pobierz, plaintext 
padding-left: 20px;
background-repeat: no-repeat;
background-position: -1px 50%;
background-image: url(user.png)
[CSS] pobierz, plaintext

Wszystkie ikony mają wymiary 16x16. Niestety nie wszystkie mieszczą się w pionie. Domyślna wysokość linii dla Tahoma 12px wynosi 14px. Nie da się ustawić line-height dla znacznika <a>. Pomaga tylko padding. Zatem jak globalnie rozwiązać ten problem? Pozostaje zwiększyć czcionkę?

1. Czy ustawiać globalnie w <body> wyższy line-height niż domyślny, czy tylko dla bloków tekstu?
2. Znacie lepszą czcionkę niż Tahoma 12px, która ma domyślnie większy height i ładniej wygląda?
3. Jak prawidłowo ustawiać ikony dla linków?

Sky_walker

19.11.2010, 10:57:55

Cytat(WebCM @ 11.11.2010, 15:59:18 )

1. Czy ustawiać globalnie w <body> wyższy line-height niż domyślny, czy tylko dla bloków tekstu?

Tylko dla klasy user? Zależy jak występują te ikony - jeśli są w środku tekstu to może ci to sypnąć odległości między liniami (ten efekt cząsto widać na forach www kiedy wstawisz emoticon w środku testu który ma wiele linii - wszystkie będą równe z wyjątkiem linii która ma uśmieszek)

Cytat(WebCM @ 11.11.2010, 15:59:18 )

2. Znacie lepszą czcionkę niż Tahoma 12px, która ma domyślnie większy height i ładniej wygląda?

Verdana chyba ma największą... ale tak do końca nie jestem pewien.

Cytat(WebCM @ 11.11.2010, 15:59:18 )

3. Jak prawidłowo ustawiać ikony dla linków?

Zobacz sobie jak ma to rozwiązana MediaWiki, np. Wikipedia, Wikia, albo podobne - tam też są ikony w środku tekstu.

Firebug i już wiesz

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.