2 kolonnu mājaslapas izkārtojums ar CSS

16.06.2007. 17:36:21 sagatavoja Deniss Fedotovs (deni2s)

Beidzot atradu, kā var ar CSS palīdzību panākt 2 kolonnu mājaslapas izkārtojumu, kurā vienai kolonnai būtu fiksēts platums (fixed, static width) un otra platumā izplestos pa atlikušo ekrāna daļu (fluid, liquid width). Turklāt, lai fiksētā platuma kolonnas saturs kodā būtu aiz nefiksētā platuma kolonnas satura.

Cerams, ka kādam tas noderēs vēl. Pašlaik šis pats risinājums tiek izmantots web.hc.lv vortālā.

Fiksētā platuma kolonnas saturam jābūt kodā aiz nefiksētā platuma kolonnas satura, lai dažādas meklētājsistēmas lielāku svaru dotu lapas saturam, kurš atrodas nefiksētā platuma kolonnā, jo web.hc.lv fiksētā platuma kolonnās tiek ievietotas mazāk būtiskas lietas - tādas kā reklāmas un citas.

2 kolonnu izkārtojums

Sākumā esmu izveidojis 2 kolonnas, no kurām kreisās puses kolonna ir ar fiksētu platumu. Labās puses kolonnā esmu ievietojis vēl 2 kolonnas, no kurām, savukārt, labās puses kolonna ir ar fiksētu platumu. Nepieciešamības gadījumā nav grūti pārveidot kodu pēc savām vajadzībām. Kods darbojas korekti uz visām populārākajām pārlūkprogrammām.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lv" lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 column CSS layout</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
float: left;
width: 100%;
background-color:#f66
}
.content0{
margin-left: 150px;
background-color:#ff6
}
.content1{
margin-right: 150px;
background-color:#6f6
}
.column0{
float: left;
width: 150px;
margin-left: -100%;
background-color:#f66
}
.column1{
float: left;
width: 150px;
margin-left: -150px;
background-color:#6ff
}
.footer{
clear: left;
width: 100%;
background-color:#66f
}
.maincontainer{
border: 1px solid #000
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="topsection">
<h1>2 column CSS layout - header1</h1>
<p>(1st in source)</p>
</div>
<div class="wrapper">
<div class="content0">

<div class="maincontainer">
<div class="topsection">
<h2>right column floated (liquid) header2</h2>
<p>(2nd in source)</p>
</div>
<div class="wrapper">
<div class="content1">
<p>content of right column</p>
<p>(3rd in source)</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="column1">
<p>another fixed (static) width 150px right
column inside floated right column</p>
<p>(4th in source)</p>
</div>
<div class="footer">
<p>footer1 of right column</p><p>5th in source)</p>
</div>
</div>

</div>
</div>
<div class="column0">
<p>left column fixed (static) width 150px</p><p>(6th in source</p>
</div>
<div class="footer">
<p>footer2 - web.hc.lv</p>
<p>(7th in source)</p>
</div>
</div>
</body>
</html>

Testēts uz: Internet Explorer 6, 7, Opera 9, Firefox 2. Lūdzu ierakstiet komentāros, kā tas darbojas uz citiem pārlūkiem. Aplūkot kodu darbībā var te.

11 komentāri Komentēšana pieejama visiem.
deni2s komentēja 16.06.2007. 17:59:55
Komentāra reitings: 0

Es vēl ieteiktu .content0 un .content1 klasēm pievienot overflow:hidden; - ja saturs ies pāri malām (piemēram kāda lielāka bilde), tad vismaz tas, kas iet pāri tiks palsēpts, nevis līdīs virsū kam citam.

Bea (aa@ee.lv) komentēja 16.06.2007. 18:51:44 (ip:81.198.186.2)
Komentāra reitings: 0

Gribeetos gan veel lai contents buutu ar min-width, jo ja browseri minimizee, tad tas vidus - contents galiigi saiet chupaa.

andrisp komentēja 17.06.2007. 12:52:09 (ip:87.110.107.230)
Komentāra reitings: 0

"dažādas meklētājsistēmas lielāku svaru dotu lapas saturam, kurš atrodas nefiksētā platuma kolonnā"

Neesmu dzirdējis neko tādu. Varbūt vari pastāstīt sīkāk ?

hate-hour komentēja 18.06.2007. 08:24:49 (ip:217.198.234.197)
Komentāra reitings: 0

Nevis nefiksētā platuma kolonnā, bet pēc iespējas tuvāk lapas sākumam. Pierādījumus šim apgalvojumam gan neesmu manījis.

deni2s komentēja 18.06.2007. 15:26:55
Komentāra reitings: 0

"Nevis nefiksētā platuma kolonnā, bet pēc iespējas tuvāk lapas sākumam."
Šajā gadījumā nefiksētās kolonnas saturs arī ir pēc iespējas tuvāk kodā lapas sākumam. Pierādījumi tam ir daudz, piemēram te:
http://diveintoaccessibility.org/day_10_presenting_your_main_content_first.html

Uzlabojas arī lapas pieejamība (accessibility).

andrisp komentēja 18.06.2007. 23:22:04 (ip:87.110.71.239)
Komentāra reitings: 0

Bet nekas nav teikts par fiksētu vai nefiksētu platumu.

deni2s komentēja 19.06.2007. 00:07:08
Komentāra reitings: 0

Nē, fiksētam vai nefiksētam platumam nav nozīmes. Ir nozīme tikai tam, kuras kolonnas saturs HTML kodā uzrādās pirmais.

deni2s komentēja 19.06.2007. 00:09:48
Komentāra reitings: 0

Iesaku pie .content1 klases pievienot arī overflow:hidden;, savādāk ja zaļajā laukā ieliek <div>, kuram norādīts width:Xpx, un X ir mazāks par zaļā lauka platumu, tad tas <div> mēģina klāties pāri zaļajam laukam uz labo pusi.

Melnā Mamba (melnamamba@gmail.com) komentēja 21.01.2008. 10:21:56 (ip:193.178.150.187)
Komentāra reitings: 0

Laikam atradu to, kas bija vajadzīgs

dsad komentēja 27.10.2013. 16:56:31 (ip:91.105.62.175)
Komentāra reitings: 0

fsdfsdf

Nigga komentēja 27.10.2013. 16:57:01 (ip:91.105.62.175)
Komentāra reitings: 0

Man ir liela nēģera pipele!

Komentāra pievienošana

Ar * atzīmētie lauciņi ir jāaizpilda obligāti.





[ uz rakstu sarakstu ]

Reklāma
Par web.hc.lv

web.hc.lv ir vortāls, kurā tiek aplūkoti mājaslapu veidošanas un mārketinga aspekti, no idejas līdz gandarījumam.

[Valid RSS] Valid XHTML 1.0! Valid CSS!

RSS 2.0 ziņu barotne (news feed)  Twitter

reģistrēties