Ahoana ny fananganana sarintany misy CSS

safidy

Te hanana 'geeky' aho ka nanapa-kevitra ny hanao sary 'paosy' mitazona ny fomba famandrihana rehetra amin'ny bilaogiko.

Tamin'ny andron'ny Web 1.0, fananganana rohy toy ity dia azo hatsangana amin'ny alàlan'ny fampisarahana ny sarinao miaraka amin'ireo rohy isaky ny sary, avy eo manandrana manjaitra azy rehetra miaraka amin'ny latabatra. Azo tanterahina amin'ny alàlan'ny fampiasana an sarintany fa izany matetika dia mitaky fitaovana iray hananganana ny rafitra mandrindra. Ny fampiasana Cascading Style Sheets dia manamora kokoa ny taonina ity… tsy misy sary mampisaraka ary tsy manandrana mitady fitaovana hananganana ny rafitra mandrindra anao!

  1. Amboary ny sarinao izay tianao hampiasaina. Azonao atao ny mampiasa an'ity sary eto ambany ity (tsindrio havanana ary vonjeo raha hampidina):
    Options
  2. Ampidiro amina lahatahiry izay mifandraika amin'ny CSS ny sary. Ao amin'ny WordPress, ity dia azo atao mora indrindra amin'ny fametrahana azy ao anaty fampirimana sary ao amin'ny lahatahiry lohahevitrao.
  3. Ampio ny HTML-nao. Mahafinaritra sy tsotra… div misy rohy telo ao:
    > div id = "subscribe">> a id = "rss" href = "[rohy feed anao]" title = "Subscribe with RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[rohy fisoratana anarana mailaka anao]" title = "Subscribe with Email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "View Mobile Version" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Amboary ny Sheet Cascading Style. Hanampy fomba 6 hafa ianao. Fomba 1 ho an'ny div ankapobeny, 1 ho an'ny tag mba tsy mampiseho haingon-tsoratra, fomba 1 hanafenana ny lahatsoratra (ampiasaina amin'ny fidirana) ary famaritana fomba 1 ho an'ny rohy tsirairay:
    #subscribe {/ * sary eo afovoany * / display: block; sakany: 215px; hahavony: 60px; background: url (sary / options.png) tsy averina intsony; ambony-tampon'ny: 0px; }Misorata anarana a {text-decoration: none; } .hafenana {visibility: miafina; } #rss {/ * Rohy RSS * / mitsingevana: ankavia; toerana: tanteraka; sakany: 50px; hahavony: 50px; sisiny havia: 20px; ambony-tampon'ny: 5px; } #email {/ * Rohy mailaka * / float: ankavia; toerana: tanteraka; sakany: 50px; hahavony: 50px; sisiny havia: 70px; ambony-tampon'ny: 5px; } #mobile {/ * Rohy finday * / float: ankavia; toerana: tanteraka; sakany: 50px; hahavony: 50px; sisiny havia: 130px; ambony-tampon'ny: 5px; }

Tsara sy tsotra ny fametrahana azy… ampio haavo sy sakany ary apetaho avy eo amin'ny ilany havia amin'ny sary ny sisiny havia, ary ny sisiny ambony avy eo amin'ny sisin'ny sary!

Ity lahatsoratra "Ahoana no" ity dia ho an'ny fidirana ao amin'ny Ny Geeks dia fifaninanana faratampony amin'ny fomba "Ahoana"! Fanamarihana iray, marina fa ny sarintan-tsary dia mety hanana polygons be pitsiny kokoa, saingy mbola tsy nahita toerana be loatra izay tsy maintsy ananana aho. Tsikaritro fa ny sary RSS ol lehibe ao amin'ny Geeks dia sidebar seksi… toerana tsara hanaovana rohy izany. 😉

Nohavaozina 10/3/2007 ho an'ny fidirana tsara kokoa miaraka amin'ny torohevitra avy amin'ny Phil!

