Kijan Pou bati yon kat imaj ak CSS

opsyon

Mwen te vle yon bagay 'geeky' Se konsa, mwen deside sou yon 'pòch' grafik ki kenbe tout metòd yo abònman pou blog mwen an.

Nan jou yo nan entènèt 1.0, yon koleksyon lyen tankou sa a ta ka bati pa splicing moute imaj ou moute ak lyen sou chak grafik, Lè sa a, ap eseye koud li tout tounen ansanm ak yon tab. Li ta ka tou akonpli pa itilize yon kat imaj men sa anjeneral mande pou yon zouti yo bati soti sistèm nan kowòdone. Sèvi ak kaskad Fèy Style fè sa a yon tòn pi fasil ... pa gen okenn imaj episur epi pa gen okenn eseye jwenn yon zouti yo bati sistèm kowòdone ou!

  1. Bati imaj ou ke ou ta renmen itilize. Ou ka itilize grafik sa a anba a (dwa klike sou epi sove kòm download):
    Opsyon
  2. Voye imaj ou nan yon anyè ki gen rapò ak CSS ou. Nan WordPress, sa a ka fè pi fasil pa mete l 'nan yon katab imaj nan anyè tèm ou.
  3. Ajoute HTML ou. Li bèl ak senp ... yon div ak twa lyen nan li:
    > div id = "subscribe">> a id = "rss" href = "[your feed link]" title = "Subscribe with RSS" >> span class = "hide"> RSS> / span >> / a>> yon id = "imèl" href = "[imèl ou abònman lyen]" title = "Abònman ak Imèl" >> span class = "kache"> Imèl> / span >> / a>> a id = "mobil" href = "[lyen mobil ou]" title = "View Mobile Version" >> span class = "hide"> Mobil> / span >> / a>> / div>
    
  4. Edit Fèy Style kaskad ou. Ou pral ajoute 6 diferan estil. 1 style pou div an jeneral, 1 pou yon tag pou li pa montre okenn dekorasyon tèks, 1 style pou kache tèks la (yo itilize pou aksè) ak 1 style spesifikasyon pou chak nan lyen yo:
    #subscribe {/ * background image image * / display: block; lajè: 215px; wotè: 60px; background: url (images / options.png) pa gen okenn-repete; maj-tèt: 0px; } #subscribe a {text-decoration: none; } .kache {vizibilite: kache; } #rss {/ * RSS Link * / flote: kite; pozisyon: absoli; lajè: 50px; wotè: 50px; maj-kite: 20px; maj-tèt: 5px; } #email {/ * Imèl Link * / flote: kite; pozisyon: absoli; lajè: 50px; wotè: 50px; maj-kite: 70px; maj-tèt: 5px; } # mobil {/ * Mobile Link * / float: left; pozisyon: absoli; lajè: 50px; wotè: 50px; maj-kite: 130px; maj-tèt: 5px; }

Pozisyon nan bèl ak senp ... ajoute yon wotè ak lajè ak Lè sa a, mete Marge gòch la soti nan bò gòch nan imaj la, ak maj nan tèt ki soti nan bò anwo nan imaj la!

Sa a "Kijan Pou" pòs se pou antre nan la Geeks yo se sexy ultim "Kijan Pou" Konkou! Yon nòt, se vre ke yon kat jeyografik imaj ka gen poligòn pi konplèks, men mwen pa te reyèlman wè twòp kote sa a dwe genyen. Mwen te remake ke imaj gwo ol 'RSS sou Geeks yo se Sideb Sexy ... sa a, se yon bon plas pou yon lyen. 😉

MIZAJOU 10/3/2007 pou pi bon aksè ak konsèy nan Phil!

Sponsor: Si ou se yon Senior Member nan konsepsyon entènèt, Lè sa a, Bati pwòp sit entènèt ou fason ki dwat Sèvi ak HTML & CSS, 2nd edisyon se yon dwe-genyen. Nan gid fasil-a-swiv sa a ou pral aprann ki jan yo bati yon sit entènèt pi bon fason posib - pa fè li tèt ou!

