Aš mūsų praktikos projekte numatome standartinį stulpelinį išdėstymą. Tačiau kol pateiksiu šį projektą tikroviškai ir įspūdingai, noriu jums konkretiškai parodyti, kaip galite patys įgyvendinti stulpelinį išdėstymą. Čia bus nagrinėjami dviejų ir trijų stulpelių išdėstymai, nes jie ir toliau sudaro daugumą interneto puslapių.
Internetiniame dizaine absoliutus klasikas, aišku, turi būti dviejų stulpelių išdėstymas. Kairėje puslapio dalyje paprastai rodoma navigacija, tuo tarpu dešinėje stulpelyje matomas faktinis turinys. Su tinklaraščiais tai siejasi šiek tiek kitaip. Iš tiesų, daugelyje tinklaraščių dešinėje yra rodoma navigacija arba reklama, tuo tarpu kairėje būna pateikiamas faktinis turinys.
Tokius taikymus CSS lyginant su kitais galima įgyvendinti gana paprastai. Iš tikrųjų, dviejų stulpelių išdėstymai yra paprasčiausias išdėstymo būdas.
Toliau pateiksiu pavyzdį su dviejų stulpelių išdėstymu, kuriame naudojami absoliutūs procentiniai dydžiai.
Čia yra pilnas pavyzdys:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Išdėstymas su absoliučia padėtimi</div>
<div id="nav">Navigacija</div>
<div id="main">Tai yra turinio sritis</div>
<div id="footer">Čia rodomi autorių teisių pranešimai.</div>
</body>
</html>Ir taip atrodo visa tai naršyklėje:
Be abejo, galite lengvai perslinkti kairįjį stulpelį į dešinę. Pakeiskite šias instrukcijas:
• #nav esantis left: 0 pakeiskite į right: 0.
• #main tiesiog pakeiskite margin-left į margin-right.
Išsaugojus pakeitimus, turėsite pamatyti norimą rezultatą.
Panaudotas šaltinio kodas, remiantis absoliučiosios padėties išdėstymu, tačiau turi vieną trūkumą: jei kairiojo stulpelio turinys tampa didesnis, jis išeina už apatinį puslapio rėmelį.
Tai tiesiogiai susiję su tuo, kad absoliučiai padėtiems elementams vietos "nenuima". Šį problemą galima išspręsti įdėjus reikiamų turinio įtraukimų į pagrindinę sritį, kurie būtų ilgesni nei kairės stulpelio dalies turinys.
Tokį išdėstymo būdą turėtumėte naudoti tik tada, kai esate tikri, kad pagrindinė sritis iš tikrųjų yra aukštesnė nei kairė (ar dešinė) stulpelis.
Dviejų stulpelių išdėstymas su plūduriuojančiomis savybėmis
Buvusioje pavyzdyje kilęs problemėlis su sutampančia apačia išsprendžiamas naudojant float savybę. Keistos sintaksės pavyzdys būtų toks:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Išdėstymas su absoliučia padėtimi</div>
<div id="nav">Navigacijos sritys</div>
<div id="main">Tai yra turinio sritis</div>
<div id="footer">Čia rodomi autorių teisių pranešimai.</div>
</body>
</html>Abu stulpeliai čia yra su float savybe. Taigi, nuo šiol stulpeliai yra vienas šalia kito.
Kairiajam stulpeliui priskiriama 20 procentų pločio. Ypač svarbu atkreipti dėmesį, kad bet kuri savybė, pagrįsta float, visuomet turi turėti pločio nustatymą.
Faktinis turinio plotis yra 80 procentų. Tai taip pat nustatyta su float: left. Dėl to ši sritis rodoma šalia kairiojo stulpelio.
Kadangi apačios dalis būtų visada po stulpeliais – kitaip tariant, po šoninių stulpelių – išlaikyti, naudojama ši sintaksė:
#footer {
clear: both;
}Dreijų stulpelių išdėstymas su plūduriuojančiomis savybėmis
Iš tikrųjų, trijų stulpelių išdėstymas internetinėje dizaino srityje yra populiari alternatyva. Tipiškas išdėstymo pavyzdys atrodytų taip:
• Kairysis stulpelis turi navigaciją.
• Centrinėje srityje yra faktinis turinys.
• Dešinėje yra papildoma informacija ar reklama.
Toliau rasite pavyzdį, kai sukuriamas lankstus trijų stulpelių išdėstymas. Sintaksė – ko jūs greitai pastebėsite – yra panaši į ankstesnio dviejų stulpelių išdėstymo. Tačiau šįkart su right yra papildomas div plotas, kuris iš tikrųjų atstovauja dešinei langų sričiai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Maketas su absoliučia padėtimi</div>
<div id="nav">Navigacijos plotas</div>
<div id="main">Tai yra turinio plotas</div>
<div id="right">Tai dešininė lentelė</div>
<div id="footer">Čia yra autorių teisių informacija.</div>
</body>
</html>
Naujam plotui priskirta 20 proc. plotis. Taigi, padalinimas atrodo taip:
• Kairysis ir dešinysis stulpeliai užima po 20 proc. prieinamo reklamos plotą.
• Vidurinis stulpelis turi 60 proc. pločio.
Rodomas right plotas iš tikrųjų yra dešinėje.
Sintaksė šiuo klausimu yra lanksti. Galbūt galėtumėte pri(si)taikyti main plotą šitokių:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Čia float buvo nustatytas kaip right. Dėl to right plotas juda į kairę.
Šiame vadove matėte, kaip lengva pagrindinius išdėstymus apibrėžti remiantis naudojimu float. Šis žinios dabar sudaro pagrindą tinklapiui kurti. Sekančiose vadovėse tinklapis bus kuriamas žingsnis po žingsnio, pradedant nuo pagrindo.