Mpanohana: Raha toa ianao vao manomboka amin'ny famolavolana tranonkala, dia amboary ny tranokalanao manokana amin'ny fomba mety amin'ny fampiasana HTML & CSS, fanontana 2nd dia tsy maintsy ananana. Amin'ity torolàlana mora harahina ity dia hianaranao ny fomba fananganana tranokala amin'ny fomba tsara indrindra - amin'ny fanaovana izany ny tenanao!

41 Comments

  1. 1

    Doug, toa fomba tsara izany, saingy tena tsy azo idirana.

    Diniho ny mpampiasa jamba miaraka amin'ny mpamaky efijery, ny mpampiasa iray tsy misy afa-tsy mpitety an-tsoratra na izay mitsidika ny tranokala tsy misy CSS na Sary azo ampiasaina (toy ny mpampiasa finday mitady ny rohy mankamin'ny tranokala tianao). Tsy misy amin'izy ireo hahalala momba ireo rohy telo ireo satria tsy manana lahatsoratra. Raha tsy eo ny sary dia tsy ho hitan'ny mpampiasa akory ny alt alt hilazalazana izay mety ho teo satria sary any aoriana izy io.

    Ny tsara kokoa dia ny manapaka ireo sary, mampifandray azy ireo, mametraka azy ireo ao anaty lisitra ary mitsinkafona mifanila amin'izy ireo. Na mampiasa lahatsoratra ho an'ireo rohy mihitsy aza ary manolo ny lahatsoratra amin'ny fampiasana teknika fanoloana sary mahazatra. Toa mety izany, saingy manasarotra ny zava-misy / tsy ho vita ho an'ireo tsy mampiasa navigateur gropy mahazatra.

    • 2
      • 3

        Doug,

        JAWS tsy mamaky lohateny rohy amin'ny alàlan'ny default, fa marina ny anao, mahavita izany izy. Fa maninona ianao no mitady lohateny rohy raha tsy fantatrao fa teo izy, ary na dia teo aza ianao, azo antoka fa nianjera tamin'ny olana azo ampiasaina izy io izay midika hoe manome mpampiasa kely tsy mahay miasa amin'ny fampiasana ny tranokalanao ianao.

        Ho an'ny mpizaha an-tsoratra, ny lahatsoratra atoronao ahy mankany amin'io Lynx io dia mamela anao hitondra lisitr'ireo lohateny misy rohy ihany koa, saingy ny tiako holazaina dia hoe raha tsy fantatrao fa nisy rohy tao, satria tsy nisy lahatsoratra teo aloha. , maninona ianao no mitady lahatsoratra lohateny?

        Ary farany, ny toetran'ny lohateny rohy dia mbola tsy hiseho na amin'ny fizahana misy sary tsy alefa na tsy avelan'ny CSS.

        Ka eny, ny rohy misy lohateny dia tsara kokoa noho ireo tsy misy, fa amin'ity tranga ity dia kely fotsiny.

        Izany no antony fampiasana sary iray, mba hamakiana ny alt alt, na fanoloana sary, ka eo ny lahatsoratra, safidy azo antoka kokoa, azo idirana ary azo ampiasaina kokoa.

        • 4

          Vaovao tsara, Phil. Hiezaka hanatsara izany amin'ny lahatsoratra aho, saingy manafina ny lahatsoratra fotsiny - amin'izay dia hamaky ilay lahatsoratra misy rohy ny vokatra azo aleha toy ny JAWS ary haseho ny lahatsoratra raha tsy mandeha ny CSS na ny sary.

          Tsy miombon-kevitra aho fa ny vahaolana tokana azontsika atao dia ny fametrahana sary misy rohy.

  2. 5
  3. 8

    Nangalariko izany. Teo, hoy aho.

    Doug, mahafinaritra ny sary ary tsotra be ilay coding dia mampatahotra ahy (nilalao CSS ary izao dia "azoko").

    Nanamboatra ilay kaody hamaly ny filako, namantatra hoe aiza no hampidinako ny HTML kely, ary tsoriko fa tsara izany ary nodioviny ny tampon'ny sisin-kavoakako izay nitondra ahy INSANE.

    Mety mila mividy an'io kafe io fotsiny aho!

  4. 10

    Doug,

    Ho feo tsy mitovy hevitra aho, hampiasa ny zavatra niainako ho ohatra. Tadidiko ny mailaka nataonay rehefa niova ny mailako tao an-trano ary nomarihinao fa tsy maintsy nisafidy ilay mailaka vaovao fotsiny aho. Tokony hiaiky aho fa efa nisy fotoana kely "nahitana" ilay fampiasa vaovao ao amin'ny tranonkalanao hisafidianana indray. Ny ampahany amin'izany dia satria ny rohy tany am-boalohany dia somary nentim-paharazana ary tadidiko fa tsy tadidiko ilay iray. Ny iray hafa dia satria ny valopy antsasaky ny sisiny dia tsy toy ny valopy fotsiny tamiko. Rehefa afaka 5 na minitra teo ho eo dia nanomboka nanakodia ny totoziko tamin'ny sary rehetra aho ary rehefa naseho ny lohateny "Subscribe with Email", dia fantatro fa nanao asa aman-draharaha aho. Ny atidohako koa dia nahita hoe inona ilay sary misy rohy.

    Saingy, farafaharatsiny amiko, ny valopy iray nifanila dia tsy mora tamiko satria toerana hisoratana anarana amin'ny fampandrenesana mailaka. Ary (satria nilazana aho fa hifarana amin'ny zavatra mahafinaritra foana) dia miombon-kevitra amin'i Phil etsy ambony aho; ny fomba dia tena tsotra ary miasa tsara ny entana rehetra. Raisiko ho anao ny fitaovana famolavolana anao nanampy anao hanome ny refy marina ho an'ireo fizarana 3; fiheverana marina ve izany? Tsy maintsy mieritreritra aho, satria raha nisy aho nanao hoe 400 sary ny sakany dia mila mahafantatra ny toerana mety, sns.

  5. 12
    • 13

      William,

      Toa mety manana fifanolanana eo anelanelan'ny anaran'ny kilasanao hevitra sy ny anaran'ny kilasy ao amin'ny sary eo ankilany ianao. Azonao atao ny manome anarana azy ireo amin'ny fomba hafa mba hanafoanana ny fifanolanana. Ampahafantaro ahy raha mila tanana ianao!

      Doug

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

    Fomba tsara, saingy mila zavatra amin'ny sarintany topografika aho, ka tsy afaka mampiasa faritra mahitsizoro… Mieritreritra aho fa tsy maintsy mampiasa ilay sary an-tsary taloha miaraka amina fandrindrana, saingy angamba handavaka lalindalina kokoa aho…

  11. 19

    Misaotra an'ity fampahalalana ity, Doug. Efa teto aho taloha ary manontany tena hoe ahoana no nanaovanao izany. Tianay ny namorona sarintany toy izany mba hampidirina aorian'ny lahatsoratray, ary ankehitriny rehefa manam-bola izahay dia afaka manao azy. Bravo!

  12. 20
  13. 21

    Salama Doug,
    Namela fanehoan-kevitra teo aloha aho saingy tsapako fa saika tsy nanolotra fahitana momba ny olana mahazo ahy mihitsy aho. Izahay dia mampifanaraka ny lohahevitra iray amin'ny wordpress mba hanampiana anay handefa ny sitcom-tserasera eto:

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

    Ho hitanao izao fa manana faneva fitetezana manerana ny tampony izahay, sary iray nokasainay hasiana saritany tahaka ny efa ampolony hatrizay. / Palmforehad. Tsy misy amintsika no tena tsy mahatakatra CSS, saingy tafintohina isika ary ampy hatreto. Ny lahatsoratrao ao amin'ny IRAY AMIN'OLO amin'ireo izay am-polony nanome izany dia tena fahitana amin'ny fomba fampiasana sary an-tsary amin'ny CSS mora foana. Nampiarahiko tamin'ny takelakao ny takelaka, fa tsy fantatro izay hametrahana ny HTML. Ny hany nolazainao dia “Ampio ny html… Mahafinaritra sy tsotra izany” ary avy eo nanjary tsy nahatsiaro tena aho satria nieritreritra .. “tsy dia tsotra loatra ho ahy!” Tsy fantatro fa afaka manampy html amin'ireo pejy php ao amin'ny tonian-dahatsoratra. Apetrako ao amin'ny lohateny ve ny html? Ny modely Main Index? Ny Function? Heveriko fa ny mpampiasa wordpress rehetra dia manana safidy hanovana ny lohahevitr'izy ireo ao amin'ny dashboard editor, izay toa manerantany amin'ny asany. Raha afaka manoro hevitra ianao hoe aiza no hametrahana ny html, tiako ny mampifanaraka ny kaody oru ho an'ny bikan'ny navagation ahy.

    Misaotra nizara ny fahalalanao tamin'ny mpiara-monina. Faly aho mahazo kafe ho anao.

    • 22

      Salama Phay!

      Ireo rakitra rehetra ao amin'ny lohahevitra bilaoginao dia azo alaina ao amin'ny tontonana Admin ho an'ny fanovana. Raha tsindrio ny fampisehoana ary avy eo ny tonian-dahatsoratra Theme, dia tokony ho afaka mahita ny lisitry ny fisieo ankavanana sy ny editor amin'ny ankavia.

      Raha irinao ho eo amin'ny sisim-baravaranao ity dia mety manana pejy Sidebar ianao. Tsindrio raha hanitsy azy ary apetraho ao anaty pejy tianao ilay HTML.

      Fanamarihana iray: ny fanitsiana ny takelaka dia mifandraika amin'ny pejinao, noho izany dia mila mampakatra ny sary amin'ny lahatahiry sary lohahevitra ianao raha mijery azy tahaka ny sary hafa ao amin'ny lohahevitrao.

      Fanantenana izay manampy!

    • 23

      Phay,
      Nahita an'ity tranonkala ity aho androany ary nanana olana mitovy aminao. Te hampiditra sarin-tsary amin'ny sary lohateny ihany koa aho. Rehefa avy nilalao azy nandritra ny fotoana kelikely aho dia nahazo tsara. Apetraho ao amin'ny rakitra header.php ny div HTML. Napetrako teo anelanelan'ny sy. Tsy azonao antoka raha manana izany kaody marina izany ny modelyo, fa milalao miaraka aminy ao amin'ny rakitra header.php dia ho hitanao.
      -
      Paul

  14. 24

    Misaotra ny valiny haingana!

    Tsia, tsy tiako ho eo amin'ny sidebar teh izany, eo an-tampon'ny pejy (azonao jerena ao amin'ilay rohy nomeko- ny boaty fitetezana mavokely milaza hoe contant, momba ny fampisehoana ect ..)

    Niasa tao amin'ny dashboard maraina aho, indrisy, tsy azoko antoka ny rakitra apetrako amin'ny html, araka ny voalaza etsy ambony, manana, header.php maromaro, index.php lehibe, functions.php, footer.php aho. Tsy azoko antoka hoe aiza no ampidirina ny kaody html. (ny tapany voalohany nomenao, efa nampidiriko tao anaty takelaka takelakao ny sisa tavela) Manana ny sariko ao amin'ny tranokala aho, efa vonona ny handeha ny zava-drehetra, mila mahafantatra fotsiny aho hoe aiza no ampio ny fizarana html an'ny kaody amin'ny fampifanarahana.

    Misaotra betsaka noho ny fotoananao sy ny fanontanianao fanontaniana avy amin'ny olona vao manomboka.

    Phay

  15. 25

    … Na mety misy olona afaka mandefa amin'ny fanehoan-kevitra momba ny fisie izay hametrahantsika ny ampahan'ny html amin'ilay kaody. Lehilahy iray vitsivitsy no nandefa lahatsoratra vitsivitsy nilaza fa fantany izany. Tsy dia tsara vintana aho.

    Phaylen

  16. 26
  17. 27

    Manana fotoana tsy mety aho mitady fomba hametrahana sarintany misy sary azo tsindriana ao amin'ny wordpress satria manala ny tagan'ny map html. Mety handeha ny lalanao fa ny sarintanin'i Etazonia dia mazava ho azy fa sarotra ny manodina izany. Very aho.

    Help.

    Toa ny flash ihany no safidiko?

    • 28

      Dave,

      Raha apetrakao ao anaty maodelinao ilay sary dia tsy maninona ianao. Raha apetrakao amin'ny sariny tena izy ny sarintany, dia mety hahita olana amin'ny sivana ianao. Ny fomba niasako tamin'io dia mahatsiravina, fa indraindray nampiasa iframe aho.

      Doug

  18. 29

    Hi,

    toa samy hafa ny sarintan-tsary sy ny rohy, tsy miara-miasa izy ireo toa ny fomba fanaovana sarintany amin'ny html

    rehefa ampidiriko eo am-pelatanana ny toeran'ny eo afovoany (havia afovoany) ho an'ny sarintany, ny fananganana ny rohy dia tsy manaraka.

    misy fomba ahafahana mitety an'io? tena tia olona aho. Misaotra anao.

  19. 31

    Hampiasa fomba mitovy amin'izany ve ny sarin-tsary lehibe kokoa sy sarotra kokoa toa ny ezahiko hampiasaina?

    Raha mijery ny tranokalako ianao, kitiho ny rohy mankany ankavia ary ho hitanao ny sary ezahiko hampiasaina ho sarintany (eo ambanin'ny abidia Text).

    Amin'ny ankapobeny, ny fiezahana hampiasa ny sary handehanana amin'ny faritra tsirairay amin'ity lisitra ity amin'ny alàlan'ny taratasy.

    Mazava ho azy fa nandany 20 minitra nanamboarana sarintany niaraka tamin'ny GIMP aho, ary avy eo dia nesorin'i WP ireo sarin-tsarintany, ka izany no nahitako ny tranonkalanao.

    Na izany aza, azonao atao ny mieritreritra mampiasa Flash

    Misaotra.

  20. 33

    Izaho izao dia mampiasa lamina modely sy fanovana miaraka amin'ny entako. Te-hanampy sarintany aho, saingy tsy azoko antoka hoe aiza no hametrahana azy ao amin'ny css. ny sary tiako hatao sarintany dia ao amin'ny lohan-doha.

  21. 34

    Salama, nanangana ny tranonkalako tao amin'ny joomla aho… te hampiasa an'io fomba io aho mba hahatonga ny logo ny pejiko ho rohy mankany an-trano, nolazaina aho fa tsy afaka manao izany amin'i joomla fa manome ahy fanantenana ity lahatsoratra ity! ny fanampiana amin'ny alàlan'ny mailaka dia hankasitrahana fatratra… .misaotra

  22. 35

    Salama Doug - Manamboatra sarintany misy sary miorina amin'ny css aho izay manana rollovers lavitra (amin'ity tranga ity dia miseho any an-toeran-kafa ny pejy rehefa ampidirinao ny iray amin'ireo toerana ipetrahana sary). Na izany na tsy izany, hitako ny ohatra navelanao teto raha nikaroka momba izany aho… ary nieritreritra aho fa hizara an'ity manaraka ity:

    1. Ho an'ny fahazoana miditra, tsy tokony hampiasa fahitana ianao: tsy misy (na aseho: tsy misy raha noheverinao izany) hanafenana ny lahatsoratra eto, toy ny singa iray mitafy fahitana: miafina dia tsy hovakin'ny mpamaky efijery (ireo izay manaraka manokana) .

    Mampiasà teknika fanoloana sary matanjaka kokoa. Manoro hevitra aho na ny fomba Phark na ny Gilder / Levin - ireo no anarana voarakitra tsara kokoa amin'ny google hahitana ireo teknika fototra. Aleoko ny G / L satria izy io dia miasa miaraka amin'ny CSS, fa ny sary kosa maty.

    2. Na dia tsy hitako aza fa tapaka (mampiasa FF3), dia mety hitera-doza ihany koa ny fampiharana ny toeranao. Ny singa iray tena napetraka dia napetraka raha oharina amin'ny ray aman-dreny akaiky indrindra. Amin'ny ankapobeny, te-hametraka mazava tsara ny toerana misy anao ianao amin'ny alàlan'ny fampiharana 'position: relatif' amin'ny #subscription. Avy eo ny ankizy (ireo rohy napetraka) dia azo apetraka ao anatin'io ray aman-dreny io. Ity fomba ity dia manampy amin'ny fiantohana ireo valiny azo itokisana kokoa amin'ireo mpizaha.

    Ary koa, tokony hampiasa ny fanambaram-panondroana ny "top: x" sy "left: x" (izay x ny sandan'ny offset, lazao amin'ny px) fa tsy ny sisin-tany hikirakirana an'io toerana io. Averiko indray, tsy voatery hitako fa manimba ny fomba itiavanao azy io, fa ny ambony sy ny ankavia dia natao ho an'izay ka maninona no tsy ampiasainao? Fanampin'izany, manana float sy margin napetraka amin'ny singa iray ihany ianao, izay amin'ny toe-javatra manokana dia miteraka ilay bug "double margin" ao amin'ny IE6 (notsapainao ve izany teo?) - na dia misy aza ny fanamboarana dia esorinao tanteraka ilay olana amin'ny fampiasana top ary navela fa tsy ny sisiny hametrahana azy amin'ity tranga ity.

    3. Farany, maninona raha mampiasa lisitra tsy voahitsy semantika ho an'ireo rohy ireo fa tsy div tsy misy dikany?

    Miala tsiny amin'ny fandavahana azy… tiako ny mizara, b / c fantatro avy amin'ny zavatra niainany ny fomba maro isan-karazany amin'ny fampiasana CSS hahazoana valiny irina, saingy misy fomba sasany azo antoka fa miasa kokoa (azo itokisana, cross-browser) kokoa noho ny hafa . HTH.

  23. 36
  24. 37
  25. 38

    Misaotra anao indrindra!! Ny torolàlanao dia nahavonjy ahy asa JAMAY… Vaovao amin'ny fampandrosoana web aho, ary nijaly noho ny tetik'asa lehibe voalohany nataoko. Nahavita azy aho… faly ny mpanjifa, faly tokoa ary toy izany koa aho!

  26. 39

    Salama, misaotra betsaka anao nandefa an'ity! Taona maro taty aoriana ary mbola manampy… mahafinaritra! Miezaka mafy aho haka ny sarin-tsariko hampifandray amin'ny toerana mety. Manana sora-baventy aho ary tiako ny rohy ara-tsosialy eo ankavanan'ny sora-baventy mampifandray amin'ny alàlan'ny kaody natolotrao. Mety tsara izany, raha tsy hoe manao zavatra tsy mety aho satria miseho eo amin'ny ilany havia farany ambony ny rohy, fa tsy amin'ny sary masina, fa amin'ny sary famantarana. Azoko antoka fa zavatra tsotra io, saingy tsy hitako izay. Nihevitra aho fa hizara azy eto raha toa ka manana fahitana ianao. Misaotra indray namoaka ity!

Inona ny hevitrao?

Mampiasa Akismet ity tranonkala ity mba hampihenana spam. Fantaro ny fomba amoahanao ny angona fanehoanao.