41 Kòmantè

  1. 1

    Doug, sa sanble tankou yon metòd bèl, men li trè inaksesibl.

    Konsidere yon itilizatè avèg ak yon lektè ekran, yon itilizatè ki gen yon navigatè tèks sèlman oswa nenpòt moun ki vizite sit la san CSS oswa Imaj aktive (tankou, petèt yon itilizatè mobil kap chèche lyen ki mennen nan sit mobil zanmitay ou a). Okenn nan yo pa pral konnen sou twa lyen sa yo paske yo pa gen okenn tèks. Si imaj yo koupe yon itilizatè pa pral menm wè alt tèks pou dekri sa ki ta la paske li se yon imaj background.

    Pi bon ta dwe tranch imaj yo, konekte yo, mete yo nan yon lis ak flote yo akote youn ak lòt. Oswa menm sèvi ak tèks pou lyen yo epi ranplase tèks la lè l sèvi avèk yon teknik estanda ranplasman imaj. Sa a sanble pratik, men li fè bagay sa yo pi difisil / enposib pou moun ki pa sèvi ak yon navigatè grafik estanda.

    • 2
      • 3

        Doug,

        JAWS pa li tit lyen pa default, men ou gen rezon, li kapab fè. Poukisa ou ta ap chèche pou tit lyen si ou pa t 'konnen li te la menm si, e menm si ou te, siman sa a gout nan yon pwoblèm itilizasyon sa vle di ou ap bay itilizatè ki gen mwens kapasite yon eksperyans dezyèm pousantaj nan lè l sèvi avèk sit ou a.

        Pou navigatè tèks, atik ou montre m 'nan direksyon Lynx sa a pèmèt ou pote tou yon lis tit lyen, men pwen mwen rete ke si ou pa t' konnen te gen yon lyen la, kòm pa te gen okenn tèks an plas an premye. , poukisa ou ta chèche tèks tit?

        Finalman, atribi tit lyen yo toujou p ap parèt pou nenpòt moun k ap navige san imaj yo aktive oswa san CSS pèmèt.

        Se konsa, wi, lyen ki gen tit yo pi bon pase sa ki san yo, men nan ka sa a li se sèlman majinal.

        Se poutèt sa lè l sèvi avèk yon imaj, pou ke tèks alt ka li, oswa ranplasman imaj, pou ke tèks la la, se yon opsyon ki pi an sekirite, pi aksesib ak plis itilize.

        • 4

          Bon enfòmasyon, Phil. Mwen pral eseye amelyore sa a ak tèks men tou senpleman kache tèks la - konsa yon pwodwi aksesib tankou JAWS pral li tèks lyen an epi tèks la pral parèt si CSS oswa Imaj yo enfim.

          Mwen pa dakò ke sèl solisyon aksesib la ta dwe mete yon Imaj ak yon lyen, menm si.

  2. 5
  3. 8

    Mwen te vòlè li. La, mwen te di li.

    Doug, grafik yo se kokenn ak kodaj la tèlman senp li fè m pè (jwe jwe ak CSS epi kounye a mwen finalman "jwenn li").

    Tweaked moute kòd la pou satisfè bezwen mwen yo, kalkile ki kote yo depoze HTML ti jan an, epi franchman li sanble gwo e li te netwaye tèt sa a nan ankadre mwen an ki te fè m 'FOU.

    Mwen jis ta gen pou achte ou sa kafe ankò!

  4. 10

    Doug,

    Mwen pral yon vwa ki disside, sèvi ak eksperyans mwen kòm yon egzanp. Mwen sonje imèl nou yo lè imel lakay mwen an te chanje epi ou te note mwen te senpleman patisipe nan nouvo youn mwen an. Mwen dwe admèt mwen te gen yon èk nan yon tan "dekouvri" karakteristik nan nouvo sou sit ou a patisipe nan ankò. Pati nan sa a se paske lyen orijinal la te yon ti jan pi tradisyonèl epi mwen vagman sonje sa a. Lòt la se paske mwatye anvlòp la sou kote jis pa t 'gade tankou yon anvlòp pou mwen okòmansman. Apre apeprè 5 minit oswa plis mwen te kòmanse woule sourit mwen an sou chak imaj epi lè tit la "Abònman ak Imèl" te montre, Lè sa a, mwen te konnen mwen te nan biznis. Sèvo mwen tou kalkile ki sa foto lyen an te.

    Men, omwen pou mwen, yon anvlòp sou kote jis pa t 'entwisyon pou mwen kòm kote a abònman nan notifikasyon imel. Epi (paske mwen te di pou m toujou fini ak yon bagay bèl) mwen dakò ak Phil pi wo a; metòd la se reyèlman senp ak atik la antye ap travay gwo. Mwen pran li zouti konsepsyon ou te ede ba ou dimansyon egzak pou 3 seksyon yo; èske se yon sipozisyon kòrèk? Mwen dwe asime sa, depi si mwen te gen, di, yon imaj 400 pixel lajè mwen ta bezwen konnen anviwònman yo dwa, elatriye.

  5. 12
    • 13

      William,

      Li sanble ke ou ta ka gen yon konfli ant non klas kòmantè ou yo ak non klas yo nan grafik an bò kote. Ou ka nonmen yo yon fason diferan pou klè konfli a. Kite m 'konnen si ou bezwen yon men!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Bèl apwòch, men mwen bezwen yon bagay pou yon kat topografik, kidonk mwen pa ka sèvi ak zòn rektang ... Mwen panse ke mwen dwe itilize imaj la ansyen style ak kowòdone, men mwen pwobableman pral fouye yon ti kras pi fon ...

  11. 19

    Mèsi pou enfòmasyon sa a, Doug. Mwen te la anvan epi mwen te mande ki jan ou te fè li. Nou te vle kreye yon kat konsa pou mete apre pòs nou yo, epi kounye a ke nou gen mwayen, nou ka fè li. Bravo!

  12. 20
  13. 21

    Bonjou Doug,
    Mwen te kite yon kòmantè anvan men mwen reyalize ke mwen diman ofri okenn insight sou dilèm mwen an ditou. Nou te adapte yon tèm wordpress pou ede nou lanse sitcom sou entènèt nou an isit la:

    http://www.phaylen.com/blog/

    Koulye a, ou pral wè nou gen yon banyè navigasyon sou tèt la, yon imaj nou te gen entansyon kat jan nou te gen plizyè douzèn fwa anvan. /palmforehad. Okenn nan nou pa vrèman konprann CSS, men nou bite sifizanman e byen lwen tèlman nou te fè oke jiska pwen sa a. Atik ou a nan yon sèl nan plizyè douzèn ki bay yo se yon insight reyèl sou kòman yo itilize imagemapping nan CSS fasil. Mwen eited stylesheet la dapre direksyon ou yo, men pa gen okenn lide ki kote yo mete HTML la. Tout sa ou te di se "Ajoute html ou ... Li bèl ak senp" epi Lè sa a, mwen te kriye paske mwen te panse .. "pa ase senp pou mwen!" Mwen pa t 'konnen mwen te kapab ajoute html nan nenpòt nan paj sa yo php nan editè tèm nan. Èske mwen mete html nan header la? Modèl Endèks prensipal la? Fonksyon yo? Mwen sipoze tout itilizatè wordpress yo gen opsyon pou yo modifye tèm yo nan editè tablodbò a, ki sanble trè inivèsèl nan fonksyonalite. Si ou ta ka sijere ki kote yo mete html a, mwen ta renmen adapte kòd oru pou ba navigasyon mwen an.

    Mèsi paske w pataje konesans ou ak kominote a. Mwen kontan ba ou yon kafe.

    • 22

      Bonjou Phay!

      Tout fichye yo pou tèm blog ou a disponib atravè panèl Admin pou koreksyon. Si w klike sou Prezantasyon ak Lè sa a, Editè Tèm, ou ta dwe kapab wè yon lis dosye ou yo sou bò dwat la ak yon editè sou bò gòch la.

      Si ou vle pou sa a nan ba ou, pwobableman ou gen yon paj Sidebar. Klike pou modifye li epi mete HTML yo bay nan paj la kote ou ta renmen li.

      Yon nòt: Modifikasyon fèy style la se parapò ak paj ou a, kidonk w ap bezwen telechaje foto a nan anyè imaj tèm si w ap referans li menm jan ou ta fè lòt imaj nan tèm ou a.

      Espere ki ede!

    • 23

      Phay,
      Mwen te rankontre sit sa a jodi a epi mwen te gen menm dilèm ak ou. Mwen te vle tou ajoute yon kat imaj nan imaj la header. Apre jwe ak li pou yon ti tan, mwen te resevwa li dwat. Mete HTML div la nan dosye header.php la. Mwen mete l ant ak . Pa sèten si modèl ou a gen kodaj egzak sa a, men jwe avèk li nan dosye header.php la epi w ap kalkile li.
      -
      Pòl

  14. 24

    Mèsi pou repons rapid la!

    Non, mwen pa t 'vle li nan ba bò kote, li nan tèt paj la (ou ka wè nan lyen mwen te bay la - ba navigasyon woz ki di kontant, sou montre nan ect..)

    Mwen te travay nan tablodbò a tout maten, malerezman, mwen pa sèten nan ki fichye mwen mete html la, jan sa di pi wo a, mwen gen plizyè, header.php, main index.php, functions.php, footer.php. Mwen pa fin sèten ki kote yo mete kòd html la. (premye pati ou bay la, mwen deja mete rès la nan stylesheet mwen an) Mwen gen imaj mwen an la sou sit entènèt la, tout bagay pare pou ale, mwen jis bezwen konnen ki kote yo ajoute pòsyon html nan kòd la pou adapte.

    Mèsi anpil pou tan ou ak kesyon fielding yon inisyasyon.

    Phay

  15. 25

    … Oswa petèt yon moun ta ka poste nan kòmantè yo sou ki dosye nou mete pòsyon html nan kòd la pous. Mwen pa te gen chans konsa.

    Phaylen

  16. 26
  17. 27

    Mwen gen anpil tan jwenn yon fason yo entegre yon kat imaj klike sou wordpress paske li retire etikèt kat html. Fason ou ta travay men yon kat jeyografik nan peyi Etazini an se evidamman fason yo konplèks nan vis ak fason sa a. Mwen pèdi.

    Ede.

    Li sanble ke flash se sèl opsyon mwen an?

    • 28

      Dave,

      Si ou mete imaj la nan modèl ou a, ou pral byen. Si ou mete kat imaj la nan kontni aktyèl la, ou ta ka kouri nan pwoblèm filtre. Fason mwen te travay alantou sa a se terib, men pafwa mwen te itilize yon iframe.

      Doug

  18. 29

    Hi,

    Li sanble ke kat imaj la ak lyen yo se de bagay diferan, yo pa travay ansanm tankou jan yon kat imaj nan html fè

    lè mwen enkli pozisyon background (sant gòch) pou kat imaj la, pozisyon lyen yo pa swiv.

    nenpòt fason yo jwenn alantou sa a? mwen trè amatè. mèsi.

  19. 31

    Èske yon apwòch menm jan an ta dwe itilize pou yon kat imaj pi gwo ak pi konplike tankou mwen ap eseye itilize?

    Si w gade sit mwen an, klike sou lyen ki agoch ​​la epi w ap wè imaj m ap eseye itilize kòm yon kat imaj (anba alfabè Tèks la).

    Fondamantalman, ap eseye sèvi ak Imaj la pou ale nan chak seksyon nan lis sa a pa lèt.

    Evidamman, mwen te pase 20 minit bati yon kat ak GIMP, ak Lè sa a, WP retire tags kat yo, kidonk se konsa mwen te jwenn sit ou a.

    Menm si, ka kontanple itilize Flash

    Mèsi.

  20. 33

    Mwen kounye a ap itilize yon Layout modèl ak koreksyon ak pwòp bagay mwen. Mwen vle ajoute yon kat imaj, men mwen pa fin sèten ki kote yo mete l nan css la. imaj la mwen vle fè yon kat jeyografik nan se nan pati nan header.

  21. 34

    alo, mwen te konstwi sit entènèt mwen an sou joomla...Mwen vle sèvi ak metòd sa a pou fè logo paj mwen an yon lyen ki mennen nan kay la, mwen te di ou pa ka fè sa ak joomla men atik sa a ban m 'espwa! èd pa imel ta anpil apresye.... mèsi

  22. 35

    Hi Doug - Mwen ap bati yon kat jeyografik imaj ki baze sou CSS ki pi konplike ki gen tou woulman aleka (nan ka sa a, tèks montre yon lòt kote sou paj la lè ou hove youn nan otspo imaj yo). Nenpòt fason, mwen te rankontre egzanp ou isit la pandan y ap fè rechèch sou sa ... e mwen te panse mwen ta pataje opinyon sa a:

    1. Pou aksè, ou pa ta dwe itilize visibility:none (oswa display:none si ou konsidere sa) pou kache tèks la isit la, kòm yon eleman ki gen yon estil ak vizibilite: hidden pa pral li pa lektè ekran (sa yo ki swiv spec) .

    Olye de sa, sèvi ak yon teknik ranplasman imaj ki pi solid. Mwen sijere swa metòd la Phark oswa Gilder / Levin - sa yo se jis non yo pi byen dokimante nan google jwenn teknik debaz yo. Mwen pito G/L kòm li tou travay ak CSS pèmèt men imaj yo etenn.

    2. Pandan ke mwen pa wè li kraze (lè l sèvi avèk FF3), aplikasyon ou nan pwezante tou gen risk nannan. Yon eleman absoliman pozisyone pozisyone paran paran ki pi pre pozisyon li. Fondamantalman, ou ta vle klèman mete yon kontèks pwezante lè w aplike 'position:relative' nan #subscription. Lè sa a, timoun yo (lyen pozisyone yo) ka pozisyone nan paran sa a. Metòd sa a ede asire rezilta plis serye atravè navigatè yo.

    Epitou, ou ta dwe Lè sa a, sèvi ak deklarasyon yo pwezante nan "tèt: x" ak "gòch: x" (kote x se valè a konpanse, di nan px) olye ke maj yo okipe pozisyon sa a. Yon fwa ankò, mwen pa nesesèman wè li kraze fason ou genyen li, men tèt ak gòch yo vle di pou sa a kidonk poukisa pa sèvi ak yo? Anplis de sa, ou te gen flote ak maj mete sou menm eleman, ki nan kondisyon espesifik lakòz ensèk "doub maj" nan IE6 (èske ou te teste sa a la?) - pandan ke gen yon ranje, ou evite pwoblèm sa antyèman lè w sèvi ak tèt. ak kite olye pou yo maj pou pwezante nan ka sa a.

    3. Finalman, poukisa pa sèvi ak yon lis semantik ki pa òdone pou lyen sa yo olye pou yo div la san sans?

    Sorry for droning on... Mwen jis renmen pataje, b/c mwen konnen nan eksperyans ki jan gen plizyè fason diferan yo sèvi ak CSS jwenn yon rezilta vle, men kèk fason sètènman fè travay pi byen (plis serye, kwa-navigatè) pase lòt. . HTH.

  23. 36
  24. 37
  25. 38

    Mèsi anpil!! Enstriksyon ou yo te sove m 'HÈ nan travay... Mwen nouvo nan devlopman entènèt, epi mwen jis soufri nan premye gwo pwojè mwen an. Mwen te fè li... kliyan an kontan, vwèman emosyone, e mwen menm tou!

  26. 39

    Bonjou, mèsi anpil pou poste sa! Ane apre epi li toujou ede... bèl! Mwen ap plede jwenn kat imaj mwen an lyen nan bon kote. Mwen gen yon banyè epi mwen vle ikon sosyal yo ki anlè dwat banyè a konekte ak kòd ou te bay la. Li travay byen, eksepte mwen fè yon bagay ki mal paske lyen mwen yo ap parèt sou bò gòch anwo nan ekran an, pa sou ikon sosyal yo, men sou logo la. Mwen sèten li se yon bagay ki senp, men mwen jis pa ka konprann li. Te panse mwen ta pataje li isit la nan ka ou gen nenpòt lide. Mèsi ankò pou poste sa!

Ki sa ou panse?

Sit sa a sèvi ak Akismet diminye Spam. Aprann kijan kòmantè ou a trete.