--=REKLAMA=--
m (Skipper przeniósł stronę Creating clickable background images using CSS do Tworzenie obrazów tła z odnośnikiem z wykorzystaniem CSS) |
(Brak różnic)
|
No dobra, powiedzmy, że masz już w większości gotowy szablon (układ), taki typowy "korporacyjny" czyli: top (header), sekcję body, no i stopkę.
W nagłówku umieściłeś tło z wielkim logo i obok niego całkiem fajną grafikę, oraz - do tego wszystkiego - jakąś dynamiczną zawartość umieszczoną w prawym dolnym rogu wspominanego tła.
Nagle sobie uświadamiasz, że fajnie by było, gdyby kliknięcie logo przekierowywało użytkownika na stronę głównej. Zwykle wyciąłbyś kawałek obrazka, zamieniając go w link bezpośredni.
Ale, jak to często bywa, nie posiadasz wystarczająco czasu na to, by dokonać przeróbek swojego szablonu, więc to, czego potrzebujesz, szybka poprawka.
W tym punkcie twój kod HTML może wyglądać podobnie do tego:
<div id="site"> <div id="full-width-header"> <div id="header-content">Lubimy Joomla!</div> </div> <div id="body-content">OSM ratuje świat!</div> <div id="footer-content">(c) naprawdę ładny projekt</div> </div>
Oraz CSS jak ten:
#full-width-header { background: url(header-logo.jpg); width: 800px; height: 172px; } #header-content { position: relative; float: right; width: 400px; height: 172px; vertical-align: bottom; text-align: right; }
Notka: Niektórzy z was mogą użyć technik takich jak tab-interfaces gdzie zakładki powinny się rozciągać i nadal posiadać obrazek tła, albo blog-skins, która różni się tym, że odnosi się do CSS.
Przede wszystkim: Nie możesz skopiować #header-content div(kontener top), i umieścić go nad swoim logiem, ustawiając go jako niewidoczny i przyczepić do niego znacznika a. To by popsuło HTML, ponieważ nie możesz umieszczać elementów blokowych, takich jak div wewnątrz znacznika a.
Możesz natomiast wewnątrz znacznika a osadzić "rozciągnięty", jednopikselowy przeźroczysty GIF (jak w przykładzie pierwszym), jeżeli musisz dostosować swój szablon do starszych przeglądarek. Możesz także zwyczajnie przekształcić znacznik a w element blokowy używając CSS 2.1 (jak w przykładzie drugim).
Przykład 1 (przed CSS 2.1) HTML:
<div id="site"> <div id="full-width-header"> <a href="/"><img src="transparent.gif" id="home-link" alt="Nav: Start" /></a> <div id="header-content">Lubimy Joomla!</div> </div> <div id="body-content">OSM ratuje świat!</div> <div id="footer-content">(c) naprawdę ładny projekt</div> </div>
Przykład 1 (przed CSS 2.1) CSS:
#full-width-header { position: relative; /* niezbędne do absolutnego spozycjonowania potomnego elementu #home-link (dziecka) w stosunku do elementu header */ background: url(header-logo.jpg); width: 800px; height: 172px; } #home-link { position: absolute; width: 200px; /* szerokość logo */ height: 172px; /* wysokość logo */ top: 0; left: 0; /* lewy górny róg logo */ border: 0; float: left; } #header-content { position: relative; float: right; width: 400px; height: 172px; vertical-align: bottom; text-align: right; }
Przykład 2 (CSS 2.1) HTML:
<div id="site"> <div id="full-width-header"> <a href="/" id="home-link">Start</a> <div id="header-content">Lubimy Joomla!</div> </div> <div id="body-content">OSM ratuje świat!</div> <div id="footer-content">(c) naprawdę ładny projekt</div> </div>
Przykład 2 (CSS 2.1) CSS:
#full-width-header { position: relative; /* niezbędne do absolutnego spozycjonowania potomnego elementu #home-link (dziecka) w stosunku do elementu header */ background: url(header-logo.jpg); width: 800px; height: 172px; } #home-link { position: absolute; display: inline-block; width: 200px; /* szerokość logo */ height: 172px; /* wysokość logo */ top: 0; left: 0; /* lewy górny róg logo */ border: 0; float: left; visibility: hidden; } #header-content { position: relative; float: right; width: 400px; height: 172px; vertical-align: bottom; text-align: right; }