În fiecare dintre exemplele pe care le va porni de la faptul că aspectul site-ului are structura obișnuită (aspectul poate fi diferit, dar cum universal):
Împingeți subsol în partea de jos a poziționării
Descriere exemplu
- Toate blocurile de aspect au fost plasate într-un bloc de înfășurare id = „înveliș“ suplimentar. care stabilește înălțimea minimă (CSS min înălțime proprietate) de 100%, astfel încât a întins toată înălțimea ferestrei browser-ului, dar dacă este necesar, s-ar putea trage pe și de pe. Cu toate acestea, deoarece procentele sunt raportate la mamă, totul a lucrat, a trebuit să se precizeze în mod explicit înălțimea (înălțimea CSS) pentru a eticheta și .
- Următorul pas a fost poziționarea absolută (poziția CSS) în raport cu unitatea de înfășurare subsol la partea inferioară (de jos CSS) sa. Astfel, ne-am dovedit subsol fixat în partea de jos a paginii.
- Deoarece elementul de poziționare absolută trage dintr-un flux, apoi adăugarea de informații în unități de conținutul și meniul, acesta va lăsa o parte presată de subsol. Pentru a evita acest lucru, elementele id = „conținut“ și = „meniu“ id au fost stabilite padding inferior (CSS padding) egală cu înălțimea de subsol. Acum, ei vor merge sub subsol și împingeți-l în jos.
- Din moment ce avem un bloc din meniul de format este plutitoare (CSS float), subsol totuși nu va fi observat, și, în consecință, meniul nu este de gând să-l împingă în jos. un alt bloc (class = „clar“) a fost creat pentru a corecta acest lucru, care întrerupe fluxul în jurul valorii de (CSS proprietate clar). Apropo, dacă nu aveți de gând să pună în aplicare suport pentru IE6 si IE7, puteți utiliza în schimb bloc la ultimul bloc înainte de subsol (aici este „conținut“): după pseudo și doar a trebuit să facă un flux de întrerupere.
Primul paragraf a fost aplicat proprietatea CSS pentru a specifica înălțimea minimă, care nu înțelege Internet Explorer 6. Dar el înțelege proprietatea înălțimea la fel ca și înălțimea minimă. De asemenea, acest browser, în anumite cazuri, în general, ignoră! Important. Aceste două caracteristici și a fost folosit în acest exemplu pentru a crea un hack. să-l să facă ceea ce este necesar, fără a afecta alte browsere.
Împingeți subsol la partea de jos folosind blocuri suplimentare
Descriere exemplu
- Toate unitățile cu excepția aspectului de subsol au fost învelite într-un bloc id suplimentar = „înveliș“. că înălțimea minimă a fost stabilită (CSS min înălțime) de 100%. Acest lucru a fost făcut în scopul de a bloca un înveliș cel puțin întins în toată înălțimea ferestrei browserului, dar dacă este necesar (în cazul în care conținutul este o mulțime) ar putea trage pe și de pe. Acum, înălțimea împachetări noastre a devenit egală cu înălțimea ferestrei browser-ului, iar înălțimea întregului HTML-page = înălțimea + înălțimea învelișului de subsol.
- Ca urmare a acțiunilor din primul paragraf din subsol noastre, deși presate din partea de jos a paginii, dar a lăsat pentru granița de jos a ferestrei browser-ului, care nu este bun. Pentru a-l ridica în zona de vizibilitate, câmpul negativ superior (CSS margin-top) dimensiunea este egală cu înălțimea de subsol a fost stabilit pentru ea. Toate subsol fixate și partea de jos a paginii.
- Deoarece în paragraful precedent au apăsat subsol am spus domeniu negativ de sus, cu adăugarea de informații în blocuri de conținut sau un meniu, o parte din ea va merge sub subsol. Pentru a evita acest lucru, un alt bloc a fost creat cu id = „footer_correct“. înălțimea care este egală cu (poate fi chiar un pic mai mult), înălțimea subsol. Astfel, este blocul de reparații va merge sub subsol apăsat și împingeți-l în jos, prevenind ascunderea informațiilor.
- Unitate de corectare a adăugat fluxul de întrerupere (CSS clar), astfel încât să nu curgă în jurul meniului, în cazul în care este mai mare decât înălțimea conținutului. Prin urmare, în apropiere de subsol care întrerupe fluxul de fost eliminat ca inutile.
Ca și în primul exemplu, un hack special pentru IE6 a fost aplicat aici, vă permite să setați înălțimea minimă.
- Cum sa faci un site web
Însuși liber - Tutorial HTML
pentru începători - CSS Tutorial
pentru începători - Referințe
HTML si CSS - exemple
HTML si CSS - referințe
site-uri utile pentru webmasteri - unelte
Software pentru crearea de site-uri web