როგორ შევქმნათ გამოსახულების რუკა CSS– ით

პარამეტრები

მე მინდოდა რაიმე "geeky", ამიტომ გადავწყვიტე "ჯიბის" გრაფიკა, სადაც განთავსებული იქნება ჩემი ბლოგის გამოწერის ყველა მეთოდი.

ვებ – 1.0 – ის დღეებში, მსგავსი ბმულების შეგროვება შეიძლება აშენებულიყო თქვენი სურათის გაკვრით თითოეულ გრაფიკზე ბმულებით, შემდეგ კი ყველაფრის უკან დასაკერებლად ცხრილის გამოყენებით. მისი მიღწევა ასევე შესაძლებელია სურათების რუკა მაგრამ ეს ჩვეულებრივ მოითხოვს კოორდინატების სისტემის შესაქმნელად ინსტრუმენტს. კასკადური სტილის ფურცლების გამოყენება ამ ტონს უფრო ამარტივებს… სურათების გაბრწყინებას და კოორდინატების სისტემის შესაქმნელად ინსტრუმენტის პოვნას.

  1. ააშენეთ თქვენი სურათი, რომლის გამოყენებაც გსურთ. შეგიძლიათ გამოიყენოთ ეს გრაფიკი ქვემოთ (დააწკაპუნეთ თაგუნით და შეინახეთ ჩამოსატვირთად):
    პარამეტრები
  2. ატვირთეთ თქვენი სურათი თქვენს CSS– სთან შესაბამის დირექტორიაში. WordPress– ში ამის გაკეთება უმარტივესია, შეგიძლიათ განათავსოთ ის თქვენი საქაღალდის სურათების საქაღალდეში.
  3. დაამატეთ თქვენი HTML. ეს ლამაზი და მარტივია ... div, რომელშიც სამი ბმულია:
    > div id = "გამოიწერო">> id = "rss" href = "[შენი არხის ბმული]" title = "გამოიწერე RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "ელ.ფოსტა" href = "[თქვენი ელ.ფოსტის გამოწერის ბმული]" title = "ელ.ფოსტით გამოწერა" >> span class = "hide"> ელ.ფოსტა> / span >> / a>> id = "მობილური" href = "[თქვენი მობილური ბმული]" title = "მობილური ვერსიის ნახვა" >> span class = "hide"> მობილური> / span >> / a>> / div>
    
  4. შეცვალეთ თქვენი კასკადური სტილის ფურცელი. თქვენ დაამატებთ 6 განსხვავებულ სტილს. 1 სტილი საერთო div- ისთვის, 1 tag- ისთვის, ასე რომ იგი არ აჩვენებს ტექსტების გაფორმებას, 1 სტილი ტექსტის დამალვისთვის (გამოიყენება მისაწვდომობისთვის) და 1 სტილის დაზუსტება თითოეული ბმულისთვის:
    # გამოწერა {/ * ფონის სურათის ბლოკი * / ჩვენება: ბლოკი; სიგანე: 215px; სიმაღლე: 60 პიქსელი; ფონი: url (images / options.png) განმეორება; margin-top: 0px; } # გამოწერა {text-decoration: არცერთი; } .დამალვა {ხილვადობა: დაფარული; } #rss {/ * RSS ბმული * / float: მარცხენა; პოზიცია: აბსოლუტური; სიგანე: 50px; სიმაღლე: 50 პიქსელი; ზღვარი მარცხნივ: 20px; ზღვარი-ზემო: 5px; } # ელ.ფოსტა {/ * ელ.ფოსტის ბმული * / float: მარცხენა; პოზიცია: აბსოლუტური; სიგანე: 50px; სიმაღლე: 50 პიქსელი; ზღვარი მარცხნივ: 70 პიქსელი; ზღვარი-ზემო: 5px; } #mobile {/ * მობილური ბმული * / float: მარცხენა; პოზიცია: აბსოლუტური; სიგანე: 50px; სიმაღლე: 50 პიქსელი; ზღვარი მარცხნივ: 130 პიქსელი; ზღვარი-ზემო: 5px; }

პოზიციონირება ლამაზი და მარტივია… დაამატეთ სიმაღლე და სიგანე და შემდეგ დააყენეთ მარცხენა ზღვარი სურათის მარცხენა მხრიდან, ხოლო ზედა ზღვარი გამოსახულების ზედა მხრიდან!

