Sarcina este după cum urmează. În antetul există o imagine de ansamblu, în care se află logo-ul. Este necesar pentru a face clic pe acesta, astfel încât, atunci când faceți clic, am trecut pe pagina principală. Am act de faptul că următoarele acțiuni vor fi de folos dacă nu typeset șablon de la zero, ci pur și simplu doresc să facă unele schimbări în aspectul deja altcuiva - tema pentru noi WordPress, de exemplu.
Pentru a începe, se taie cu ajutorul Photoshop logo-ul de imagine, care trebuie să fie clickable:
Apoi, pe care doriți să o adăugați în codul HTML al unui nou strat. Am găsit locația șablon în cazul în care imaginea este afișată în antet și puneți-l un alt element DIV. Obținem ceva de genul următoarea structură:
În stiluri CSS scriere fișier:
Poziția imobil: medie absolută de poziționare, care va avea loc din colțul din stânga sus al paginii, iar în acest exemplu - elementul
Z-index proprietate specifică ordinea de suprapunere a straturilor una față de alta, la cerere. Bloc DIV indice mai mare va fi amplasat mai mare decât cea cu valoare mai mică.
De multe ori, WordPress template-uri sau orice alte margini sau cadre definite pentru toate imaginile de pe site-ul, astfel încât este posibil să trebuiască să resetați aceste valori:
P.S. Dacă aveți de gând să organizeze o competiție cu un byuzhdetom mare, vă recomand să citiți articolul privind deținerea unor astfel de evenimente.
Apropo, pentru a evidenția codul în blogul dvs., puteți utiliza un plugin special pentru WordPress.
Ca și postul? Aboneaza-te la blog actualizări prin RSS. E-mail sau Twitter.
Dar m-am întrebat întotdeauna dacă să facă o trimitere la logo-ul, puteți, care este afișat ca fundal și registre în CSS.
Voi încerca să se ocupe de ea data viitoare.
Este mult mai logic pentru a face imaginea exact fundal, clickable (la fel, în conformitate cu zakryvayuscheyumusya
Pentru a face acest lucru, avem nevoie doar textul în link-ul - text (Și este în Diva id = »header») și proprietatea personală CSS:
#header un fundal: url ( 'imagini / logo1.jpg');
Apoi - padding dreapta (umplutură în interiorul cadrului) în px.
padding: partea de sus din dreapta jos din stânga;
>
Problema rămâne în text, care va rămâne în centrul imaginii. Pentru a-l deplasa într-o pur orizontală, puteți utiliza dreptul de text liniuță în #header un nostru.
În cazul în care este vertical, textul din link-urile de care aveți nevoie pentru a lipi la durata - text. Și în CSS pentru a scrie padding suplimentare în Spano, bine, sau poziționarea absolută (numai în acest caz, la antetul trebuie să fie poziția: relativă, care urmează să fie luate în considerare în raport cu blocul, mai degrabă decât întreaga zonă a ecranului).
Acest lucru pe scurt;)
#header un fundal: url ( 'images / logo1.jpg'), fără a repeta;
Vă mulțumim pentru o astfel de consultare detaliată :) În ceea ce privește imaginea de fundal - nu iubesc cu adevarat, deoarece În primul rând, acesta este încărcat după întregul site, precum și stiluri (deși acest lucru nu este critică), și în al doilea rând, în unele CMS nu este posibil să editați fișierul CSS prin panoul de administrare. În același timp, posibilitatea de a schimba logo-ul pentru a face de dorit + din nou, cu mai multe limbi poate fi dificil. Nu este o mare problemă, desigur, la fel cum am folosit pentru a lucra.
Apropo, nu este adevărat. Chiar și 7 măgar și nava doilea toate fișierele individuale este mai mult sau mai puțin paralele (pot fi vizualizate pe diagramkoy webo.in). Ie HTML încărcate și CSS, imagini de la CSS, imagini IMG. Stilurile au, în general, să fie încărcate cât mai curând posibil, deoarece browser-ul este pe ele construirea de aspect, astfel încât acestea sunt chiar în opera încărcate rapid. Acum am o DSS nu a reușit să se micșoreze mai puțin de 4 kB, gzip, nu se aplică, astfel încât reflash au încă o secundă după începutul paginii de descărcare de pe rata slabă.
În plus, nu uita de optimizare - în cazul în care toate imaginile DCS posibil, pentru a pune într-un singur sprite CSS (cum ar fi a mea - deși o duzină de elemente diferite sprite utilizate reduce numărul de HTTP-cereri pentru fotografii de până la 2), și salvați în hifelor-APG, cu o paletă limitată (Photoshop, selectați Salvare pentru web ca și să se joace cu culorile și numărul lor), atunci toate vor fi încărcate mai repede și se răcește mai infernal.
Orice probleme modificările nu cauzează, de fapt. Și această metodă este mai Walid semantichen, și mai scurt pentru a veni cu un mecanism de modificări.
Am înțeles pentru ei înșiși așa cum crezi:
a) Ai un fundal
b) pe care doriți să facă parte din fundal se referea
c) a face un nou strat cu fundalul imaginii și a pus-o chiar pe partea de sus.
Tu faci practic totul corect, dar eu pot simplifica sarcina. Pentru a face un gif transparent, mărimea părții din fundal, care trebuie să fie o referință, în loc de „Prima tăiere folosind Photoshop logo-ul de imagine, care trebuie să fie da clic:“.
Ceea ce am terminat cu:
a) mai puțin rahat cu o precizie de poziționare.
b) să faciliteze greutatea totală a imaginilor de pe site-ul web.
Angelz, hife transparent - mare, din păcate, nu a găsit punerea în aplicare a acestei metode, prin urmare, a aplicat lui. Mă simt soluțiile la această problemă sunt multe. Mă întreb care unul este cel mai bun, pentru că în typesetting am întâlnit foarte diferite.
Eu folosesc aceeași versiune ca Angelz. Dacă doriți să pot da un link către o pagină în cazul în care l-am pictat!
Și totuși, acest lucru se poate face prin intermediul HTML:
Să presupunem că avem o imagine de 100 * 100, și trebuie să facă referire la dreptunghi-m la punctele 40, 40 și 90; 60
Apoi scrie:
Metoda este veche, dar CSS nu-l atinge, și efectul atât pe versiunea cu gifom transparentă.
Soluția mea la întrebarea:
0) Să începem cu metoda discutată în articol.
Pro: este vorba de muncă și primul lucru care vine în minte.
Contra: trebuie să urmeze cu strictețe logo-ul a fost exact în locul ei, din moment ce (atunci când se utilizează de fundal complex) de pixeli la stânga, pixelul dreapta este echivalentă cu moartea. Atunci când un aspect de cauciuc este chiar mai dificil. + Este un plus câteva kilobytes pentru a descărca utilizatorului.
1) Cel mai simplu mod de a face un gif transparent (1x1 pixeli) - în același timp totul se face în același mod cum este descris în articol, dar nu au nevoie de nimic în Photoshop tăiate. Important! setați dimensiunea la GIF întins întregul logo-ul.
Pro: ușor și rapid; Utilizatorul totul este în regulă.
Contra: În mod logic, logo-ul poate fi considerat ca fiind elementul semantic al paginii. Dacă încercați să, de exemplu, sa „salvați ca“ sau imprima pagina (în cazul în care nu există identitate separată pentru imprimare) nu este un logo - așa cum se dovedește o configurare.
2) În cazul în care întreaga imagine antetul typeset nu de fundal, și unul. aveți posibilitatea să atribuiți harta - mai mult în orice manual de pe html. Dar modul învechit, ca și acum folosite în acest scop bekgraund, și să le acest lucru nu este o tehnologie aplicabilă.
3) O altă modificare a metodei de note: Karttika logo-ul frumos tăiate și depozitate în png.
Pro: nu se rupe logica (mai mult semantica) pagina; în cazul în care imaginea se mișcă în jos un pic la partea - este imperceptibil. Totul este frumos.
Contra: obține problema cu formatul png în IE și câteva kilobytes pentru utilizator (deși unii ar argumenta că, chiar mai bine decât png shake gpeg, dar eu nu știu - nu doar în Photoshop).
Verdict - dacă semantica paginii nu este important - utilizați un gif transparent peste, în caz contrar jocul cu un png.
PS, astfel încât nu ar trebui sa întâmplat chiar și un articol în blog-ul său post it :)
Kitich, îmi place să văd - Am fost șocat plăcut! Multumesc pentru clarificare. Valabil pentru o postare separată chestii :)
Eu însumi nu typeset, dar se confruntă cu un șablon pentru dezvoltarea de site-uri, astfel încât a adus opțiunea pe care o văd cel mai des. Există, de asemenea, un gif transparent, dar este mai des folosit pentru pictograme mici - sitemap, pagina de start, dar logo-ul este executat în mod continuu în DIV, care se află pe partea de sus a fundalului. În acest caz, un lucru bun pe care o puteți salva imaginea.
Micul add, o dată o astfel de discuție. PNG într-adevăr shake-uri mai bine decât GIF pentru imagini malotsvetnyh. Pentru a face acest lucru în Photoshop ar trebui să fie salvate Salvare ca pentru Web și alegeți numărul de culori din paleta, corect cules este, de asemenea, o modalitate de dispersie. Jpeg mai bine sigur - pentru că Ea nu apare în artefacte de compresie. probleme cu PNG-8 în oricare dintre noile browsere, inclusiv în IE6, câștigul în comparație cu GIF comprimat - 5-10%, comparativ cu JPEG - mai mult. Dacă transluciditatea este necesar (pentru logo-ul nu este de obicei necesar), atunci într-adevăr, vor exista probleme cu PNG-24.
Salvarea logo-ul ca un lucru inutil, de obicei, astfel de fond este de preferat, totuși. În afară de semantica, de asemenea, joacă un rol și optimizarea - în mod normal, blocat de încărcare paralel mai mult de 3 fișiere, și CSS începe să boot-eze aproape imediat cu HTML. Iar în imaginea de fundal încărcat rapid - asta e ceea ce dorim să includem toate procesarea imaginii nu este în „post-sarcină“ (relativ vorbind).
Potrivit map'am adăuga, de asemenea - nu este întotdeauna posibil să se impună tot fundal. În general, mapy acum este necesar să se utilizeze numai într-un singur caz - dacă dorim să reducem imaginile Colva pe o pagină care poate fi conectat prin img. Acest lucru este destul de abordare normală.
În restul revizuirii metodelor - este excelent.
Ei bine, PNG-8, după cum am înțeles, nu da transluciditatea :(
Cu toate acestea, undeva, am dat peste acest aviz: Photoshop nu utilizează toate caracteristicile PNG-24 - nu prea strâns, în cel mai bun mod. Vă recomandăm unele software-ul funcționează chiar și cu PNG, dar nu am să acorde o atenție, din păcate.
Despre „post încărcare“ vă mulțumesc. M-am întâlnit cu această opinie, dar abia acum a înțeles de ce așa :)
Pur și simplu, de obicei, propriile lor machete colecta, așa că am :).
Da, PNG-8 nu dă. Dar împinge la 24, în cazul în care nu este necesară - nu este în valoare de ea :). Despre shake-urile nu sunt cel mai bun mod - poate chiar 5-10% poate fi salvat, așa că, dacă vă amintiți, ce software - descriu în blog-ul meu (eu sunt deja abonat, da)))
Cu „post încărcare“, desigur, nu este atât de simplu. Am fost pe sunnybear materiale, documentul Yahoo și alții au încercat să termine Talmudul pentru a optimiza blog-ul dvs. (cum ar fi WordPress), dar pe această temă până în prezent doar mai multe întrebări decât răspunsuri.
Doamne, înainte de a oferi PNG24 (și producția rezultată a magazinului), uita-te la statisticile de utilizare a 5-a măgarilor și versiunile 6-a. Din păcate, mulți designeri web, inclusiv pe mine, le folosesc cel mai mult. Iar cei care dansează cu o tamburina, necesare pentru a rula IMHO canal alfa nu merita kiloocteți și frumusețe.
Deci, uite cum minunat acest png24, măturică lacrima avari si uita despre asta până când lumea plancton de birou, iar cei care au adminilor nu permit să plaseze orice alte browsere, cu excepția pre-instalare (nu vorbesc despre magarul motor browser-ul) nu a peresyadut cel puțin 7- fund.)))
Apoi, îmi amintesc, a fost dezvăluit faptul că populare hacks pe care le-am folosit, de lucru strâmb (rândul său, destul de neașteptat), la Opera :) Ca rezultat, a petrecut o mulțime de timp, dar că a fost făcut - Nu-mi amintesc. Va fi necesar să sape și să scrie separat.
problema Bekgraunda va fi probabil rezolvată în așa fel, dar nu voi argumenta.
Nu sunt împotriva dezbatere)) Cu mai multe astfel de interesant și util. Personal, folosesc png nu împiedică, în principiu, există unele hack prin fișierul pe care am htc întâlni în cele mai recente proiecte sunt stabilite.
Boyancheg, dar cei mai multi incepatori)
În general, esența este că - pe div în care background'e set imagine se suprapun fiecare div cu propisaniem poziția css-proprietate: absolută; în funcție de ce parte a imaginii, pe care doriți să facă referire pentru a personaliza div la locul potrivit (pentru comoditate pentru a începe să ceară de frontieră: solid 1px, a fost vizibilă în cazul în care să se mute :), desigur, apoi se scoate sau egala cu 0px) stabilește înălțimea și lățimea acolo de asemenea, în CSS (exemplu: lățime: 150px; height: 36px;), apoi chiar în div'e prescrie evenimentul onClick = »document.location = 'index.php'» - acesta este un exemplu index.php, puteți specifica în cazul în care doriți link-ul =))). Și așa, și ar fi de dorit să ne div-link :) specifica indexului z oricare dintre peste 1 = decât).
resetare aceste valori pot fi realizate prin intermediul *
Vă mulțumesc foarte mult! Folosesc articolul dvs. face un capac nou pe site-ul său „full-length“ - adică, uite: enioway.ru
Acum încarcă site-ul mult mai rapid - încă o dată, vă mulțumesc foarte mult!
Catherine, trebuie să găsiți o etichetă de fișier CSS stylesheet „un“ sau o clasă care este definit pentru ea, și să le editați.
așa că eu sunt în clasa pentru antet și face referire la valoarea antet stabilită de frontieră: nici unul
div.art-header-logo
Poziția: absolută;
Marja: 1px 445 93 13px;
z-index: 2;
>
div.art-header-logo img
frontieră: nici unul de important ;!
margin: 0px;
>
div.art-header-logo-un img
frontieră: nici unul de important ;!
margin: 0px;
>
sau nu aici? sau chiar toate, că în ceea ce privește „o“ etichetă?
Este vorba despre „cartea mea“? având un cadru și să apară în orice browser?
Il hosting versiune inundat fără „artefact“?
Da, despre asta, dar am fost de formare pe lokalhoste, deci nu este nimic de a lucra :) Mazilu. Deci, ce să fac?
Doar greu pentru a prinde aceste bug-uri nu văd toate cod - ele pot să apară datorită altor stiluri sau elemente de cod pe care nimeni nu vede, dar tu :)
Încercați să adăugați frontieră: nici unul de important ;! nu numai imaginea, ci, de asemenea, link-ul, precum și toate elementele între ele, dacă este cazul. De asemenea, încercați să adăugați contur: 0; - Acest parametru este responsabil pentru link-ul „accident vascular cerebral“, atunci când faceți clic pe ele.
vă mulțumesc foarte mult pentru extinderea)))) este convenabil! dar cu un bolț cadru nu merge ... :(
Poate voi scrie prostii, dar un test orb, astfel încât să aibă -_-
1. Să presupunem că div.art-header-logo-o
Dacă nu ați făcut nimic din cele de mai sus, nu (deși la alineatul 2 acum vor merge mai mult).
4. În cazul în care un astfel de element este găsit, verificați elementele vecine - pot exista are ceva in plus.
5. Poate nu e border'e și au un element extern este indentat și fundal, care creează efectul cadrului.
Până nu vii cu nimic mai mult :(
Vă mulțumesc foarte mult pentru ajutor :) Am început peste tot din nou, si atent, si a functionat. Se pare că din neatenție și obosit capul ei :) Multumesc din nou, sa dus la bar pentru a transporta!
Felicitări. În același timp, ceva nou învățate)
Bine ai venit! Ți-am făcut asta? Nu pot obține (((
În index.php îmi place:
În template.css astfel încât (la sfârșitul anului neterminat):
.Poziția logo1: absolută;
Marja: 1px 1pixel 0 0;
z-index: 100;
>
Nimic nu sa schimbat pentru un motiv oarecare (((
Acum, doar mizerie în jurul cu logo-ul. Mesaj în subiect, voi înțelege.
De asemenea, cred că modul de a pune un link la imagine, în cazul în care este descrisă în CSS ... încerca să facă o gifom transparentă)))
Oameni drăguți, mari mulțumiri umane te, 4:00 a trecut prin toate lecțiile Krivorukov și numai acest blog a fost în măsură să ne dea ceva pentru a ajuta, vă mulțumesc, vă mulțumesc!
Și cum să facă imaginile care nu se poate da clic sunt dreptunghiulare în formă? De exemplu, un triunghiular?
Vyacheslav, să fiu sincer, nu știu. A existat un element în HTML care vă permite să conectați la diferite forme de imagini, dar, din păcate, nu-mi amintesc ce se numește. Este necesar Google, dar există și unele complicate toate opțiunile.
Kitich, vă mulțumesc, asta este! 10 minute amintindu-și cum aceste etichete sunt numite.
Așa cum eu nu pot face link-ul de fundal clickable care apare în portalurile de film (
Focus, considerată o soluție la această problemă în acest articol.
Dacă aveți întrebări, scrieți la [email protected]