როგორ გავაკეთოთ გვერდის ქვედა კოლონტიტული ნაწილი ("ქვედა კოლონტიტული") ფანჯრის ქვედა საზღვარზე - ეს ალბათ ყველაზე გავრცელებული პრობლემაა საიტის გვერდების განლაგებაში. რა თქმა უნდა, არსებობს გადაწყვეტილებები და რამდენიმე მათგანი არსებობს. ქვემოთ მოცემულია ერთ-ერთი გზა, რომ დარწმუნდეთ, რომ ქვედა კოლონტიტული ყოველთვის არის დაჭერილი გვერდის ბოლოში, მიუხედავად შინაარსის ოდენობისა და ბრაუზერის ტიპისა.
Ეს აუცილებელია
საბაზისო ცოდნა CSS და HTML
ინსტრუქციები
Ნაბიჯი 1
მაგალითისთვის ავიღოთ ერთ – ერთი ყველაზე ტიპური პაგინაციის სქემა - მას ექნება სხვენი (სათაური), მთავარი ბლოკი და ქვედა კოლოფი. რა თქმა უნდა, საჭიროების შემთხვევაში, თქვენ შეგიძლიათ განათავსოთ რამდენიმე სვეტი მთავარ ბლოკში, მაგრამ ჩვენ ამას აქ არ გავაკეთებთ, ჩვენ მხოლოდ ფოკუსირება გავაკეთებთ ქვედა პოზიციის განთავსებაზე. გვერდის HTML კოდი დაიწყება სპეციფიკაციის დეკლარაციით:
თეგებს შორის და, გვერდის სათაურის გარდა, ჩვენ დავადგენთ კოდირების მითითებას: აგრეთვე ბმულს გარე CSS ფაილზე, რომელიც შეიცავს სტილის აღწერას: @import "styles.css"; ჩვენ არ მოვათავსებთ სტილის აღწერა პირდაპირ გვერდზე html- კოდში, რათა თავიდან აიცილოთ გართულებები მეცხრე ვერსიის Opera ბრაუზერში. თეგებს შორის მოათავსეთ გვერდის ბლოკის სტრუქტურა. პირველი, რა თქმა უნდა, სათაურის ბლოკია. ჩვენ მივცემთ მას სათაურის იდენტიფიკატორს, რომ შეძლოს ამ კონკრეტული ბლოკის სტილის დაყენება:
ეს სათაური ყოველთვის არის ფანჯრის ზედა ნაწილში.
შემდეგ - გვერდის მთავარი ბლოკი. იგი შედგება ორი წყობილი - გარე (იდენტიფიკატორი - გარე) და შიდა (იდენტიფიკატორი - გარეთა გადაფარვა):
ეს არის ძირითადი ნაწილი.
დაბოლოს, ქვედა კოლონტიტული:
ეს ქვედა კოლონტიტულია - ყოველთვის ფანჯრის ბოლოში!
სრული გვერდი ასე გამოიყურება:
როგორ დააჭირეთ ქვედა კოლონტიტულს
@ იმპორტი "styles.css";
ეს სათაური ყოველთვის არის ფანჯრის ზედა ნაწილში.
ეს არის ძირითადი ნაწილი.
ეს ქვედა კოლონტიტულია - ყოველთვის ფანჯრის ბოლოში!
ნაბიჯი 2
ახლა გადავიდეთ სტილის ფურცლის შინაარსზე. იგი ახორციელებს შემდეგ სქემას: მთავარი გვერდის ბლოკი შეიქმნება 100% სიმაღლეზე, სათაური აბსოლუტურად განლაგდება და ქვედა კოლონტიტული იქნება შედარებით. სათაურის გვერდის ძირითადი შინაარსის გადაფარვის თავიდან ასაცილებლად, ეს მთავარი შინაარსი მოთავსებულია დამატებით ველში მთავარი ყუთის შიგნით, ხოლო ამ დამატებით ველში მითითებულია ზედა ზღვარი ტოლი სათაურის ყუთის სიმაღლისა. ქვედა კოლონტიტულს ენიჭება უარყოფითი ზედა ზღვარი, რომლის ტოლია მისი სიმაღლე - ამ გზით იგი აიწევს ფანჯრის ქვედა კიდეზე მთელ სიმაღლეზე. Css ფაილის სრული შინაარსი: * {ზღვარი: 0; შევსება: 0}
html, body {სიმაღლე: 100%;} სხეული {
ფერი შავი;
პოზიცია: ნათესავი;
}
# შუადღე {
მინ-სიმაღლე: 100%;
ზღვარი: 0;
ფონი: თეთრი;
ფერი შავი;
} * html #outer {სიმაღლე: 100%;}
# სათაური {
პოზიცია: აბსოლუტური;
ზედა: 0;
მარცხენა: 0;
სიგანე: 100%;
სიმაღლე: 70px;
ფონი: # 304a00;
გადავსება: დამალული;
ფერი: თეთრი;
ტექსტის გასწორება: ცენტრი;
} # ფეხბურთი {
პოზიცია: ნათესავი;
ზღვარი-ზემო: -50 პიქსელი;
გასაგებია: ორივე;
სიგანე: 100%;
სიმაღლე: 50px;
ფონის ფერი: # 304a00;
ფერი: თეთრი;
ტექსტის გასწორება: ცენტრი;
}
.გამორევა {
ათწილადი: მარცხენა;
სიგანე: 100%;
padding-top: 71px;
} ეს ფაილი უნდა იყოს შენახული იმ სახელით, რომელიც ჩვენ მივუთითეთ გვერდის html- კოდში - styles.css.
