Lecke html elrendezés - kattintható emblémával ellátott réteg (div)
A feladat a következő. A fejlécben van egy egész képet, ahol a logó található. Ez szükséges ahhoz, hogy ez kattintható, úgy, hogy ha rákattint, elhaladtunk a főoldalon. Megjegyzem, hogy a következő intézkedésekkel lehet hasznos, ha nem szedése sablont a semmiből, hanem egyszerűen csak szeretnénk, hogy néhány változtatást már valaki más elrendezés - a téma számunkra wordpress, például.
Kezdeni, vágott segítségével photoshop logóképhez, amelyet el kell kattintani:
Ezután szeretne hozzáadni a HTML kódot egy új réteget. Találunk a sablon helyét, ahol a kép jelenik meg a fejlécben, és tegyük egy DIV elem. Kapunk valami hasonló szerkezete a következő:
A CSS stílusokat fájl írási:
Ott ingatlan position: absolute átlag, hogy a pozicionálás fog bekövetkezni a bal felső sarokban az oldal, és ebben a példában - elem
Z-index tulajdonság meghatározza a sorrendben egymást átfedő a rétegek egymáshoz kérelemre. Blokk DIV magasabb index lesz található magasabb, mint az alacsonyabb érték.
Gyakran előfordul, hogy wordpress sablonok, vagy bármely más meghatározott árrés vagy keretek az összes kép az oldalon, ezért előfordulhat, hogy vissza kell állítani ezeket az értékeket:
Ui Ha megy, hogy szervezzen egy verseny, egy nagy byuzhdetom, azt javasoljuk, olvassa el a cikket gazdaság ilyen események.
By the way, hogy kiemelje a kódot a blog, akkor egy speciális bővítmény wordpress.
Mint a bejegyzést? Feliratkozás a blog frissítéseket RSS. E-mail vagy a Twitter.
De én mindig kíváncsi volt, hogy, hogy egy hivatkozás a logó, akkor, ami megjelenik a háttérben és a nyilvántartások CSS.
Megpróbálom foglalkozni vele legközelebb.
Ez sokkal logikusabb, hogy a kép pontosan a háttérben, kattintható (ugyanazon szerint zakryvayuscheyumusya
Ehhez meg kell csak a szöveget a link - szöveg (És van díva id = »header») és egy CSS tulajdonság:
#header a background: url ( 'images / logo1.jpg');
Aztán - jobb padding (padding a kereten belül) a képpont.
padding: jobb felső bal alsó részen;
>
A probléma továbbra is a szövegben, amelyet továbbra is a kép közepén. Hogy kiszorítsa azt tisztán vízszintes, akkor a text-indent jobb a mi #header a.
Ha ez a függőleges, a szöveget a linkeket meg kell ragaszkodni a span - szöveg. És a CSS, hogy írjon további párnázattal a Spano, jól, vagy abszolút pozicionálás (csak ebben az esetben a fejlécben kell position: relative, figyelembe kell venni kapcsolatban a blokk, nem pedig az egész területet a képernyőn).
Ez dióhéjban;)
#header a background: url ( 'images / logo1.jpg') no-repeat;
Köszönjük ilyen részletes konzultációt :) Ami a háttérkép - nem igazán szeretem, mert Először is van betöltve, miután az egész oldalon, valamint a stílus (bár ez nem kritikus), másrészt bizonyos CMS nem lehet szerkeszteni a CSS fájl segítségével az admin felületen. Ugyanakkor megváltoztatásának lehetőségét a logó, hogy kívánatos + újra többnyelvű nehéz lehet. Ez nem egy nagy probléma, persze, mint ahogy szoktam dolgozni.
By the way, ez nem igaz. Még a szamár 7. és 2. a hajó minden egyes fájlokat többé-kevésbé párhuzamos (ott lehet megtekinteni webo.in diagramkoy). Ie betöltött HTML és CSS, képek a CSS, képek IMG. Stílusok általában be kell tölteni a lehető leghamarabb, mert A böngésző rájuk az épület alaprajzának, így azok még az opera gyorsan betöltődik. Most van egy DSS nem sikerült zsugorodik kevesebb, mint 4 kB, gzip, én nem érvényesek, így reflash mindig van egy második kezdete után a letöltési oldalon a szegény arány.
Plusz ne feledkezzünk optimalizálás - ha minden DCS képeket lehet tenni egy CSS Sprite (mint az enyém - bár egy tucat különböző alkalmazott elemek sprite számát csökkenti a HTTP-kérelmeket képeket akár 2) és menteni a gombafonalak-APG korlátozott paletta (Photoshop válassza a Mentés szalag, és játszani a színekkel és a számuk), akkor minden rendben lesz betöltve gyorsabb és pokoli jó.
Bármilyen probléma a változások nem okoznak, sőt. És ez a módszer sokkal Walid semantichen, és több rövid, hogy dolgozzon ki egy mechanizmust a módosításokat.
Megértem a maguk számára, ahogy gondolja:
a) Van egy háttér
b) azt szeretné, hogy része legyen a háttérben utalt
c) Ön egy új réteget a háttérben az a kép, és tedd jobbra a tetején.
Ön alapvetően mindent jól csinálni, de én is a feladat egyszerűsítésére. Ahhoz, hogy egy átlátszó gif, a méret a része, ami a háttérben kell lennie egy hivatkozást, ahelyett, hogy „első vágás a Photoshop logo kép, ami kell kattintani:”.
Amit végül a:
a) kevésbé szar helymeghatározás pontossága.
b) elősegíti a teljes súlya a képek a honlapon.
Angelz, átlátható gombafonalak - nagy, sajnos nem találja a megvalósítása ennek az eljárásnak, ezért kérte a. Úgy érzem, a megoldás erre a problémára sok. Vajon melyik a legjobb, mert a nyomdai Találkoztam nagyon különböző.
Én ugyanazt a verziót Angelz. Ha azt szeretnénk, tudok adni egy linket egy oldalra, ahol én festettem meg!
És mégis, ez történhet segítségével HTML:
Tegyük fel, hogy van egy kép 100 * 100, és van, hogy a hivatkozás a téglalap-m-pont 40, 40 és 90; 60
Akkor írd:
A módszer a régi, de a CSS nem érinti azt, és a hatás mind a kivitel átlátszó gifom.
A megoldás az, hogy a kérdést:
0) Kezdjük a módszer a cikkben tárgyalt.
Előnyök: ez a munka, és az első dolog, ami eszébe jut.
Hátrányok: van, hogy szigorúan kövesse a logo-t pontosan a helyén, mivel (ha komplex háttér) pixel balra, jobbra pixel egyenértékű halál. Amikor egy gumi elrendezés még nehezebb. + Van egy extra pár kilobájt le a felhasználó.
1) A legegyszerűbb módja annak, hogy egy átlátszó gif (1x1 pixel) - ugyanakkor mindent elkövetnek ugyanúgy, ahogy az a cikk, de nem kell semmit a Photoshop vágás. Fontos! A méretet a gif feszített az egész logó.
Előnyök: egyszerű és gyors; Felhasználó minden rendben van.
Hátrányok: Logikusan, a logó lehet tekinteni, mint a szemantikus elem az oldal. Ha megpróbálja, például a „mentés másként” vagy nyomtassa ki az oldalt (ha nincs külön identitást print) nem a logó - mint kiderül a telepítést.
2) Ha az egész képet header szedése nem háttér, és egy. hozzá lehet rendelni térkép - többet bármilyen tankönyv html. De ahogy az elavult, mint most erre a célra bekgraund, és nekik ez nem alkalmazható technológia.
3) Egy másik módszer módosításával jegyzetek: Karttika logo szépen vágni és sPNG.
Előnyök: nem törik logika (több szemantika) oldal; ha a kép lefelé mozog egy kicsit az oldalon - ez észrevehetetlen. Minden szép.
Hátrányok: tudjon a probléma a PNG formátum az IE és néhány kilobyte a felhasználó számára (bár egyesek azt állítják, hogy még png rázza jobban gpeg, de nem tudom - csak nem a Photoshop).
Döntés - ha a szemantika az oldal nem fontos - alkalmazzon átlátható gif felett, különben a játék egy png.
PS úgy történt, hogy ne is egy cikket a blogjában is :)
Kitich, szeretem látni - Én kellemesen sokkolt! Köszönöm a pontosítás. Érvényes külön bejegyzést dolog :)
Én magam nem szedése, de szembe egy sablont a fejlesztési területek, így hozta a lehetőség, hogy látom a leggyakrabban. Van még egy átlátszó gif, de gyakrabban használják a kis ikonok - sitemap, honlap, de a logó folyamatosan végre a DIV, amely a tetején a háttérben. Ebben az esetben, egy jó dolog, hogy tudja menteni a képet.
Kis add, ha egy ilyen vitát. PNG igazán rázza jobb, mint a GIF képek malotsvetnyh. Ehhez a Photoshop kell menteni Mentés webre és válassza ki a színek számát a palettán, helyesen szedés is egy módja a diszperziós. Jpeg jobb, az biztos -, mert Ez nem jelenik meg a tömörítési hibák. nem jelent problémát a PNG-8 bármelyik új böngészők, beleértve IE6, az erősítés összehasonlítva a tömörített GIF - 5-10%, mint a JPEG - több. Ha szükséges áttetszőség (az embléma általában nem szükséges), akkor valóban, nem lesz probléma a PNG-24.
Mentése a logó, mint egy felesleges dolog általában, így háttér Előnyös mégis. Emellett szemantika is szerepet játszik és optimalizálása - általában zárva párhuzamos töltés több mint 3 kép, és a CSS indulásakor szinte azonnal a HTML. És a háttérképet betöltött gyorsan - ez az, amit szeretnénk, hogy az összes képfeldolgozó nem a „poszt-terhelés” (viszonylag).
Szerint map'am is hozzá - nem mindig lehet előírni a háttérben. Általában mapy most szükség van, hogy csak egy esetben - ha azt akarjuk, hogy csökkentsék Colvai képeket egy oldalon, hogy lehet csatlakoztatni az img. Ez teljesen normális megközelítés.
A többi a módszerek áttekintésére - kiváló.
Nos, PNG-8, ha jól értem, nem ad áttetszőség :(
Mégis valahol rábukkantam ezt a véleményt: a Photoshop nem az összes funkciót használni PNG-24 - nem túl szűk a legjobb módon. Azt javasoljuk, egy szoftvert is működik PNG, de én nem figyeltem, sajnos.
A „poszt-terhelés” köszönöm. Találkoztam ezzel a véleménnyel, de csak most értette, miért olyan :)
Általában csak a saját elrendezés gyűjteni, úgyhogy :).
Igen, PNG-8 nem szállít. De a push 24, ahol nincs rá szükség - nem éri meg :). Körülbelül a remegés nem a legjobb módja - talán még 5-10% lehet menteni, így ha emlékszel, milyen szoftver - írja a blogomban (én már egy előfizető, igen)))
A „poszt-terhelés” persze, nem olyan egyszerű. Már az anyagok sunnybear, dokumentálja a Yahoo és mások megpróbálták befejezni a Talmud, hogy optimalizálja a blog (mint a WordPress), de ebben a kérdésben eddig csak több kérdést, mint választ.
Lord, felajánlása előtt PNG24 (és a kapott kimenet a bolt) megnézzük a statisztikákat használatának szamarak 5. és 6. változat. Sajnos, sok webes tervezők, köztük én is, használja őket leginkább. És azok párja tambura, futtatásához szükséges az alfa csatorna IMHO nem éri meg a kilobyte és szépségét.
Tehát nézd, milyen szép ez a png24 habverővel kapzsi szakadás, és felejtsd el, míg a világ irodai plankton, és azok, akik az adminok nem teszik lehetővé, hogy tegyen semmilyen más böngésző kivételével telepítés előtti (Én nem beszélek a böngésző motor szamár) nem peresyadut legalább 7. ass.)))
Aztán emlékszem, kiderült, hogy a népszerű csapkod, amit használtam, görbe munka (meglehetősen váratlan fordulat) az Operában :) Ennek eredményeként töltött sok időt, hanem azt, hogy történt - nem emlékszem. Szükség lesz ásni és írni külön-külön.
Bekgraunda probléma valószínűleg megoldható oly módon, de én nem vitatkozom.
Nem vagyok ellene vita)) Minél több ilyen érdekes és hasznos. Én személy szerint png nem akadályozza, elvileg van némi hack keresztül htc fájlt találkozom a legújabb projektek lefektetett.
Boyancheg, de a legtöbb kezdőknek)
Általában az a lényege, hogy - a div, ahol background'e beállított képet átfedik egymást div propisaniem css-tulajdonság position: absolute; attól függően, hogy milyen a kép egy részét, azt szeretné, hogy a hivatkozás szabni a div a megfelelő helyre (az egyszerűség kezdeni kérdezni border: 1px solid, ez volt látható, ahol mozgatni :) persze majd távolítsa el vagy egyenlő a 0px) beállítja a magasság és a szélesség van szintén CSS (például: szélesség: 150px; height: 36px;), majd a nagyon div'e ír esemény onClick = »document.location = 'index.php'» - ez csak egy példa index.php megadhatja, ahová a link =))). És így, és kívánatos lenne, hogy a div-link :) adja z-index a fenti 1 = mint).
átállítást ezek az értékek segítségével lehet a *
Köszönöm szépen! Én használ a cikk, hogy egy új sapkát a honlapján „teljes hosszúságú” - azaz, nézd: enioway.ru
Most a helyén terhelés sokkal gyorsabban - egyszer, nagyon köszönöm!
Catherine, meg kell találni a CSS-stíluslap fájlt tag „a” vagy egy osztály, amely meghatározott, és szerkesztheti őket.
úgyhogy az osztályban a fejléc és referenciák a fejlécben megadott érték határ: nincs
div.art-fejléc-logo
pozíció: abszolút;
árrés: 1px 445 93 13px;
z-index: 2;
>
div.art-fejléc-logo img
border: none fontos ;!
margin: 0px;
>
div.art-Fejes-logo egy img
border: none fontos ;!
margin: 0px;
>
vagy nincs itt? vagy akár az összes, hogy tekintetében „a” tag?
Beszélünk „könyvem”? mivel a keret, és megjelennek bármilyen böngészővel?
Il hosting elárasztott nélküli változatát a „tárgy”?
Igen, róla, de én már a képzés a lokalhoste, így semmi sem működik :) Mazilu. Tehát mit kell tenni?
Csak nehéz elkapni ezeket a hibákat nem látja az összes kódot - ők is előfordulhat, mivel más stílust vagy kód elemeit, hogy senki lát, de :)
Próbálja meg hozzáadni border: none fontos ;! nem csak a képet, hanem a kapcsolat, és hogy az összes elemet közöttük, ha van. Szintén vegye fel nagy vonalakban: 0; - Ez a paraméter felelős a „stroke” linkre, ha rájuk kattint.
köszönöm szépen a bővítés)))) ez kényelmes! de a keret csavar nem megy ... :(
Talán írok képtelenség, de egy vak teszt, így van -_-
1. Tegyük fel, hogy div.art-Fejes-logo a
Ha még nem tett semmit a fenti, nem (bár 2 bekezdés most fog járni több).
4. Ha ilyen elem megtalálható, ellenőrizze a szomszédos elemek - is ott van valami extra.
5. Talán nem border'e és néhány külső elem van vágva, és a háttérben, amely megteremti a hatása a keret.
Amíg meg nem jön semmi több :(
Nagyon köszönöm a segítséget :) én kezdődött elölről, és mindfully, és működött. Úgy látszik, véletlenül és fáradt fejét :) Köszönöm még egyszer, elment a kocsmába, hogy készítsen!
Gratulálok. Ugyanakkor valami újat tanult)
Üdvözlünk! Csináltam? Nem tudok (((
Az index.php szeretek:
A template.css így (a végén befejezetlen):
.logo1 position: abszolút;
árrés: 1px 1px 0 0;
z-index: 100;
>
Semmi sem változott valamilyen okból (((
Most csak szórakozni a logót. Hozzászólás a témában, azt meg fogja érteni.
Én is hiszem, hogy, hogy egy linket a képre, ha le van írva a CSS ... megpróbál egy átlátszó gifom)))
Kedves emberek, nagy emberi köszöni, 04:00 ment keresztül az összes tanulságot Krivorukov, és csak ezt a blogot tudott adni nekünk valamit, hogy segítsen, köszönöm, köszönöm!
És hogyan lehet kattintani a képek nem téglalap alakúak? Például egy háromszög?
Vjacseszlav, hogy őszinte legyek, nem tudom. Volt egy elemet a HTML, amely lehetővé teszi, hogy hivatkoznak különböző formáit képeket, de sajnos nem emlékszem mi a neve. Szükség van a google, de van olyan is, bonyolult az összes lehetőséget.
Kitich, köszönöm, ez az! 10 perc eszébe jutott, hogy ezek a címkék hívják.
Mivel nem tudom, hogy a háttérben kattintható link jelenik meg a film portálok (
Focus, úgy a megoldás erre a problémára ebben a cikkben.
Ha kérdése van, írjon [email protected]