sidebar same height as content

[gkazhus]

Ar javaskripta paliidziibu veelo lai sidebar daljas buutu vienaadaa garumaa kaa videejaa dalja maajaslapai. Ar shi skripta paliidziibu daljeeji izdevaas to paveikt tikai probleema taada ka tagad sidebar daljas ir krietni garaakas par videejo dalju un nebeidzas tur kur beidzas videejaas daljas saturs. Kaads vareetu buut risinaajums?

 

 

 

<script type="text/javascript">

// plugin

jQuery.fn.equalHeights=function() {

var maxHeight=0;

 

this.each(function(){

if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}

});

 

this.each(function(){

$(this).height(maxHeight);

if (this.offsetHeight>maxHeight) {

$(this).height((maxHeight-(this.offsetHeight-maxHeight)));

}

});

};

 

// usage

$(function() {

$('.sidebar_first, .content, .sidebar_second').equalHeights();

});

</script>

[marcis]

Tādas lietas jārisina iztaisnojot rokas un uzrakstot pareizu CSS. JS variantu principa pēc pat nemēģināšu domāt :)

[gkazhus]

Tādas lietas jārisina iztaisnojot rokas un uzrakstot pareizu CSS. JS variantu principa pēc pat nemēģināšu domāt :)

 

 

Varbuut ir kaadi ieteikumi CSS sakaraa? Jo shaadaa veidaa iisti nesanaak

 

background-image: url(./images/background_sidebar.bmp);

background-repeat:repeat-y;

background-position:top left;

width:150px;

[Maris-S]

Pamēģini pa google paskatīties kaut ko šādu:

http://www.google.lv/#hl=lv&source=hp&q=Css+equal+column+height&aq=f&aqi=g1&aql=&oq=&gs_rfai=&fp=bcddc4a5329ba1d0

 

Ja tomēr dizains ir pārāk sarežģīts un css paliek nepārskatāms, tad var veidot ar parastu tabulu. Protams pret tabulām daudzi protestēs.

[marcis]

Tabulas nav domātas layout'am :)

 

Mana kristāla bumba saka, ka tev vajag vienādus kolonu garumus tikai vizuāli, kas nozīmē, ka reālais div'u augstums var būt atšķirīgs. Es iesaku atrast kādu lapu, kurā tiek izmantots tev vēlamais efekts, un apskatīt sourci. Populārākais risinājums ir uzlikt background bildi ( http://chill.lv/images/pageContainerBg.gif'>http://chill.lv/images/pageContainerBg.gif -> http://chill.lv/ ).

[Maris-S]

Jā, es zinu ka tabula nav domāta izkārtojumam, bet nav arī aizliegta. Dažiem izkārtojumiem sanāk tik daudz css un iekļauto divu, ka tabula tomēr vienkāršāk un saprotamāk izskatās, bet nu katram sava pieeja.

[marcis]

Nu nez, nez.. Neesmu vēl redzējis tādu layout'u, kuru ar tabulu uzrakstīt ir īsāk. Man liekas, ka tas pat teorētiski nav iespējams :)

<table>
<tr>
	<td></td>
	<td></td>
</tr>
</table>

vs

<div></div>
<div></div>

Un ar katru nākamo klucīti tabulas html pieaug ģeometriskā progresijā :D

[Maris-S]

Runa iet par vienādu augstumu. Parastajos variantos patiešām ir vienkāršāk ar div, pat veidojot vienādus augstumus, es personīgi izmantoju div tik tālu kamēr noder "Faux Columns" pieeja, ja jāsāk izmantot pieejas, kas izmanto lielos paddingus un marginus (uz leju), tad labāk iztieku ar tabulām, jo html/css paliek mazliet sarežģītāks, tabulai man šķiet vieglāk tādos gadījumos izsekot līdzi. Pie tam ieraugot <table> Tu vienmēr sapratīsi kam jāseko tālāk un ko nozīmē <tr> un <td>, bet ieraugot iekļautos div, Tev jebkurā gadījumā būs jāpēta kādā veidā viņi tiek organizēti un kāds css viņiem tiek izmantots. Tas ir aktuāli ja dizainu neesi taisījis pats, vai arī taisīts ļoti sen. Protams var arī ar tabulām pacensties sataisīt tādus brīnumus, ka pats nesapratīsi, it īpaši ar iekļautajām tabulām, tā ka vienkārši jāizvēlas labākais variants konkrētajai situācijai.