ეს "როგორ უნდა" პოსტი არის შესვლისთვის Geeks არის სექსუალური "როგორ უნდა" საბოლოო კონკურსი! ერთი შენიშვნა, მართალია, სურათის რუქას შეიძლება ჰქონდეს ბევრად უფრო რთული მრავალკუთხედები, მაგრამ მე ნამდვილად არ მინახავს ძალიან ბევრი ადგილი, სადაც ეს აუცილებლად უნდა გქონდეს. მე შევამჩნიე, რომ დიდი რაოდენობით 'RSS სურათი Geeks– ზე სექსუალური გვერდითი ზოლია ... ეს კარგი ადგილია ბმულისთვის. 😉

განახლებულია 10/3/2007 უკეთესი ხელმისაწვდომობისთვის ფილ!

სპონსორი: თუ თქვენ ვებ – დიზაინის ახალბედა ხართ, შექმენით საკუთარი ვებ – გვერდი სწორი გზა HTML და CSS– ის გამოყენებით, მე –2 გამოცემა სავალდებულოა. მარტივად მისაღები სახელმძღვანელოდან თქვენ შეისწავლით თუ როგორ უნდა შექმნათ ვებ – გვერდი საუკეთესო გზა - ამის გაკეთება თვითონ!

41 კომენტარები

  1. 1

    დაგი, ეს ლამაზი მეთოდი ჩანს, მაგრამ ძალიან მიუწვდომელია.

    განვიხილოთ ბრმა მომხმარებელი, რომელსაც აქვს ეკრანის წამკითხველი, მომხმარებელი, რომელზეც მხოლოდ ტექსტური ბრაუზერია ან ვინც სტუმრობს საიტს CSS ან სურათების ჩართვით (მაგალითად, შესაძლოა მობილური მომხმარებელი ეძებს ბმულს თქვენი მობილური მეგობრული საიტისთვის). არცერთმა არ იცის ამ სამი ბმულის შესახებ, რადგან მათ ტექსტი არ აქვთ. თუ გამოსახულებები გამორთულია, მომხმარებელი ვერც ნახავს alt ტექსტს იმის აღსაწერად, თუ რა იქნებოდა იქ, რადგან ეს ფონის სურათია.

    უკეთესი იქნება სურათების დაჭრა, მათი მიბმა, სიაში ჩასმა და ერთმანეთის გვერდით მოძრაობა. ან თუნდაც გამოიყენოთ ტექსტი ბმულებისთვის და შეცვალეთ ტექსტი სტანდარტული სურათის ჩანაცვლების ტექნიკის გამოყენებით. ეს, როგორც ჩანს, მოსახერხებელია, მაგრამ ბევრად ართულებს / შეუძლებელს ხდის მათ, ვინც არ იყენებს სტანდარტულ გრაფიკულ ბრაუზერს.

    • 2

      მე ფრთხილად (რადგან მეტი გამოცდილება გაქვთ) არ ვეთანხმები, ფილ, თითოეულ ბმულს აქვს სათაური, ასე რომ თითოეული მათგანი სრულად ხელმისაწვდომია. ტექსტის სათაურების წაკითხვა არის წვდომის პროგრამების შესაძლებლობები, როგორიცაა JAWS. აი კარგი პოსტი სათაურებზე ბმულებზე და მისი გავლენა ხელმისაწვდომობაზე.

      • 3

        დაგ,

        JAWS ნაგულისხმევად არ კითხულობს ბმულების სათაურებს, მაგრამ მართალი ხართ, მას შეუძლია გააკეთოს. რატომ ეძებდით ბმულების სათაურებს, რომ არ იცოდეთ, რომ ეს იქ იყო და რომც იყოთ, ეს ნამდვილად გამოდგება გამოსაყენებელ საკითხზე, რაც ნიშნავს, რომ თქვენ ნაკლებად შეძლებენ თქვენს საიტს მეორე კურსის გამოყენების გამოცდილება.

        ტექსტური ბრაუზერებისათვის, Lynx- ის მიმართული სტატიის საშუალებით, თქვენ ასევე შეგიძლიათ ჩამოთვალოთ ბმულის სათაურები, მაგრამ ჩემი აზრით, თუ არ იცოდით, რომ იქ იყო ბმული, პირველ რიგში ტექსტი არ იყო , რატომ ეძებდით სათაურის ტექსტს?

        დაბოლოს, ბმულის სათაურის ატრიბუტები მაინც არ გამოჩნდება ნებისმიერისთვის, ვინც ათვალიერებს სურათების ჩართვას, ან CSS– ს გარეშე.

        დიახ, სათაურებთან კავშირი უკეთესია, ვიდრე გარეშე, მაგრამ ამ შემთხვევაში ეს მხოლოდ მარგინალურია.

        ამიტომ სურათის გამოყენება, რომ alt ტექსტის წაკითხვა ან სურათის ჩანაცვლება მოხდეს, რომ ტექსტი იქ იყოს, ბევრად უფრო უსაფრთხო, უფრო ხელმისაწვდომი და უფრო გამოსადეგი ვარიანტია.

        • 4

          კარგი ინფორმაცია, ფილ. მე ვეცდები გავაუმჯობესო ეს ტექსტით, მაგრამ უბრალოდ დავმალო ტექსტი - ამ გზით ხელმისაწვდომი პროდუქტი, როგორიცაა JAWS, წაიკითხავს ბმულის ტექსტს და ტექსტი გამოჩნდება, თუ CSS ან სურათები გამორთულია.

          მე არ ვეთანხმები, რომ ერთადერთი ხელმისაწვდომი გამოსავალი იქნება სურათის განთავსება ბმულით.

  2. 5
  3. 8

    მოვიპარე. იქ ვთქვი.

    სამწუხაროდ, გრაფიკა ფანტასტიკურია და კოდირება ისეთი წარმოუდგენლად მარტივია, რომ მეშინია (ვთამაშობდი CSS– ს და ახლა საბოლოოდ „გავიგე“).

    შეცვალა კოდი, რომ დააკმაყოფილოს ჩემი საჭიროებები, გაერკვია, სად უნდა ჩავსვა HTML ბიტი, და გულწრფელად გამოიყურება ის მშვენივრად და გაასუფთავა ჩემი გვერდითი ზოლის ზედა ნაწილი, რომელიც უსიამოვნოდ მიპყრობდა.

    შეიძლება ჯერ კიდევ მომიწიოს ყავის ყიდვა!

  4. 10

    დაგ,

    მე ვაპირებ განსხვავებული ხმა ვიყო, მაგალითისთვის ჩემი გამოცდილების გამოყენებით. მახსოვს ჩვენი ელ.ფოსტა, როდესაც ჩემი სახლის ელ.ფოსტა შეიცვალა და თქვენ აღნიშნეთ, რომ მე უარი უნდა მეთქვა ჩემს ახალ ელ.ფოსტაზე. უნდა ვაღიარო, რომ დიდი დრო მქონდა თქვენს საიტზე ახალი ფუნქციის "აღმოსაჩენად", რომ კვლავ აირჩიე. ამის ნაწილი იყო იმის გამო, რომ ორიგინალი ბმული ცოტა უფრო ტრადიციული იყო და ბუნდოვნად მახსოვდა ის. სხვა ის იყო, რომ გვერდულად ნახევარი კონვერტი თავდაპირველად უბრალოდ კონვერტს არ ჰგავდა. დაახლოებით 5 ან მეტი წუთის შემდეგ დავიწყე თაგვის ტრიალი ყველა სურათზე და როდესაც აჩვენა სათაური "გამოიწერე ელ.წერილით", მაშინ ვიცოდი, რომ ბიზნესში ვიყავი. ჩემმა ტვინმაც გაარკვია, რა იყო ბმულის სურათი.

    ყოველ შემთხვევაში, ჩემთვის მაინც, გვერდული კონვერტი არ იყო ინტუიტიური, როგორც ელექტრონული ფოსტის შეტყობინებების გამოწერის ადგილი. და (რადგან მითხრეს, რომ ყოველთვის რაღაც ლამაზით უნდა დასრულებულიყო) მე ვეთანხმები ფილს ზემოთ; მეთოდი მართლაც მარტივია და მთელი ნივთი შესანიშნავად მუშაობს. მე მივიღე თქვენი დიზაინის ინსტრუმენტი, რომელიც დაგეხმარებათ 3 განყოფილების ზუსტი ზომების გაცემაში; სწორი ვარაუდია? ასე უნდა ვიფიქრო, რადგან, ვთქვათ, 400 პიქსელის სიგანის სურათი, მე უნდა მცოდნოდა სწორი პარამეტრები და ა.შ.

  5. 12
    • 13

      უილიამი,

      როგორც ჩანს, შესაძლოა კონფლიქტი გქონდეთ თქვენი კომენტარის კლასის სახელებსა და გვერდის ზოლის გრაფიკის კლასის სახელებს შორის. თქვენ შეგიძლიათ სხვაგვარად დაასახელოთ კონფლიქტის გასარკვევად. გამაგებინე თუ გჭირდება ხელი!

      Doug

  6. 14

    როგორც ჩანს, ყველაფერი მუშაობს როგორც FF- ში, ასევე IE- ში… ვფიქრობ, თქვენ ალბათ უკვე საიტზე იყავით, როდესაც ვცდილობდი ჩამეყენებინა მოდული, რომელიც არც ისე კარგად მუშაობდა…

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

    კარგი მიდგომაა, მაგრამ ტოპოგრაფიული რუქისთვის რაღაც მჭირდება, ამიტომ მართკუთხედის არეების გამოყენება არ შემიძლია… ვფიქრობ, რომ ძველი სტილის გამოსახულების რუქა უნდა გამოვიყენო კოორდინატებით, მაგრამ, ალბათ, კიდევ უფრო ღრმად ჩავუღრმავდები

  11. 19

    მადლობა ამ ინფორმაციისთვის, დუგ. აქამდეც ვიყავი და მაინტერესებდა როგორ გააკეთე ეს. ჩვენ გვინდოდა მსგავსი რუქა შეგვექმნა ჩასასმელად ჩვენი შეტყობინებების შემდეგ და ახლა, როცა საშუალება გვაქვს, ამის გაკეთება შეგვიძლია. ბრავო!

  12. 20
  13. 21

    გამარჯობა დაგ,
    წინა კომენტარი დავტოვე, მაგრამ მივხვდი, რომ თითქმის ვერ შევძელი ჩემი დილემის გარკვევა. ჩვენ ვაწყობდით დასაწყისის თემას, რომელიც დაგვეხმარება ჩვენი ონლაინ სიტკომის წამოწყებაში აქ:

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

    ახლა ნახავთ, რომ ჩვენ ზემოდან გვაქვს ნავიგაციის ბანერი, გამოსახულება, რომლის ასახვასაც ვაპირებდით, როგორც აქამდე ათობითჯერ გვქონდა. / palmforehad. არცერთ ჩვენგანს ნამდვილად არ ესმის CSS, მაგრამ საკმარისად ვცდებით და აქამდე კარგად ვიქეცით ამ ეტაპზე. თქვენი სტატია მხოლოდ ერთში მოცემულია ათეულში, რომლებიც მოცემულია, არის რეალური ინფორმაცია იმის შესახებ, თუ როგორ გამოიყენოთ გამოსახულების გადაღება CSS– ში მარტივად. მე დავალაგე სტილის ფურცელი თქვენი მითითებების შესაბამისად, მაგრამ წარმოდგენა არ მაქვს სად უნდა განათავსოთ HTML. თქვენ თქვით: ”დაამატეთ თქვენი html… ლამაზი და მარტივია”, შემდეგ კი დავიხარე, რადგან მეგონა .. ”ჩემთვის არც ისე მარტივია!” არ ვიცოდი, რომ შემეძლო html დავამატო ამ PHP გვერდებზე თემის რედაქტორში. მოვათავსო html სათაურში? მთავარი ინდექსის შაბლონი? ფუნქციები? მე ვფიქრობ, რომ wordpress– ის ყველა მომხმარებელს აქვს შესაძლებლობა შეცვალოს თავისი თემა დაფის რედაქტორში, რაც ფუნქციონალურად საკმაოდ უნივერსალური ჩანს. თუ შეგიძლიათ შემოგთავაზოთ სად უნდა მოათავსოთ html, მიყვარს oru კოდის ადაპტაცია ნავიგაციის ზოლისთვის.

    გმადლობთ საზოგადოებისთვის თქვენი ცოდნის გაზიარებისათვის. ბედნიერი ვარ, რომ ყავა მოგიტანე.

    • 22

      გამარჯობა ფაი!

      თქვენი ბლოგის თემის ყველა ფაილი ხელმისაწვდომია Admin პანელის რედაქტირებისთვის. თუ დააჭირეთ პრეზენტაციას და შემდეგ თემების რედაქტორს, უნდა გქონდეთ უფლება ნახოთ თქვენი ფაილების სია მარჯვნივ და რედაქტორი მარცხნივ.

      თუ გსურთ ეს თქვენს გვერდით ზოლში იყოს, თქვენ ალბათ გვერდით ზოლის გვერდი გაქვთ. დააჭირეთ მის რედაქტირებას და შემდეგ განათავსეთ მოცემული HTML გვერდი, სადაც გსურთ.

      ერთი შენიშვნა: სტილის ფურცლის რედაქტირება თქვენს გვერდზეა, ამიტომ თქვენ უნდა ატვირთოთ სურათი თემის სურათების დირექტორიაში, თუ მას მიუთითებთ, როგორც სხვა სურათებში თქვენს თემაში.

      იმედი გვაქვს, რომ ეხმარება!

    • 23

      Phay,
      დღეს ამ საიტზე წავაწყდი და იგივე დილემა მქონდა, როგორც თქვენ. მე ასევე მინდოდა სათაურის სურათს დავამატო გამოსახულების რუკა. ცოტა ხნით მასთან თამაშის შემდეგ, სწორად მივხვდი. Div HTML ჩასვით header.php ფაილში. მე ჩავდე და. დარწმუნებული არ ვარ, აქვს თუ არა თქვენს შაბლონს ზუსტი კოდირება, მაგრამ ითამაშეთ მასთან ერთად header.php ფაილში და მიხვდებით.
      -
      პოლ

  14. 24

    მადლობა სწრაფი რეაგირებისთვის!

    არა, მე არ მინდოდა, რომ ეს გვერდითი ზოლის გვერდზე ყოფილიყო, ის გვერდის ზედა ნაწილშია (შეგიძლიათ იხილოთ მოცემულ ბმულზე - ვარდისფერი სანავიგაციო ზოლი, რომელშიც ნათქვამია კონტენტის შესახებ, შოუს შესახებ ...)

    მთელი დილა ვმუშაობდი დაფაზე, სამწუხაროდ, არ ვარ დარწმუნებული, რომელ ფაილში ვდებ HTML- ს, როგორც ზემოთ იყო ნათქვამი, მაქვს რამდენიმე header.php, main index.php, functions.php, footer.php. დარწმუნებული არ ვარ, სად უნდა ჩავსვათ html კოდი. (პირველი ნაწილი, რომელიც თქვენ მიუთითეთ, მე დარჩენილი ნაწილი ჩავწერე ჩემს ფურცელში) მე მაქვს ჩემი გამოსახულება ვებ – გვერდზე, ყველაფერი მზად არის წასასვლელად, უბრალოდ უნდა ვიცოდე სად უნდა დავამატო კოდის html ნაწილი ადაპტაციისთვის.

    დიდი მადლობა თქვენი დროისა და დამწყები კითხვის დასმისთვის.

    ფაი

  15. 25

    … იქნებ ვინმეს შეეძლოს გამოქვეყნებულიყო კომენტარში, თუ რომელ ფაილში ვდებთ კოდის html ნაწილს. რამდენიმე ჯენტლმენმა თქვა, რომ მან ეს გაერკვა. ასე არ გამიმართლა.

    ფაილენი

  16. 26
  17. 27

    მე ძალიან ჯანდაბა ვპოულობ დაჭერის სურათის რუკის ჩასმა WordPress– ში, რადგან ის html რუკის თეგებს იკავებს. თქვენი გზა იმუშავებს, მაგრამ აშშ-ს რუკა აშკარად რთულია ამ გზით გასახსნელად. Დავიკარგე.

    დახმარება

    როგორც ჩანს, ფლეშ მხოლოდ ჩემი ვარიანტია?

    • 28

      დეივი,

      თუ სურათს განათავსებთ თქვენს შაბლონში, კარგად იქნებით. თუ სურათის რუკას რეალურ შინაარსში განათავსებთ, შეიძლება ფილტრის პრობლემები შეექმნათ. ამ გზით მუშაობის გზა საშინელებაა, მაგრამ ზოგჯერ ვიყენებდი iframe- ს.

      Doug

  18. 29

    Hi,

    როგორც ჩანს, სურათის რუქა და ბმულები ორი სხვადასხვა რამეა, ისინი ერთმანეთთან არ მუშაობენ, თუ როგორ მუშაობს სურათის რუკა html- ში.

    როდესაც სურათის რუქის ჩასმა მოიცავს ფონის პოზიციონირებას (მარცხნივ მარცხნივ), ბმულების პოზიციონირება არ მოსდევს შემდეგს.

    რაიმე გადავლახოთ? ძალიან მოყვარული ვარ. გმადლობთ.

  19. 31

    გამოიყენებოდა მსგავსი მიდგომა უფრო და უფრო რთული სურათის რუქისთვის, როგორიც მე ვცდილობ გამოვიყენო?

    თუ დაათვალიერებთ ჩემს საიტს, დააჭირეთ მარცხნივ ბმულებს და ნახავთ სურათს, რომლის გამოყენებას ვცდილობ, როგორც სურათის რუქა (ტექსტის ანბანის ქვეშ).

    ძირითადად, სურათის გამოყენებას ცდილობენ ამ ჩამონათვალის თითოეულ მონაკვეთზე ასოებით გადასასვლელად.

    აშკარად, მე 20 წუთი დავხარჯე GIMP- სთან რუკის შესაქმნელად, შემდეგ კი WP ხსნის რუკის თეგებს, ასე რომ, როგორ ვიპოვნე შენი საიტი.

    თუმცა, შეიძლება იფიქრონ Flash– ის გამოყენებით

    მადლობა.

  20. 33

    ამჟამად ვიყენებ შაბლონის განლაგებას და ვაკეთებ რედაქტირებას საკუთარი პერსონალით. მსურს დავამატო გამოსახულების რუკა, მაგრამ არ ვიცი სად უნდა მოვათავსო იგი CSS– ში. სურათი, რომლის რუქის გაკეთებაც მინდა, სათაურის ნაწილშია.

  21. 34

    გამარჯობა, მე ჯომოლაზე ავაშენე ჩემი ვებსაიტი to მსურს გამოვიყენო ეს მეთოდი, რომ ჩემი გვერდის ლოგო ბმული იყოს სახლისკენ, მითხრეს, რომ ჯომოლასთან ერთად ამის გაკეთება არ შეგიძლია, მაგრამ სტატია იმედს მაძლევს! ელ.ფოსტით დახმარება ძალიან დაფასებული იქნება ... გმადლობთ

  22. 35

    გამარჯობა დუგ - მე ვაშენებ საკმაოდ რთულ css- ზე დაფუძნებულ სურათის რუკას, რომელსაც ასევე აქვს დისტანციური გადაბრუნება (ამ შემთხვევაში, ტექსტი აჩვენებს გვერდზე სხვა ადგილას, როდესაც სურათის ერთ-ერთ ცხელ წერტილს მიაქცევთ). ყოველ შემთხვევაში, მე წავაწყდი თქვენს მაგალითს აქ, როდესაც ვიკვლევდი ამას… და ვფიქრობდი, რომ შემდეგ ცნობას ვიზიარებდი:

    1. წვდომისთვის, თქვენ არ უნდა გამოიყენოთ ხილვადობა: არცერთი (ან ეკრანი: არც თუ გაითვალისწინეთ) ტექსტის დასამალად, როგორც ხილვადობის სტილი: არ დაიკითხება ეკრანის მკითხველები (მათ, ვინც სპეციფიკას მიჰყვება) .

    ამის ნაცვლად, გამოიყენეთ სურათების შეცვლის უფრო ძლიერი ტექნიკა. მე გთავაზობთ ფარკის მეთოდს ან გილდერ / ლევინს - ეს არის უკეთეს დოკუმენტურად დასახელებული სახელები Google– ისთვის, რომ იპოვოთ ძირითადი ტექნიკა. მე მირჩევნია G / L, რადგან ის ასევე მუშაობს CSS– ით, მაგრამ გამოსახულებები გამორთულია.

    2. მიუხედავად იმისა, რომ ვერ ვხედავ მსხვრევას (FF3– ის გამოყენებით), თქვენს პოზიციონირების განხორციელებას ასევე აქვს თანდაყოლილი რისკები. აბსოლუტურად პოზიციონირებული ელემენტი განლაგებულია მისი უახლოესი პოზიციონირებული მშობლის მიმართ. ძირითადად, თქვენ გსურთ პირდაპირ განსაზღვროთ პოზიციონირების კონტექსტი # გამოწერის მიმართ "პოზიცია: შედარებით". შემდეგ ბავშვები (პოზიციონირებული ბმულები) შეიძლება განთავსდნენ ამ მშობლის შიგნით. ეს მეთოდი ხელს უწყობს ბრაუზერების უფრო საიმედო შედეგების უზრუნველყოფას.

    ასევე, ამის შემდეგ უნდა გამოიყენოთ პოზიციონირების დეკლარაციები "ზედა: x" და "მარცხენა: x" (სადაც x არის ოფსეტური მნიშვნელობა, ვთქვათ px- ში) და არა მინდვრები ამ პოზიციონირებისთვის. კიდევ ერთხელ, მე სულაც არ ვხედავ, რომ ის არღვევს ისე, როგორც თქვენ გაქვთ, მაგრამ ზედა და მარცხენა განკუთვნილია ამისათვის, რატომ არ გამოიყენოთ ისინი? გარდა ამისა, თქვენ გაქვთ ნაკადები და მინდვრები დაყენებული იმავე ელემენტზე, რაც სპეციფიკურ პირობებში იწვევს "ორმაგ ზღვარს" შეცდომას IE6- ში (ეს ხომ არ გამოსცადეთ იქ?) - სანამ გამოსწორებაა, ამ საკითხს თავიდან აიცილებთ top- ის გამოყენებით და დატოვეს მინდვრების ნაცვლად ამ შემთხვევაში პოზიციონირებისთვის.

    3. დაბოლოს, რატომ არ უნდა გამოიყენოთ ამ ბმულებისთვის სემანტიკურად ჟღერადობის უწესრიგო სია უაზრო div– ის ნაცვლად?

    ბოდიში დრონინგისთვის like უბრალოდ მინდა გავუზიარო, b / c გამოცდილებით ვიცი, როგორ არსებობს CSS– ის გამოყენების მრავალი სხვადასხვა გზა სასურველი შედეგის მისაღებად, მაგრამ ზოგიერთ გზაზე უკეთ მუშაობს (უფრო საიმედო, ბრაუზერის საშუალებით) ვიდრე სხვები . HTH

  23. 36

    ჩემი ონლაინ სურათების რუკების ინსტრუმენტი ახლა აკეთებს CSS გამოსახულების რუკებს, ასევე HTML გამოსახულების რუკებს.

    აქ არის ბმული
    ონლაინ სურათების რუკის ინსტრუმენტი - html & css

  24. 37

    მადლობა, დაგ! რამდენიმე სახელმძღვანელოს განხილვის შემდეგ, ამას ვასრულებ ჩემი მეუღლის კუპონის ბლოგზე, http://www.SavingWithAmy.com/. ეს გაცილებით მარტივი და უმარტივესი სახელმძღვანელოა, რომელსაც თვალყურს ადევნებ და განვახორციელებ.

  25. 38

    Დიდი მადლობა!! თქვენმა ინსტრუქციამ დაზოგა სამუშაო საათების განმავლობაში ... მე ვარ ვებ – გვერდის შემქმნელი და ჩემი პირველი დიდი პროექტით განვიცდი. მე ეს მოვახერხე ... კლიენტი ბედნიერია, სინამდვილეში ექსტაზურია, მეც ვარ!

  26. 39

    გამარჯობა, დიდი მადლობა რომ გამოაქვეყნეთ! წლების შემდეგ და ის მაინც ეხმარება… სასიამოვნოა! მე ვცდილობ მივიღო ჩემი სურათის რუქა სწორ ადგილას. მე მაქვს ბანერი და მსურს, რომ ბანერის ზედა მარჯვენა მხარეს მდებარე სოციალურმა ხატებმა დააკავშირონ თქვენს მიერ მოწოდებული კოდის გამოყენებით. ეს შესანიშნავად მუშაობს, გარდა იმისა, რომ რაღაცას არასწორად ვაკეთებ, რადგან ჩემი ბმულები ეკრანის მარცხენა მარცხენა მხარეს ჩანს, არა სოციალური ხატების, არამედ ლოგოზე. დარწმუნებული ვარ, ეს რაღაც მარტივია, მაგრამ უბრალოდ ვერ ვხვდები. ფიქრობდა, რომ აქ გაგიზიარებ, თუ რაიმე ხედვა გექნება. კიდევ ერთხელ გმადლობთ, რომ გამოაქვეყნეთ ეს!

ეს საიტი იყენებს Akismet- ს, რათა შეამციროს სპამი. შეისწავლეთ თქვენი კომენტარის მონაცემები დამუშავებული.