Kijan Pou bati yon kat imaj ak CSS

opsyon

Mwen te vle yon bagay 'jik' 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 a nan yon anyè ki nan relatif nan 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 nan 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 spesifikasyon style 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 kote sa a dwe genyen. Mwen te remake ke imaj gwo ol 'RSS sou Geeks yo se Sideb Sexy ... sa a, se yon bon kote 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, ki sanble tankou yon metòd bèl, men li trè aksesib.

    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 pèmèt (tankou, petèt yon itilizatè mobil kap chèche lyen ki mennen nan sit mobil zanmitay ou). 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, lyen yo, mete yo nan yon lis ak flote yo youn ak lòt. Oswa menm itilize 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 lè l sèvi avèk yon navigatè estanda grafik.

    • 2
      • 3

        Doug,

        MACHE pa li tit lyen pa default, men ou gen rezon, li ka fè. Poukisa ou ta kap chèche 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 D' sa vle di ou ap bay itilizatè mwens kapab yon eksperyans dezyèm pousantaj nan lè l sèvi avèk sit ou.

        Pou navigatè tèks, atik la ou montre m 'nan direksyon pou lenks tou pèmèt ou pote moute 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 chache tèks tit?

        Finalman, atribi tit lyen toujou p ap parèt pou nenpòt moun ki Navigasyon san imaj pèmèt oswa san CSS pèmèt.

        Se konsa, repons lan se wi, lyen ak tit yo pi bon pase sa yo san yo pa, men nan ka sa a li se sèlman majinal.

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

        • 4

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

          Mwen pa dakò ke solisyon an sèlman aksesib ta dwe mete yon imaj ak yon lyen, menm si.

  2. 5
  3. 8

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

    Doug, grafik yo ki se kokenn ak kodaj la se konsa ekstrèmman senp li pè m '(yo te jwe ak CSS e kounye a, mwen finalman "jwenn li").

    Tweaked moute kòd la satisfè bezwen m 'yo, kalkile ki kote yo lage ti jan an HTML nan, ak franchman li sanble gwo e li te netwaye ki anwo nan ankadre mwen an ki te kondwi m' fou.

    Mwen jis ka oblije achte kafe sa ankò!

  4. 10

    Doug,

    Mwen pral yon vwa opozan, lè l sèvi avèk eksperyans mwen kòm yon egzanp. Mwen sonje Imèl nou yo lè imèl lakay mwen chanje epi ou te note ke mwen te tou senpleman patisipe nan ak yon sèl nouvo 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 te paske lyen orijinal la te yon ti jan pi plis tradisyonèl e mwen vagman vin chonje ke yon sèl. Lòt la te paske sou kote mwatye anvlòp la jis pa t 'sanble tankou yon anvlòp m' okòmansman. Apre apeprè 5 oswa plis minit mwen te kòmanse woule sourit mwen an sou chak imaj ak lè "Abònman ak Imèl" tit la te montre, Lè sa a, mwen te konnen mwen te nan biznis. Nan sèvo mwen tou kalkile ki sa foto a lyen te.

    Men, omwen m ', yon anvlòp sou kote jis pa t' entwisyon m 'tankou plas la abònman nan notifikasyon imel. Epi (paske yo te di mwen toujou fini ak yon bagay bèl) mwen dakò ak Phil pi wo a; metòd la se reyèlman senp ak atik la tout antye travay gwo. Mwen pran li zouti konsepsyon ou te ede ba ou dimansyon yo egzak pou 3 seksyon yo; 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 tankou ou ta ka gen yon konfli ant non klas kòmantè ou yo ak non klas yo nan grafik ankadre a. Ou ka nonmen yo yon fason diferan pou klè konfli a. Fè m konnen si ou bezwen yon men!

      Doug

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

    Bon apwòch, men mwen bezwen yon bagay pou yon kat topografik, Se konsa, mwen pa ka sèvi ak zòn rektang ... Mwen panse ke mwen gen yo sèvi ak imaj la ansyen style ak kowòdone, men mwen pwobableman pral fouye yon ti jan pi fon ...

  11. 19

    Mèsi pou enfòmasyon sa a, Doug. Mwen te la anvan e mwen te mande kijan ou te fè li. Nou te vle kreye yon kat tankou sa insert apre posts nou yo, e kounye a, ke nou gen mwayen yo, nou ka fè li. Bravo!

  12. 20
  13. 21

    Hi Doug,
    Mwen kite yon kòmantè anvan men reyalize ke mwen diman ofri nenpòt insight nan dilèm mwen nan tout. Nou te adapte yon tèm wordpress ede nou lanse sitkon sou entènèt nou an isit la:

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

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

    Mèsi pou pataje konesans ou ak kominote a. Mwen kontan jwenn ou yon kafe.

    • 22

      Hi Phay!

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

      Si ou vle pou sa a nan ankadre ou, pwobableman ou gen yon paj Sidebar. Klike sou edite li epi mete HTML ki nan paj kote ou ta renmen li an.

      Yon nòt: Fèy stil edite a se relatif nan paj ou, kidonk, ou pral bezwen Upload foto a nan anyè a imaj tèm si w ap referansye li jan ou ta lòt imaj nan tèm ou.

      Espere ki ede!

    • 23

      Phay,
      Mwen te vin atravè sit sa a jodi a e mwen te gen menm dilèm tankou ou. Mwen menm mwen te vle ajoute yon kat imaj nan imaj la header. Apre jwe otou ak li pou yon ti tan, mwen te resevwa li dwat. Mete div HTML a nan dosye header.php la. Mwen mete l 'ant ak. Pa sèten si modèl ou a gen ki egzak kodaj, men jwe otou ak li nan header.php dosye a epi ou pral figi li soti.
      -
      Pòl

  14. 24

    Mèsi pou repons lan vit!

    Non, mwen pa t 'vle li nan ankadre a, li nan tèt paj la (ou ka wè nan lyen mwen bay la- ba navigasyon woz ki di contant, sou montre nan ect ..)

    Mwen te travay nan tablodbò a tout maten, malerezman, mwen pa fin sèten nan ki dosye mwen mete html la, jan sa endike anwo a, mwen gen plizyè, header.php, prensipal index.php, functions.php, footer.php. Mwen pa si ki kote insert kòd la html. (Premye pati ou bay la, mwen deja mete rès la nan Fèy estil mwen) Mwen gen imaj mwen la sou sit entènèt la, tout bagay se pare yo ale, mwen jis bezwen konnen ki kote yo ajoute pòsyon an html nan kòd la pou adapte.

    Mèsi anpil pou tan ou ak Fielding kesyon ki sòti nan yon inisyasyon.

    Phay

  15. 25

    ... Oswa petèt yon moun te kapab afiche nan kòmantè yo sou ki dosye nou mete pòsyon an html nan kòd la pous Yon mesye kèk posts moute te di ke li kalkile li soti. Mwen pa te tèlman gen chans.

    Phaylen

  16. 26
  17. 27

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

    Ede.

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

    • 28

      Dave,

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

      Doug

  18. 29

    Hi,

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

    lè mwen gen ladan background pwezante (sant agoch) pou kat la imaj, pwezante nan lyen yo pa swiv.

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

  19. 31

    Èske yo ta itilize yon apwòch ki sanble pou yon kat imaj pi gwo ak pi konplike tankou mwen ap eseye sèvi ak?

    Si ou wè sit mwen an, klike sou lyen sou bò gòch la epi ou pral wè imaj la mwen ap eseye sèvi ak kòm yon kat imaj (anba alfabè a Tèks).

    Fondamantalman, ap eseye sèvi ak Imaj la pou yo 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 etikèt yo kat, se konsa ki jan mwen te jwenn sit ou.

    Menm si, ka kontanple lè l sèvi avèk Flash

    Mèsi.

  20. 33

    mwen kounye a lè l sèvi avèk yon Layout modèl ak koreksyon ak bagay pwòp mwen. Mwen vle ajoute yon kat jeyografik 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 bati sit entènèt mwen an sou joomla ... mwen vle sèvi ak metòd sa a fè logo la nan paj mwen an yon lyen nan kay, mwen te di ou pa ka fè sa ak joomla men atik sa a ban m 'espwa! èd via imèl ta dwe anpil apresye .... Mèsi poutèt ou

  22. 35

    Hi Doug - Mwen bati yon kat imaj olye konplèks ki baze sou CSS ki gen tou rollovers aleka (nan ka sa a, tèks montre yon lòt kote nan paj la lè ou hover youn nan otspo yo imaj). Nenpòt fason, mwen te vin atravè 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 vizibilite: okenn (oswa ekspozisyon: okenn si ou konsidere sa) kache tèks la isit la, kòm yon eleman estile ak vizibilite: kache pa pral li pa lektè ekran (sa yo ki swiv spesifikasyon) .

    Olye de sa, sèvi ak yon teknik ranplasman imaj pi solid. Mwen sijere swa metòd la Phark oswa Gilder / Levin - sa yo, se jis non yo pi byen dokimante Google jwenn teknik debaz yo. Mwen prefere G / L jan li travay tou 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 te gen risk nannan. Yon eleman absoliman pozisyone pozisyone parapò ak paran ki pi pwòch li yo. Fondamantalman, ou ta vle klèman mete yon kontèks pwezante pa aplike 'pozisyon: relatif' nan # abònman. Lè sa a, timoun yo (lyen yo pozisyone) ka pozisyone nan ki paran. Metòd sa a ede asire rezilta plis serye atravè navigatè yo.

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

    3. Finalman, poukisa yo pa sèvi ak yon lis semantically son san lòd pou lyen sa yo olye pou yo div la san sans?

    Padon pou droning sou ... Mwen jis renmen pataje, b / c mwen konnen nan eksperyans ki jan gen anpil diferan fason yo sèvi ak CSS yo ka resevwa yon rezilta vle, men kèk fason sètènman travay pi byen (plis serye, kwa-navigatè) pase lòt moun . HTH.

  23. 36
  24. 37
  25. 38

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

  26. 39

    Bonjou, mèsi anpil pou afiche sa a! Ane pita epi li toujou ede ... bèl! Mwen ap konbat yo ka resevwa kat imaj mwen an lyen nan plas la dwat. Mwen gen yon banyè e mwen vle ikon sosyal yo nan adwat anwo banyè a pou lye avèk kòd ou te apwovizyone a. Li travay anpil, eksepte mwen fè yon bagay ki mal paske lyen mwen yo parèt sou bò gòch anwo anwo nan ekran an, pa sou ikon sosyal yo, men sou logo la. Mwen si ke li nan yon bagay ki senp, men mwen jis pa ka kalkile li soti. Te panse mwen ta pataje li isit la nan ka ou gen nenpòt Sur. Mèsi ankò pou afiche sa a!

Ki sa ou panse?

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