Naszło mnie na filozoficzne rozmyślanie na temat elementu strony internetowej jakim jest logo.
Jak wiadomo powinno być w lewym górnym rogu, żeby nie łamać powszechnych schematów i nie wprowadzać użytkownika w zakłopotanie.
Ja jednak bardziej myślę nad tym w jaki sposób powinno być ono zakodowane. Czy powinno być ono zwykłym linkowanym obrazkiem, czy też linkiem z obrazkowym tłem? Tło nie jest drukowane więc gdyby komuś akurat zachciało się drukować daną stronę, to przydałoby się, żeby logo pojawiło się na kartce papieru, nieprawdaż? Czyli zostaje linkowany obrazek… Obrazek musi posiadać tekst alternatywny…
I tu nadchodzi moje główne pytanie. Jak ostylować taki obrazek, aby tekst alternatywny był wyśrodkowany w osi pionowej? Padding odpada, bo przy aktywnej grafice, logo będzie przesunięte. Chyba, że jednak lepszy jest link z obrazkowym tłem?
Niby w obecnych czasach mało kto wyłącza obrazki, ale mój wrodzony pedantyzm nie pozwala mi tego pozostawić bez rozwiązania .
jest tak: a powinno być tak:
------------------------------ ------------------------------
| tekst alt. | | |
| | | |
| | | tekst alt. |
| | | |
| | | |
------------------------------ ------------------------------
Nook , to oczywiste, ale mi chodziło o link takich samych rozmiarów i kształtu co obrazek, z tym że obrazek byłby tłem (może wcześniej niezbyt jasno napisałem o co mi chodzi). Wizualnie jest to samo lecz inaczej wykonane.
1 rozwiązanie:
[/code]
VS.
2 rozwiązanie:
[code] a { width:200px; height:100px; display:block; background:#999 url(‘logo.png’) no-repeat top left; } (…)
To pytanie chyba jednak nie ma sensu, a myślałem, że jest jakaś różnica, i któreś z tych rozwiązań jest lepsze od drugiego.
Link z tłem stosuje się po to by lepiej pozycjonować stronę, np:
tytuł strony
[/code] i styluje się to tak że text-indent wywala napis poza widzialny obszar a wstawia się tam obrazek jako tło h1 albo hiperlinka. Oczywiście odpowiednie rozmiary tych elementów itd aby wszystko grało. Posłużę się własną stroną, www.cotozaplik.pl, zobacz w kodzie sobie jak logo wygląda:
.