--=REKLAMA=--

Tworzenie obrazów tła z odnośnikiem z wykorzystaniem CSS

Z Joomla!WikiPL

Wersja Skipper (dyskusja | edycje) z dnia 23:39, 21 lis 2013

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

O czym to jest

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.

Jak tego dokonać?

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;
}