Vesen með border og dálka í CSS
Ég er að reyna að setja einfaldan ramma utan um síðuna en þetta er ekki alveg að ganga upp. Málið er að þó að div tagið sé utan um alla dálkana þrjá þá virðist ramminn bara miðast við miðjudálkinn og það kemur afskaplega kjánalega út þegar færslurnar eru stuttar, ramminn virkar rétt á forsíðunni enda er miðdálkurinn mun stærri en hinir þar. Ef div tagið væri hins vegar bara utan um miðdálkinn væru hliðarnar líka væntanlega bara utan um hann, ekki ytri dálkana.
Í .css skránni er svona klausa .blog {padding:15px;border:1px solid#000;}
Í template fyrir stakar færslur er uppstillingin í grófum dráttum svona:
Á myndinni fyrir neðan sést hvernig þetta kemur út, þarna er ég búinn að gera ramman rauðan til að hann sjáist betur, ramminn á að vera utan um alla síðuna. Blasir nokkuð við hvað ég er að gera vitlaust?
<body>
<div class="blog">
<div id="centercontent">
Dagbókarfærslan, miðjudálkurinn
</div>
<div id="leftcontent">
Er reyndar hægra megin
</div>
<div id="categories">
vinstri dálkurinn
</div>
</div>
</body>
23:00
Æi, ég nenni ekki að vesenast í þessu, tek ramman bara út og set eitthvað annað í staðin.
Már Örlygsson - 20/01/04 18:18 #
Eina "góða" leiðin til að gera þetta er að nota javascript tékk á window.onload sem les hæðina á #leftcontent (vont class-nafn, ojj skamm Matti ;-) og #categories og ber saman við hæðina á #centercontent og hækkar #centercontent ef það er ekki stærst af þessu þrennu. Ókosturinn við þetta trikk er að það reiðir sig á javascript, og ef þú ferð ekki varlega í útlitshönnuninni þá getur síðan orðið í vissum tilfellum ólæsileg (t.d. að upplýsingar í "footer" boxi hverfa undir langan hliðardálk) þegar javascriptið keyrir ekki/virkar ekki af einhverjum ástæðum. Með varkárni og smá útsjónarsemi virkar þetta samt alveg ótrúlega vel.
Aðrir verri valkostir:
Svo ef þú ert sáttur við að takmarka þig við tveggja-dálka útlit þá getur þú notað float:left|right; til að staðsetja dálkana og notast svo við einhver nett clear:both; trikk til að ýta botninum á aðalefnisdálkinum niðurfyrir hliðardálkinn...
Ef þú vilt fá þrjá dálka og vilt endilega nota float:left|right; til að staðsetja þá, þá neyðist þú til að hafa annan hvorn þeirra efst í HTML skjalinu - en það er mjög non-optimal frá aðgengisjónarmiðum, nema innihald viðkomandi dálks sé þeim mun rýrara/styttra.
...Ég vona að þetta hjálpi eitthvað.
Már Örlygsson - 20/01/04 18:21 #
p.s. #centercontent er líka slæmt class-nafn! :-) betra væri að nota nöfn á borð við #maincontent og #secondarycontent sem lýsir innihaldi/tilgangi viðkomandi greinar í DOM trénu en ekki sjónrænum eiginleikum hennar.
Matti Á. - 20/01/04 21:38 #
Takk fyrir ráðin Már.
Í fyrstu útgáfu af þessari færslu var ég einmitt með komment þar sem ég tók fram hversu slæm þessi nöfn eru en ég fjarlægði þau þar sem þau "flúttuðu ekki" í <pre> hlutanum :-)
Málið er að ég tók þetta hrátt af síðunni sem fékk þessa þriggja dálka hönnun af en hafði svo aldrei sens á að laga þetta. Það er náttúrulega agalegt að vera með #leftcontent sem nafn á dálki sem nú er hægra megin! Sem sérlegur áhugamaður um breytunöfn þarf ég að taka skurk í þessu :-)
Ég held ég haldi mig við núverandi útlit á síðunni, einfalt - létt og sæmilega læsilegt held ég.