მოგესალმებით ბლოგის საიტის ძვირფასო მკითხველს. ჩვენ ვაგრძელებთ ბლოკის განლაგების თემას, რომელიც დაიწყო და გაგრძელდა სამ წინა სტატიაში. ძირითადად, ჩვენ უკვე შევძელით ვებგვერდის როგორც ორი, ისე სამ სვეტიანი განლაგების შექმნა და რეზინის განლაგების შექმნის ნიუანსების გათვალისწინებაც კი მოვახერხეთ.
გარდა ამისა, პირველ სტატიებში, რომელიც ეძღვნებოდა საიტის განლაგებას (), განიხილეს ვებ – მასტერინგის რამდენიმე ძირითადი კონცეფცია, რომელთა გააზრების გარეშეც საკმაოდ რთული იქნება ნიუანსების გაგება.
რა პრობლემები აქვს ჩვენს ვებ – გვერდის განლაგებას
დღეს ჩვენ შევეცდებით გადაჭრას ერთი პატარა პრობლემა, რომელიც შეიძლება წარმოიშვას ჩვენ მიერ ადრე შექმნილი განლაგებით. ყველაზე ხშირად, ეს ვითარება ხდება დიდ მონიტორებზე მისი ნახვისას (მაღალი რეზოლუციით) და მცირე რაოდენობის ინფორმაციის გვერდის ჩვენებისას.
ამ შემთხვევაში შეიძლება მოხდეს, რომ ქვედა კოლონტიტული ეკრანის ქვედა ნაწილში არ იყოს დაჭერილი, მაგრამ იგი განთავსდება თითქმის შუა სიმაღლეში, რაც უმეტეს შემთხვევაში გამოიყურება მახინჯი და არა ესთეტიკური თვალსაზრისით.
ამის მიუხედავად, ჩემი აზრით, აუცილებელია ქვედა გვერდის დაჭერა საიტის განლაგების ბოლოში და ეს განსაკუთრებით ეხება იმ შემთხვევაში, თუ გვერდის სიმაღლე აღმოჩნდება მომხმარებლის ეკრანის სიმაღლეზე ნაკლები. სქემატურად შეიძლება წარმოდგენილი იყოს შემდეგნაირად:
იმ ქვედა კოლონტიტულის სწორი ქცევა გვერდზე მცირე რაოდენობის ინფორმაციის შემთხვევაში და დიდი მომხმარებლის ეკრანზე იქნება შემდეგი:
ამის განსახორციელებლად, თქვენ უნდა გაატაროთ მთელი რიგი მანიპულაციები ჩვენი განლაგების კოდით. უფრო მეტიც, ჩვენ შევიტანთ ცვლილებებს არა მხოლოდ CSS სტილის Style.css, არამედ Index.html– ში, რომელიც შეიცავს Html კოდს და ქმნის Div ბლოკებს. ჯერ პირველი.
მაგალითად, ჩვენ გამოვიყენებთ სამი სვეტის საიტის განლაგებას, რომელიც ადრე შევქმენით. ამ შემთხვევაში, Index.html ასე გამოიყურება:
შემდეგი CSS თვისებები მითითებულია Style.css ფაილში:
კორპუსი, html (მინდორი: 0px; შევსება: 0px;) # მაკეტი (სიგანე: 800px; მინდორი: 0 ავტომატი;) # სათაური (ფონის ფერი: # C0C000;) # მარცხენა (ფონის ფერი: # 00C0C0; სიგანე: 200px ; float: მარცხენა;) # მარჯვნივ (სიგანე: 200px; ფონის ფერი: # FFFF00; float: მარჯვნივ;) # შინაარსი (ფონის ფერი: # 8080FF; ზღვარი მარცხნივ: 202px; ზღვარი მარჯვნივ: 202px;) # ფეხსაცმელი (ფონის ფერი: # FFC0FF; გასაგები: ორივე;)
თავად განლაგება ასე გამოიყურებოდა:
როგორც ხედავთ, ქვედა კოლონტიტული ბოლოში არ არის დაჭერილი და, შესაბამისად, არ აკმაყოფილებს ჩვენს მოთხოვნებს (ის ყოველთვის მდებარეობს ყველაზე დაბალი სვეტის ქვეშ), ამიტომ კოდის კორექტირება მოგიწევთ. იგივე შეიძლება გაკეთდეს ორი სვეტისა და რეზინის მოდელებისთვისაც. მეთოდი უნივერსალურია.
როგორ მივმართოთ ქვედა კოლონტიტულის ვებ – გვერდის განლაგების ბოლოში
ამიტომ, div კონტეინერი ქვედა კოლონტიტულით უნდა გადავიტანოთ ეკრანის ქვედა ნაწილში. ამისათვის თქვენ ჯერ უნდა დააყენოთ მთლიანი გვერდის სიმაღლე ასი პროცენტით (ის მთელ ეკრანს დაიკავებს). ეს საჭირო იქნება იმისათვის, რომ შემდეგ შეცვალოთ ძირითადი ბლოკი განლაგებით 100% -მდეც.
საიტის გვერდის მთლიანი შინაარსი მოთავსებულია გახსნისა და დახურვის Body tags- ში და ამიტომ ჩვენ გვჭირდება კიდევ ერთი CSS თვისება დავამატოთ Body tag- ში Style.css, რომელიც ადგენს 100% სიმაღლეს:
კორპუსი, html (მინდორი: 0px; შევსება: 0px; სიმაღლე: 100%;)
ეს არანაირად არ იმოქმედებს გარეგნობაზე, მაგრამ ახლა მთავარი ბლოგი შეიძლება გადაჭიმული იყოს ეკრანის მთელ სიმაღლეზე. იმ ეს იყო ერთგვარი მოსამზადებელი ეტაპი.
CSS ძირითადი თვისებები, თუ გსურთ, შეგიძლიათ ნახოთ. მოდით დავაყენოთ div კონტეინერი, რომელიც შეიცავს ჩვენს მთლიან განლაგებას, მინიმალური სიმაღლე 100% -ით:
ასევე მინდა ხაზი გავუსვა მას (div id \u003d "maket"). ამისათვის მე მივცემ მას საზღვარს შესაბამისი Border () თვისების გამოყენებით:
საზღვარი: მყარი 3px შავი თვისება ადგენს კონტეინერს მყარი 3px შავი საზღვრისკენ. ეს საშუალებას მოგცემთ ვიზუალურად დაინახოთ, რომ განლაგებული კონტეინერი გადაჭიმულია ეკრანის მთელ სიმაღლეზე, თუნდაც გვერდზე მოცემული მცირე რაოდენობით ინფორმაცია:
ახლა ჩვენ უნდა გადავიტანოთ ქვედა კოლოფის საერთო კონტეინერიდან და მოვათავსოთ ქვემოთ, ჩვეულებრივი მასალის შემდეგ. რას მისცემს? და ის ფაქტი, რომ, საბოლოოდ, ღირსეულად დაეცემა ქვედა კოლონტიტულ განლაგებას და არ შეაჩერებს თავის გრძელ სვეტს. ამ შემთხვევაში, Index.html ასე გამოიყურება:
გთხოვთ გაითვალისწინოთ, რომ ქვედა კოლონტიტულის ბლოკი აღარ არის განთავსებული ზოგადი კონტეინერის (maket) შიგნით და, შესაბამისად, მის სიგანეს აღარ აკონტროლებს Style.css ფაილის მაკეტში მითითებული CSS თვისებები. ქვედა კოლონტიტულის სიგანე გაჭიმულია მთლიანი ეკრანის შესავსებად, მაგრამ მაინც ის განთავსებული იქნება ეკრანის ქვედა ნაწილში, მთავარი ბლოკის ქვემოთ:
მაგრამ ისევ წარმოიშვა პრობლემა, რადგან ქვედა კოლონტიტულის სანახავად ახლა თქვენ უნდა გადაახვიოთ ეკრანი ბრაუზერში (გადაადგილების ზოლი შეგიძლიათ ნახოთ ზემოთ სურათზე).
გამოდის, რომ მთავარ კონტეინერს (მაკეტი) ეკრანის მთლიანი ზომა აქვს (ეს განისაზღვრება მინიმალური სიმაღლით: 100% თვისება) და ქვედა კოლოფი მდებარეობს მის პირდაპირ და მის სანახავად გადაადგილების გამოყენება მოგიწევთ, რაც არც ისე მოსახერხებელი და ფუნქციურია. ...
ამ პრობლემის გადაჭრა არის კონტეინერის ქვედა ნაწილის უარყოფითი მინდვრის დანიშვნა ქვედა კოლონტიტულით ისე, რომ იგი გადაადგილდება ზემოთ მისი სიგრძის ტოლი მანძილით. ამ შემთხვევაში, ქვედა კოლოფის კონტეინერი გადაეცემა მთავარს და მოთავსდება ბრაუზერის ეკრანის სიმაღლეზე (ანუ, მის სანახავად საჭირო არ იქნება გადახვევის გამოყენება).
იმისათვის, რომ ზემოდან დააყენოთ უარყოფითი ზღვარი, თქვენ უნდა იცოდეთ ქვედა კოლონტიტულის ეს სიმაღლე, მაგრამ ჯერ არ ვიცით ეს.
ამიტომ, ჩვენ ქვედა კოლოფის შემცველი კონტეინერი სიმაღლეზე დავაყენეთ Style.css– ში შესაბამისი თვისების დაყენებით:
# ფეხსაცმელი (ფონის ფერი: # FFC0FF; ნათელი: ორივე; სიმაღლე: 50 პიქსელი;)
შემდეგ დააყენეთ უარყოფითი ზედა ზღვარი მის სიმაღლეზე ტოლ სიმაღლეზე:
ეს საშუალებას მოგცემთ ქვედა კოლონტიტულს ზუსტად ასწიოს საკუთარი სიმაღლე და ასე მოთავსდეს ბრაუზერის ეკრანზე (ახლა ჩვენ შეგვიძლია ამოვიღოთ საზღვარი: მყარი 3px შავი CSS თვისება maket წესიდან ისე, რომ საზღვრის სისქე ხელს არ შეუშლის ჩვენს მთელ განლაგებას და ქვედა კოლონტიტული ეკრანის სიმაღლეში მოთავსებას). :
როგორც ხედავთ, ახლა ბრაუზერში გადახვევის ზოლი არ ჩანს და ჩვენი მთელი სამი სვეტის განლაგება ბლოკის განლაგების საფუძველზე ერთ ეკრანში ჯდება (გვერდზე ინფორმაციის მცირე რაოდენობის შემთხვევაში) და ქვედა ბოლოში მდებარეობს ქვედა კოლონტიტული. რისი გაკეთებაც ჩვენ, ფაქტობრივად, გვჭირდებოდა.
ჩადეთ spacer და ვებრძვით Internet Explorer- ს
მაგრამ პრობლემაა, რომელიც გამოჩნდება მხოლოდ მაშინ, როდესაც განლაგების გვერდზე მეტი ინფორმაციაა და შეიძლება აღმოჩნდეს შემდეგი სიტუაცია:
აღმოჩნდება, რომ სიტუაცია შეიძლება შეიქმნას, როდესაც განლაგების ერთ-ერთ სვეტში ინფორმაცია გადავა ქვედა კოლონტიტულზე, რომელიც არ გამოიყურება ლამაზად. ეს ხდება იმის გამო, რომ ჩვენთვის ცნობილი ნეგატიური ბალიშები შევქმენით და რომელიც დაგვეხმარა ჩვენი სარდაფის ასვლაში განლაგების მთავარ კონტეინერთან შეჯახების შედეგად.
იმ გამოდის, რომ ეკრანის ქვედა ნაწილში ორი ბლოკია, რომლებიც ერთმანეთს გადაფარავს სარდაფის არეალში.
ამ პრობლემის გადაჭრა არის ახალი ცარიელი Div კონტეინერის დამატება (ე.წ. დაშორებები) ჩვენი განლაგების მთავარ კონტეინერში (maket), იმ ადგილას, სადაც ადრე ქვედა კოლოფი იყო განთავსებული.
ამ ახალი კონტეინერის სიმაღლის სარდაფის სიმაღლეზე დაყენებით, ჩვენ შეგვიძლია თავიდან ავიცილოთ ინფორმაციის შეჯახება ძირითადი კონტეინერიდან ქვედა კოლოფის ბლოკთან. მოდით მივცეთ ამ კონტეინერს ID () სახელად Rasporka და შედეგად, ჩვენი სამ სვეტის განლაგების Index.html ასე გამოიყურება:
და Style.css- ში ამისათვის ჩვენ დავწერთ (, რომელიც ადგენს ამ spacer კონტეინერის სიმაღლეს ტოლია ქვედა კოლოფის სიმაღლის:
# რასპორკა (სიმაღლე: 50 პიქსელი;)
შედეგად, ქვედა კოლონტიტული ქვემოდან არ იქნება დაჭერილი მთავარ კონტეინერში მოცემული ინფორმაციისთვის (მაგალითად, ტექსტი ყველაზე მაღალ სვეტში), არამედ ქვედა სიგრძის ტოლის არეზე, რომელიც არ შეიცავს რაიმე ინფორმაციას.
ამ გზით ჩვენ ვერიდებით შეჯახებებსა და დამახინჯებებს სამსვეტიანი განლაგებისას. ყველაფერი ნათელი და ლამაზი იქნება (დეკორატიული და კეთილშობილი):
როგორც ზემოთ უკვე აღვნიშნე, ქვედა კოლონტიტულის სიგანე ჩვენთვის ცალკე უნდა განისაზღვროს, რადგან ეს კონტეინერი აღარ არის ძირითადი ნაწილის ნაწილი. ამისათვის თქვენ უნდა დაამატოთ Footer- ის დამატებითი თვისებები CSS ფაილში, რაც საშუალებას მოგცემთ დააყენოთ მისი სიგანე და ჰორიზონტალურად გაასწოროთ ეკრანის შუა ნაწილში.
ლოგიკურია, რომ სიგანე დაყენდეს მთლიანი განლაგების სიგანეზე Width თვისების გამოყენებით, და ჰორიზონტალური გასწორება შეიძლება გაკეთდეს ისევე, როგორც ეს გავაკეთეთ ბლოკის განლაგების მთელ განლაგებაზე.
ამრიგად, ჩვენ უნდა დავამატოთ დამატებითი თვისებები ID Footer- ისთვის:
# ფეხსაცმელი (ფონის ფერი: # FFC0FF; გასუფთავება: ორივე; სიმაღლე: 20px; ზღვარი-ზევით: -20 px; სიგანე: 800px; ზღვარი მარცხნივ: ავტომატი; ზღვარი მარჯვნივ: ავტო;)
სიგანის გამოყენება: 800px თვისება ადგენს სიგანეს 800 პიქსელს, ხოლო ორი თვისების გამოყენებით margin-left: auto და margin-right: auto ადგენს ავსებას ავტომატურად ქვედა კოლოფის მარცხნივ და მარჯვნივ, რის შედეგადაც ეს paddings ტოლი იქნება და ჩვენი გმირი გასწორდება შუა:
ისე, როგორც ჩანს, გასაუმჯობესებელი მეტი არაფერია, მაგრამ ის იქ არ იყო. როგორც ყოველთვის, ჩვენს საყვარელ ბრაუზერს Internet Explorer 6 არ ესმის CSS თვისებების ჩვენ მიერ გამოყენებული რამ. ამ ბრაუზერში (და, ალბათ, ზოგიერთ ძველშიც), მიუხედავად ჩვენი ძალისხმევისა, ქვედა კოლონტიტული არ იქნება დაჭერილი ქვედა ნაწილში, მაგრამ მაინც ეწებება საიტის განლაგების უმაღლეს სვეტს.
ეს ყველაფერი განპირობებულია იმით, რომ (არ ესმის მინი-სიმაღლე: 100% თვისება, რომლის საშუალებითაც ძირითადი ყუთის მინიმალური სიმაღლე უნდა დავაყენოთ ეკრანის სიმაღლის ტოლი).
ამიტომ, ამ პრობლემის მოსაგვარებლად, ჩვენ უნდა გამოვიყენოთ ე.წ. ჰაკი, რომელიც საშუალებას მოგვცემს ავუხსნათ (თითებზე) ძველი ბრაუზერები რა უნდა გააკეთონ. CSS თვისებების ჩამონათვალის დაწყებამდე, თქვენ უნდა ჩასვათ შემდეგი კომბინაცია:
* html #maket (სიმაღლე: 100%;)
ეს წესი გამოიყენება მხოლოდ Internet Explorer 6 ბრაუზერისთვის, სხვები მას არ გაითვალისწინებენ და არ შეასრულებენ მას.
ასე რომ, Style.css- ის საბოლოო სახე ეკრანის ქვედა ნაწილში ქვედა კოლონტიტულით დაჭერილი ასეთი იქნება:
კორპუსი, html (მინდორი: 0px; შევსება: 0px; სიმაღლე: 100%;) * html # მაკეტი (სიმაღლე: 100%;) # მაკეტი (სიგანე: 800px; მინდორი: 0 ავტომატი; მინიმალური სიმაღლე: 100%;) # სათაური (ფონის ფერი: # C0C000;) # მარცხენა (ფონის ფერი: # 00C0C0; სიგანე: 200 პიქსელი; ათწილადი მარცხნივ;) # მარჯვნივ (სიგანე: 200 პიქსელი; ფონის ფერი: # FFFF00; ათწილადი: მარჯვნივ;) # შინაარსი (ფონის ფერი: # 8080FF; ზღვარი მარცხნივ: 202px; ზღვარი მარჯვნივ: 202px;) # ფეხსაცმელი (ფონის ფერი: # FFC0FF; გასუფთავება: ორივე; სიმაღლე: 50px; ზღვარი-ზემო: -50 px; სიგანე: 800px; margin-left: auto; margin-right: auto;) #rasporka (სიმაღლე: 50px;)
Index.html- ის საბოლოო ხედი ნაჩვენებია ზემოთ. ესე იგი, სტატიების ეს სერია, რომელიც ეძღვნება საიტის 2 და 3 სვეტების ფიქსირებული და სითხის განლაგების ბლოკირებას, შეიძლება ჩაითვალოს დასრულებულად.
ასევე შეგიძლიათ ნახოთ ვიდეო "Html div tag- თან მუშაობა":
Წარმატებას გისურვებ! ნახავთ მალე ბლოგის საიტის გვერდებზე
შეიძლება დაგაინტერესოთ
ბლოკის განლაგება - შექმენით ორი სვეტი, სამი სვეტი და სითხის საიტის განლაგებები 
DiV განლაგება - შექმენით ბლოკები HTML- ში ორი სვეტის განლაგებისათვის, განსაზღვრეთ მათი ზომები და დააყენეთ პოზიციონირება CSS– ში
ვინც სრულად ეცნობა საიტის გვერდებს, ამჯობინებს "ფრჩხილების" (წებოვანი, წებოვანი) სახეს გვერდის ქვედა კოლონტიტულის ქვედა ნაწილს. მაგრამ ინტერნეტში ორი პრობლემაა: შეყვანის ველები, რომლებიც არ იკლებს და ქვედა კოლონტიტულები, რომლებიც არ არის ლურსმნები (ფანჯრის ბოლოში). მაგალითად, როდესაც habrahabr.ru/settings/social– ის მსგავსი მოკლე სიგრძის გვერდებს ვხსნით, მაშინვე გასაოცარია, რომ ხედვის პორტის ბოლოში განთავსებული ინფორმაცია ეყრდნობა შინაარსს და სადღაც შუა, ან თუნდაც ფანჯრის თავშია. როდესაც ქვემოთ ის ცარიელია.
ასე რომ, იმის ნაცვლად.
ეს სახელმძღვანელო ახალბედა დიზაინერებისათვის გაჩვენებთ თუ როგორ უნდა გააკეთოთ "ფრჩხილი" ქვედა კოლონტიტული 45 – ე წუთზე, შეასწოროთ თუნდაც ისეთი პატივცემული პუბლიკაციის ხარვეზები, როგორიცაა Habr, და კონკურენცია გაუწიოთ მას, როგორც თქვენი პერსპექტიული პროექტის შესრულება.
მოდით გავეცნოთ ქსელიდან ამოღებული ერთი სახის ფრჩხილის ქვედა კოლონტიტულის განხორციელებას და შევეცადოთ გავარკვიოთ რა ხდება. css-tricks.com/snippets/css/sticky-footer
CSS:
* (მინდორი: 0; padding: 0;) html, body, #wrap (სიმაღლე: 100%;) body\u003e #wrap (სიმაღლე: ავტომატიზაცია; მინიმალური სიმაღლე: 100%;) # ძირითადი (padding-bottom: 150px;) ) / * უნდა იყოს იგივე სიმაღლე, როგორც ქვედა კოლონტიტული * / # ფეხბურთი (პოზიცია: ფარდობითი; ზღვარი ზემოდან: -150 პიქსელი; / * ქვედა კოლონტიტულის სიმაღლის უარყოფითი მნიშვნელობა * / სიმაღლე: 150 პიქსელი; გასაგები: ორივე;) / * FIXAR FIX * / .sixarfix: შემდეგ (შინაარსი: "."; ჩვენება: ბლოკი; სიმაღლე: 0; წმინდა: ორივე; ხილვადობა: დამალული;) .clearfix (ჩვენება: inline-block;) / * იმალება IE-mac \\ * / * html .sixarfix (სიმაღლე: 1%;) .clearfix (ჩვენება: ბლოკი;) / * დასრულება დამალვა IE-mac * - დან
HTML:
დავიწყოთ თეორიით
ფრჩხილების ქვედა კოლონტიტულის ჩვეულებრივი განხორციელება ეყრდნობა CSS2 უნიკალურ თვისებას, რომ ელემენტები უშუალო შთამომავლები არიან სხეული - შეინარჩუნეთ პროცენტული სიმაღლე ( სიმაღლე: 100% ან სხვა) ფანჯარასთან შედარებით, თუ მათი ყველა მშობელს აქვს ერთი და იგივე პროცენტული სიმაღლე ტეგიდან დაწყებული Html... ადრე დოქტიპების გარეშე, ახლა კი Quirks რეჟიმში, ელემენტების პროცენტული სიმაღლე მხარდაჭერილია ნებისმიერ დონეზე, ხოლო თანამედროვე დოქტიპებში - მხოლოდ პროცენტულად განსაზღვრულ ელემენტებში. ამიტომ, თუ შინაარსის ბლოკს ვაკეთებთ (მოდით ვუწოდოთ მას # განლაგება), რომელსაც აქვს 100% სიმაღლე, ის ისე გადახვევს, თითქოს ფანჯარა იყოს. (სტრიმინგის) მთელი შინაარსი მასშია განთავსებული, გარდა ქვედა კოლონტიტულისა და შესაძლოა სათაურის.ქვედა კოლონტიტულზე განთავსებულია ამ ბლოკის გვერდით და მოცემულია 0 პიქსელის სიმაღლე. ზოგადად, შეგიძლიათ დაიცვას # განლაგება განათავსეთ იმდენი ბლოკი, რამდენიც გსურთ, მაგრამ ყველა მათგანი უნდა იყოს სიმაღლის 0 პიქსელიდან ან დოკუმენტის ნაკადის გარეთ (არა პოზიცია: სტატიკური) და კიდევ ერთი მნიშვნელოვანი ხრიკი, რომელიც ჩვეულებრივ გამოიყენება. არ არის საჭირო სიმაღლის ტოლი 0. შეგიძლიათ გააკეთოთ სიმაღლე ფიქსირებული, მაგრამ გამოაკლოთ ის ძირითადი ბლოკიდან ქონების გამოყენებით ზღვარი-ქვედა: - (სიმაღლე);.
ადამიანური თვალსაზრისით, სტილები ქმნის ცარიელ "ჯიბეს" ქვედა ნაწილში, რომელშიც ჩასმულია ქვედა კოლონტიტული და ის ყოველთვის აღმოჩნდება ფანჯრის ქვედა საზღვარზე ან დოკუმენტის ქვედა საზღვარზე, თუ დოკუმენტის სიმაღლე უფრო მაღალია, ვიდრე ფანჯრის სიმაღლეზე. ინტერნეტში და Habré- ზე, ქვედა კოლონტიტულის მრავალი განხორციელებაა, წარმატებული წარმატებით, ყველა ბრაუზერში. მოდით, გავაგრძელოთ მისი მშენებლობა საკუთარ თავზე, გამოიყენეთ ჰაბრის განლაგება, როგორც "სამუშაო ძე".
ბლოკის ბოლოდან # განლაგება - ეს არის ჯიბე, ქვედა კოლონტიტულისთვის ის უნდა იყოს ცარიელი და არ აჩვენებს გვერდის ობიექტებს. აქ ჩვენ კიდევ ერთი შეზღუდვა გვხვდება - ცარიელი ჯიბის გაკეთება არ შეგვიძლია ამის ხარჯზე შევსება საათზე # განლაგება, რადგან მაშინ ის 100% -ზე მეტი გახდება. არ დაზოგავს და ზღვარი - სიცარიელის გაკეთება საჭიროა ჩასმული ელემენტების თვისებების გამო. ყველაფრის გარდა, აუცილებელია იმის უზრუნველყოფა, რომ მცურავი ელემენტები არ ჯდებოდეს ბლოკის საზღვარზე, რაც კეთდება, მაგალითად, ბლოკის მიერ
მოდით გავეცნოთ ჩვენი ექსპერიმენტული გვერდების სტრუქტურას. ამის გაკეთება უმარტივესი არის Firebug ფანჯრის ან მსგავსი ფანჯრის ("შემქმნელის ინსტრუმენტები" (Ctrl-F12)) გახსნა Chrome- ში.
გადავიდეთ სამუშაო მაგალითზე
რასაც ჩვენ ვხედავთ განლაგების ნაკლოვანებები ფრჩხილების ქვედა კოლონტიტულის ეფექტის განხორციელების თვალსაზრისით? ჩვენ ამას ვხედავთ1) ქვედა კოლონტიტული საიტზე არის ბლოკი id \u003d განლაგებით, რომელსაც არ აქვს პროცენტული სიმაღლე. თეორიულად, მან, მშობლებმა და შინაარსის მარცხენა ბლოკმა უნდა დააყენონ 100% სიმაღლეზე. ამ უკანასკნელს პრობლემები აქვს - ეს არ არის შესაფერისი. შესაბამისად, ერთი შრეების ბლოკი არ არის დაკარგული ან ქვედა კოლონტიტული არასწორ დონეზეა. გარდა ამისა,
2) ქვედა კოლონტიტულის სიმაღლე ცვალებადია (დამოკიდებულია სიაში მოცემული ელემენტების რაოდენობაზე და შრიფტის ზომაზე, ეს ჩანს არა HTML– დან, არამედ CSS– დან). და
3) დასრულდა # განლაგება არსებობს რეკლამის განყოფილება, რომლის ფიქსირებული სიმაღლეა 90 პიქსელი;
4) ქვედა კოლონტიტონში ან (ზოგადად საუბრისას) ყუთში არ არის გასწორების ყუთები # განლაგება (დიახ, მაგრამ ბლოკის ზემოთ .გააქტიურებული_პოსტები; ამასთან, ალბათ იგი უნდა მიეკუთვნოს ქვედა კოლონტიტულს).
წერტილი 4 - თქვენ უნდა დახაზოთ სკრიპტით.
მესამე ეტაპის გარკვევა მარტივად გამოიყურება # layout- ის დამატება (margin-top: -90px;) მაგრამ გახსოვდეთ, რომ ეს ბლოკი შეიძლება არ არსებობდეს - იგი ჩახშობილია ბანერის საჭრელით, ან რეკლამის განმთავსებლები მოულოდნელად გადაწყვეტენ არ აჩვენონ იგი. საიტზე უამრავი გვერდია, სადაც ეს არ არის. ამიტომ დამოკიდებულება ზღვარი-ზედა რეკლამის განყოფილებიდან ცუდი იდეაა. ბევრად უკეთესია მისი შიგნით განთავსება # განლაგება - მაშინ ის არაფერში ჩაერევა.
პირველი პუნქტი ისაა, რომ ფრჩხილების ქვედა კოლონტიტულის მუშაობისთვის საჭიროა ქვედა კოლოფის ქვეშ მოთავსება # განლაგება... ამასთან, ჯავასკრიპტის დახმარებით შეგიძლიათ განახორციელოთ ფრჩხილის ქვედა კოლონტიტულის სხვა სქემები, მაგრამ ნებისმიერ შემთხვევაში გჭირდებათ JS ან თავდაპირველი სწორი განლაგება ამის გარეშე.
ვინაიდან ჩვენ არ შეგვიძლია ვიყოთ უფრო ძლიერი ვიდრე საიტის ბოლო დიზაინერი, ვინც "ჩასვა" ქვედა კოლონტიტულის შინაარსის შიგნით, ჩვენ გადავდებთ ქვედა კოლონტიტულის სწორად განთავსების იდეას ჩვენს მომავალ საიტზე (რაც, შესაბამისად, "უფრო მაგარი" იქნება Habr!) და გაასწორეთ Habr Javascript– ით (მომხმარებლის სკრიპტი) აცხადებს. (მოდით, ახლავე ვთქვათ, რომ ეს არ არის განლაგების დიზაინერის ან გადართვის დამნაშავე, მაგრამ რა თქმა უნდა, საიტის ტიპი განსაზღვრავს პროექტის მენეჯმენტის სტრატეგიულ გადაწყვეტილებას.) ამ გზით ჩვენ ვერ მივაღწევთ იდეალურს, რადგან ჩატვირთვის პროცესში პირველ ან მეორე წამში გვერდი არასწორი განლაგებით იქნება. მაგრამ ჩვენთვის მნიშვნელოვანია კონცეფცია და IT სამყაროს ყველაზე პოპულარულ საიტზე გადალახვის შესაძლებლობა.
ამიტომ, სკრიპტის საჭირო ადგილას (ადრე, გვერდის დატვირთვის ბოლოს), ჩვენ დავწერთ DOM რეკლამისა და ქვედა კოლოფის ბლოკების გადატანას საჭირო ადგილებში. (მოდით მოვემზადოთ იმისთვის, რომ მომხმარებლის სკრიპტების გამო, გამოსავალი უფრო რთული იქნება, ვიდრე სუფთა.)
var dQ \u003d ფუნქცია (q) (დაბრუნების document.querySelector (q);) // სტენოგრამისთვის var topL \u003d dQ ("# topline"), lay \u003d dQ ("# layout"), foot \u003d dQ ("# footer") ) if (topL && lay) // ბანერი - შინაარსის ბლოკის შიგნით lay.insertBefore (topL, lay.firstChild); if (lay && foot && lay.nextSibling) // ქვედა კოლონტიტულის შეფუთვა lay.parentNode.insertBefore (ქვედა კოლონტიტული, lay.nextSibling);
ბლოკები მათ ადგილებზე მოვათავსეთ - ახლა რჩება ელემენტებისთვის საჭირო თვისებების მინიჭება. ქვედა კოლონტიტულის სიმაღლე ზუსტად უნდა განისაზღვროს, უბრალოდ იმიტომ, რომ ეს უკვე ვიცით მომხმარებლის სკრიპტის მოქმედების მომენტამდე (გვერდის ჩატვირთვის ბოლოს). როგორც ზემოთ აღვნიშნეთ, მომხმარებლის სკრიპტის ტრიგერის წერტილის გამო, გარდაუვალია გვერდზე ქვედა კოლონტიტულის ჩვენება. შეგიძლიათ სცადოთ "კარგი სახის" გაკეთება, მაგრამ "ცუდი თამაშით"? Რისთვის? საიტის "ცუდი თამაში" საშუალებას გაძლევთ გააკეთოთ კონცეფცია სუპერ ძალისხმევის გარეშე, რაც საკმარისი იქნება ხარისხის შესაფასებლად და საჭირო არ იქნება, თუ თქვენს პროექტზე "სწორად ითამაშებთ".
if (ფეხი) (// block aligner
აქ მივცეთ უფლება თვითონ დაწერილი ფუნქციის გამოყენებას თ .apnd_elრაც იგივე რამ გააკეთა რაც jQuery– ში -
$("") .css ((სიმაღლე: footH || 0)). appendTo ($ (ქვედა კოლონტიტული))
შემდეგ არის კიდევ ერთი ტიპიური CSS წესების ინექციის ფუნქცია - h.addRules... აქ თქვენ ამის გაკეთება არ შეგიძლიათ, რადგან თქვენ უნდა გამოაცხადოთ წესი " ! მნიშვნელოვანი"- მხოლოდ მომხმარებლის პრიორიტეტების თავისებურებების გამო მომხმარებლის სკრიპტიდან.
ამ კოდების საშუალებით, ჩვენ შეგვიძლია დავათვალიეროთ ფრჩხილის ქვედა კოლონტიტულის მომხმარებლის სკრიპტში (მას შემდეგ გადმოვხტეთ) და კარგად გვესმოდეს, თუ როგორ უნდა ავაშენოთ გვერდის განლაგება. იმედგაცრუებაა ყოველდღიურად მოფუსფუსე დიზაინის გამოყენება, ამიტომ რეკომენდებულია ამის გაკეთება მხოლოდ დემონსტრირებისა და ტესტირებისთვის. HabrAjax მომხმარებლის სკრიპტში დავაინსტალირე მსგავსი სკრიპტი, დავხურე იგი "underFooter" - ის პარამეტრით (მონიშნეთ ველში პარამეტრების ჩამონათვალში "ქვედა ქვედა კოლონტიტულზე"), დაწყებული 0.883_2012-09-12 ვერსიიდან.
გავლენას ახდენს ლურსმანი ქვედა კოლონტიტული ZenComment სტილის განახლების საჭიროებაზე? Დიახ, ეს ასეა. სტილის პრიორიტეტების რთული ჯაჭვის გამო, რომელშიც მომხმარებლის სკრიპტის მიერ ჩასმულ სტილებს ყველაზე დაბალი პრიორიტეტი აქვთ, მე მომიწია ოდნავ მოერგო მომხმარებლის სტილები შესაძლებლობები მუშაობა ფრჩხილის ქვედა კოლონტიტულით. თუ არ განაახლეთ გამოყენების სტილები (2.66_2012-09-12 მდე +), ქვედა კოლონტიტული ზუსტად არ იმუშავებს.
ბლოკი შემობრუნდა_პოსტი (წარსულის სამი პოპულარული პოსტი) ქვედა ლოგინში უფრო ლოგიკურად გამოიყურება, ასე რომ, რეალურ სკრიპტში ის ასევე გადადის ქვედა კოლონტიტულში.
მეორე პუნქტი (განლაგების არასრულყოფილებათა სიიდან) არის მსჯელობა მხოლოდ ჰაბრისთვის (ისინი არ ვრცელდება მომხმარებლის სკრიპტზე და ნაწილობრივ იმეორებენ წინა).
გვერდებს აქვთ პრობლემა, ხელს უშლის მათ სუფთა CSS– ში ფრჩხილების ქვედა კოლონტიტულის გაზიარებას - განუსაზღვრელი ქვედა კოლონტიტულის სიმაღლე, რაც დამოკიდებულია ბრაუზერის სტანდარტულ შრიფტის ზომებზე. ქვედა კოლონტიტულში CSS– ში ჩასატარებლად უნდა აირჩიოთ შრიფტების ფარდობითი სიმაღლე, მაგრამ შესაძლოა ისინი არ იმუშაონ, თუ მომხმარებლის კომპიუტერში არ არის მოცემული შრიფტები. ამიტომ, გამოსავალი უნდა შეიცავდეს JavaScript- ს, რომელიც შეიძლება შეესაბამებოდეს ქვედა კოლონტიტულის მიახლოებით მდებარეობას ზუსტად ერთზე გადასვლებით. ან, სხვადასხვა პლატფორმებზე მომხმარებლის სკრიპტში გაკეთებული ხსნარის მისაღები საკითხის გადახედვისას, გააკეთეთ ფრჩხილების ქვედა კოლონტიტულის გაანგარიშებული ინსტალაცია - პირველი დაკვირვების შედეგად ჩანს, რომ გამოსავალი პრაქტიკულია.
დასკვნა: შესაძლებელია განლაგების სრულად მოწყობა Habré- ზე, მაგრამ ამისათვის გჭირდებათ განლაგების დიზაინერი, რომელიც ნათლად აცნობიერებს განლაგების ქცევას და ბლოკებს ათავსებს სწორი თანმიმდევრობით. (ახლა ქვედა კოლონტიტული და ზედა ბანერი არ არის "იქ" და არა ისე, რომ მხოლოდ სტილი მიიღოთ ფრჩხილის ქვედა კოლონტიტული.) JS– ს გარეშე შეგიძლიათ გააკეთოთ, თუ ქვედა კოლონტიტულის სიმაღლეს დააყენებთ ფარდობით ერთეულებში, შრიფტის გაურკვევლობის გარკვეულ ზღვარს მიიღებთ.
განხორციელება
თუ ჩართავთ HabrAjax 0.883+ - ს, ჩვენ ვხედავთ "ფრჩხილის ქვედა კოლონტიტულს". იგი ადაპტირდება სიმაღლეზე სკრიპტების გამოყენებით. ეს საშუალებას გაძლევთ შეაფასოთ რამდენად უკეთ გამოიყურება გვერდები, რომლებიც ფრჩხილების ქვედა კოლონტიტულს აქვს, ჩვეულებრივთან შედარებით. ZenComment– ის უახლესი სტილები თავსებადია სკრიპტებთან, მაგრამ იმისთვის, რომ ფრჩხილების ქვედა კოლონტიტული სწორად იმუშაოს, მათთან უნდა დააინსტალიროთ ZenComment 2.66_2012-09-12 + ვერსია.განხორციელების ქცევის ფაქტები
შამანიზმი ქვედა კოლონით, სტილითა და სკრიპტებით არის შამანიზმი (მხოლოდ ამას მხარს უჭერს თეორია). ქცევა ოდნავ განსხვავებულია სხვადასხვა ბრაუზერში, მაგრამ ზოგან მოულოდნელია. მომხმარებლის სკრიპტების და დაბლოკვის გადაწყობის გარეშე, შედეგები განსხვავებული იქნება. ეს მისცა მომხმარებლის სკრიპტში განხორციელების ექსპერიმენტებმა.1) Firefox - ქვედა კოლონტიტული ნახტომის მოულოდნელი ნაკლებობა. უცნაურია, რომ ისინი იქ არ არიან - გაწევა ხდება ქვედა კოლონტიტულის ქვედა ნაწილში განთავსების შემდეგ.
2) ქრომი - მან გამაკვირვა "მოხეტიალე გადახვევით" - ბოლოში ცარიელი ადგილები ემატება გვერდს წამში ერთხელ - სიმაღლეების გაანგარიშებით რაღაც არასწორი ხდება. იგი განიხილება html, body (სიმაღლე: 100%) დაწერას userstyle- ში, მაგრამ გარანტიების გარეშე, რომ ის ყოველთვის იმუშავებს. უფრო უსაფრთხოა შეამოწმოთ, დოკუმენტი არ აღემატება თუ არა ფანჯრის სიმაღლეს, და თუ არა, მაშინ გადაადგილეთ ქვედა კოლონტიტული, წინააღმდეგ შემთხვევაში არაფერი. ნახტომით - ყველაფერი რიგზეა, ასეა.
3) ოპერა - არ არის გადახტომა (v. 12.02) პირველი გვერდის დატვირთვისას, მაგრამ ნაჩქარევმა გადატვირთვამ შეიძლება აჩვენოს ქვედა კოლონტიტული გადასვლა. წინააღმდეგ შემთხვევაში, ის არანაკლებ სწორად მიდის ვიდრე Fx.
თქვენ სპეციალურად უნდა ასწავლოთ Chrome- ს სწორად ქცევა (სკრიპტით) და ამ ფორმით გამოაქვეყნოთ ვერსია განსახილველად. ამიტომ, საიტის მომხმარებლის სკრიპტში ცოტა უფრო რთულია, ვიდრე სტატიაში მოცემულია.
უნდა გავიხსენოთ, რომ ეს არ არის სრულფასოვანი განხორციელება - იგი არ ითვალისწინებს, მაგალითად, მომხმარებლის მიერ ფანჯრის ზომის შეცვლის შემთხვევებს. თქვენ ასევე შეგიძლიათ იხილოთ ქვედა კოეფიციენტის სიმაღლის შეცვლის იშვიათი (პრაქტიკაში) კომბინაციები გადაადგილებამდე და მის შემდეგ, სადაც ლოგიკა დაიწყებს გაუმართაობას, უხერხულობის გარეშე. უარყოფითი მხარეები შეგნებულად დატოვეს, რადგან შეიმჩნევა გადახედვის სირთულის ბალანსი და ამოხსნის დროულობა.
შედეგად, ეს აღმოჩნდა საკმაოდ სამუშაო სქემა, ყოველ შემთხვევაში სწრაფი სტაციონარული კომპიუტერებისთვის. ქვედა კოლონტიტულის არასწორი ქცევის აღმოჩენის შემთხვევაში, "underFooter" პარამეტრი უნდა გამორთული იყოს.
რომელი გვერდებისათვის არის ეს სასარგებლო?
სტანდარტულ საიტზე, მომხმარებლის სტილის გარეშე, Q&A მოკლე გვერდებიც კი აღემატება 1500 პიქსელს, რაც უმეტეს შემთხვევაში უხილავია ჰორიზონტალური მონიტორებით. ჩვეულებრივი მონიტორების შემთხვევაშიც კი ხშირად გვხვდება მომხმარებლების პირადი გვერდები, რომელთა სიმაღლე დაახლოებით 1300 პიქსელია, სადაც გაუტეხელი ქვედა კოლონტიტული იხილავს მთელი თავისი დიდებულებით. მომხმარებლის პარამეტრებში არცერთი გვერდი არ არის ძალიან გრძელი.თუ იყენებთ ZenComment მომხმარებლის სტილებს, ისინი მნიშვნელოვნად ამცირებენ საჭირო გვერდის სიმაღლეს და შესაძლოა HabrAjax მომხმარებლის სკრიპტმა არ აჩვენოს გვერდითი ზოლის ზოგიერთი ან ყველა გვერდითი ზოლი. ამიტომ, სკრიპტებთან და სტილებთან ერთად, უფრო ხშირად შეინიშნება დაუდგენელი ქვედა კოლონტიტულის ეფექტი. ამიტომ, ლოგიკურია, რომ ქვედა კოლონტიტულის fix პირველად გამოჩნდა HabrAjax– ში. ჩვეულებრივ საიტსაც კი აქვს რამდენიმე გვერდი, სადაც სასარგებლო იქნება ფრჩხილის ქვედა კოლონტიტული.
იქნება მხარდაჭერა?
ბოლო ერთი წლის განმავლობაში საიტის ქცევამ აჩვენა, რომ დეველოპერებმა (და შესაბამისად მენეჯმენტმა) დაიწყეს იმ ფუნქციების განხორციელება, რომლებიც ადრე მხოლოდ მომხმარებლის სკრიპტებსა და მომხმარებლის სტილებში არსებობდა. მაგალითად, წლის დასაწყისში დავწერე, სადაც ბევრი პატარა სურვილი შევაგროვე. ექვსი თვის შემდეგ, მე დავუბრუნდი მას და კმაყოფილებით აღვნიშნე (პირდაპირ ტექსტში; თქვენ ხედავთ "UPD" და თარიღებს), რომ სურვილებში აღწერილი რამდენიმე ფუნქცია უკვე განხორციელდა საიტზე.
შემდეგ, კომენტარების შეფასების ველების ნაცვლად, მოდით გადავხედოთ "ისრებს". ისინი 3 თვის წინ გამოჩნდნენ მომხმარებლების ალმალექსაში ("დამამუშავებელი") და ZenComment– ში გადაიყვანეს 2 წლის წინ. დაახლოებით 2-3 თვის წინ ისინი გამოჩნდნენ საიტზე. იწყებს იმის დაჯერება, რომ რამდენიმე ხნის შემდეგ ისრები გარკვეულ მანძილს გავრცელდება, როგორც ეს ხდება ZenComment- ში (რიცხვის მარცხნივ ერთი ისარი, მეორე მარჯვნივ), რათა ნაკლები გამოტოვოთ.
ამიტომ, ალბათ, "ფრჩხილების ქვედა კოლონტიტული" ჰაბრეს შესახებ ისეთი ფანტაზია არ არის, როგორც ეს შეიძლება ჩანდეს დაახლოებით 3 წლის წინ.
გააცნო HabrAjax დამწერლობის სხვა მახასიათებლებიბოლო 3 თვის განმავლობაში (შეგიძლიათ გამორთოთ პარამეტრებში):
* შეყვანის ველების ავტორებს (ოპერაში შეიძლება შეანელონ დიდ ტექსტებს);
* კვირის დღეები თარიღებისთვის, გარდა "დღეს" და "გუშინ";
* მოვლენები არხში, დასაკეცი 1 ხაზით და 2 სიმბოლოთი;
* სიტყვების "habr *" შემცირება "χ ·" და "χα";
* თარიღების მითითებები სტატიების ნომრების მიხედვით - მოცემულია URL– ში მითითებული ნომრის მიხედვით, რომელი თვის და წლის იყო სტატია ჩატვირთვამდე;
* ჩაიკეტა "დაკავშირებული შეტყობინებები" 2 სიტყვად. "მსგავსი პოსტების" ამომხტარი ფანჯრის ეკრანის ანაბეჭდი (აჩვენებს 12 ბმულს, და არა 4).
HTML5 წარმოგიდგენთ რამდენიმე ახალ ტეგს კოდის სტრუქტურისთვის: