Kājene parasti ir tīmekļa lapas izkārtojuma apakšējā daļa. Visbiežāk šīs kājenes pozicionēšanas grūtības ir panākt, lai tā vienmēr būtu novietota loga apakšā, neatkarīgi no lapas pilnības vai pārlūkprogrammas veida. Kopš masveida pārejas uz bloku izkārtojumu laikā ir bijuši diezgan daudz problēmas risinājumu, un viens no tiem ir norādīts zemāk.
Tas ir nepieciešams
Pamatzināšanas par CSS un HTML
Instrukcijas
1. solis
Par pamatu ņemsim visizplatītāko lapas izkārtojuma shēmu - trīs bloki, kas izvietoti viens virs otra. Augšdaļai (galvenei) vienmēr jābūt izlīdzinātai ar loga augšējo malu, apakšai (kājenei) - ar apakšējo malu, un galvenajai (virsbūvei) vienmēr jāaizpilda visa atstarpe starp tām. Avota kodā jābūt saitei uz XHTML 1.0 pārejas specifikāciju, un stilu apraksts jāievieto ārējā CSS failā (lai izvairītos no problēmām ar Opera 9. XX). Struktūras HTML aprakstam jābūt galvenajam lapas pamatteksts. Tas, protams, sāksies no augšējā bloka, kura tagā jānovieto identifikatora atribūts ar vērtību, piemēram, divHead:
Galvenes bloks.
Galvenajam blokam jāsastāv no pāris ligzdotu bloku. Ārējam tiks piešķirts divOut identifikators, bet iekšējam - divContent:
Galvenais saturs.
Kājene ir iestatīta uz divFoot:
Lapas kājene.
2. solis
Pilnam lapas HTML kodam jāizskatās šādi:
Trīs bloki
@import "style.css";
Tas ir galvenes bloks.
Galvenais saturs.
Šī ir lapas kājene.
3. solis
Stila aprakstā tiek ieviests šāds izkārtojuma mehānisms: vidējais bloks (divOut) ir iestatīts uz 100% augstumu, augšējam blokam (divHead) būs absolūta pozicionēšana, bet apakšējam - relatīvs. Galvenajā satura blokā (divContent) augšpusē jābūt brīvai vietai, kas vienāda ar virsraksta bloka augstumu, lai tā nepārklājas ar lapas galveno saturu. Apakšējā bloka (kājenes) augšpusē jābūt negatīvai rezervei, kas vienāda ar šī bloka augstumu. Tas to pacels virs pārlūkprogrammas loga apakšējās robežas. Šo mehānismu var ieviest, izmantojot css failu ar šādu saturu: * {margin: 0; polsterējums: 0}
html, body {height: 100%;} body {
amats: radinieks;
krāsa: # 000;
}
#divOut {
starpība: 0;
min-augstums: 100%;
fons: #FFF;
krāsa: # 000;
}
* html #divOut {augstums: 100%;}
#divHead {
pozīcija: absolūta;
pa kreisi: 0;
augšdaļa: 0;
platums: 100%;
augstums: 80px;
fons: # 2F5000;
pārplūde: slēpta;
text-align: center;
krāsa: #FFF;
} #divFoot {
amats: radinieks;
skaidrs: abi;
margin-top: -60px;
augstums: 60px;
platums: 100%;
fona krāsa: # 2F5000;
text-align: center;
krāsa: #FFF;
}
.divContent {
platums: 100%;
pludiņš: pa kreisi;
polsterējums - 81 pikseļi;
} HTML kodā stila lapai norādītais nosaukums ir style.css.