[Maris-S]

Jā, starp citu, kā jārēķina, lai sarēķinātu ka kolonas pievienošana tabulai (<td></td>) palielina html ģeometriskajā progresijā, salīdzinot ar <div></div> pievienošanu?

[marcis]

Priekš tam ir firebug :) Layoutu ar tabulām taisa tie, kam līkas rokas, tāds ir mans uzskats. Kāda velna pēc tad CSS vispār attīstās? Es nesaku, ka tabulas nedrīkst vispār izmantot. Tieši pretēji, tabulu zīmēt ar div'iem arī ir slimi (ir redzēti arī tādi brīnumi). Vienkārši izmantojam to, kas konkrētajam gadījumam paredzēts - tabulārus datus attēlojam ar tabulām, layoutu zīmējam ar ne-tabulām.

 

Ok, šī tēma vienmēr ir izraisījusi auksto karu. Es pateicu, ko domāju un tieši tāpat arī tu. Pie tā arī paliekam.

[Леший]

Ja nekļūdos, tad runa ir par aritmetisko progressiju :P

Un jau 1000x aprunāts temats div vs table.

[Maris-S]

Jā, temats patiešām atrunāts diezgan bieži un plaši, bet man liekās ka runāt par līkām rokām taisot vienāda augstuma kolonas noteiktajos gadījumos ar tabulām ir pavisam nepamatoti. Drīzāk jau neredzēt ērtāko variantu konkrētajā situācijā un uz pašreizējo brīdi ir nepareizi. Protams CSS attīstās un tam vajadzētu spēt nodrošināt izkārtojuma kodēšanu, bet pagaidām viņš nav tik tālu attīstījies, nevis pats CSS nav attīstījies, bet tā atbalsts pārlūkos, savukārt tabulas ir. Pareizi vienā angļu valodas forumā viens cilvēks rakstīja: "paies kāds pus gads kamēr IE ieviesīs normālu atbalstu kādai jaunai lietai CSS un paies vēl 1-2 gadi kamēr visi uzliks IE jaunās versijas, kas atbalsta šo jauno CSS lietu". Tiem, kas tagad aizdomājās par to, ka nav jāizmanto IE, tad Jūsu domas mainīsies, kad taisīsiet kādu nopietnu projektu, nopietnam klientam, kam neinteresē ka IE ir alternatīvas.

 

Pašlaik stingra nostāja, div izmantošanai pilnīgi visur, izskatās principa pēc. Tas nekas ka jāizmanto kaudze hacku un jāpavada kaudze laika googlē, lai sataisītu tikai ar CSS, bet es tak esmu krutais koderis, es neizmantošu tabulu. Nu viss iztērēju gandrīz dienu bet mans sarežģītais dizains tagad ir tikai ar css. Paiet vēl mēnesis un atrodas bugs, tomēr kaut kādā pārlūkā līdz galam tās koloniņas nestaipās, bet es tomēr vienalga esmu krutais koderis un tērēšu vēl pus dienu, lai atrisinātu šo problēmu, bet tikai ne tabulas.

 

CSS pagaidām ir ļoti daudz lietas kas vēl pietrūkst un nevis tāpēc ka viņu nav vispār, bet tāpēc ka līdz CSS3 izmantošanai reālos projektos vēl jāgaida ļoti ilgi. Kā piemēru var minēt, multiple background, kolonas (nevis ar div vai tabulām, bet īstās kolonas), rounded corners un tml.

Edited August 12, 2010 by Maris-S

[codez]

Galvenais, ka strādā, ja bez ūber-hakiem to nevar izdarīt, izmanto tabulu un galu galā, ja kādam nepatīk, saki, ka 3 kolonnas ir tabulāri dati.

 

Piemēram šādi hacki ir diezgan liels stulbums, ja to var panākt ar dažiem tabulas tagiem, pie tam ar tabulām variants ir daudz eleastīgāks.