3ARRANO.com

azken eguneraketa: 2006/12/20

- harpidetu

Mediatekako artikuluak

(Iragarkia: Partekatu zure argazkiak doan 23rekin)

Agur betiko, clear:both

José Manuel Pantoja López < El Plan Seldon > - 2006/09/06

Interneten ordu pare batez nabigatu orduko, erraza da aurkitzea CSSrekin lan egitea erraztuko diguten zenbait trikimailu edo hack. Hori ona da, eta ona da ere, nire ustez, hariari pixka bat tira egin eta kode zati magiko hauen zergatia ulertzea.

CSS bidezko maketazioa, honela, teknika, zientzia eta arte nahasketa bat bihur daiteke.

Badago oraindik taulekin maketatzea errazagoa dela uste duenik, baina zaude ziur ez dela hain jostagarria.

Arazoa

Gure orriak CSSarekin eta elementu mugikorren (float) bidez maketatzen saiatzen garenean, lehenxeago edo geroxeago agertuko zaigu bere baitako elementuak inguratzen ez dituen eduki-elementu bat, eta hau arazo handia da, izan ere sarritan seme mugikorrak dituzten elementuek behar bezala jokatzea nahi izaten dugu: semeak erabat inguratuz.

Hau da, gure geruza gorria inguratzen duen koadro berde eder baten ordez hau ageri zaigu:

CSS kodea:

#geruza_berdea {
 border:solid #0F0;
 margin-left:10px;
}

#geruza_gorria {
 background-color:#F00;
 width:100px;
 height:100px;
 float:left;
}

Ikusi nahi genuena, aldiz, honako hau da:

CSS kodea:

#geruza_berdea {
 border:solid #0F0;
 margin-left:10px;
}

#geruza_gorria {
 background-color:#F00;
 width:100px;
 height:100px;
}

Bestalde, jokaera hau, nahiz izorragarria izan, nahikoa logikoa da. Hona hemen zergatia:

Elementu baten garaiera zehazten ez denean, hau kalkulatzeko bere semeen garaiera erabiltzen da, dagozkion marjina eta padding balioez gain. Baina float ezaugarria erabiliz elementu bat mugikor bihurtzen dugunean, benetan egiten duguna dokumentuaren fluxu arruntetik ateratzea da, ondorioz gure eduki-elementua semerik gabe, edukirik gabe, gelditzen da, eta eduki behar duen garaiera, zehaztu gabe.

Ummm, ez. Honela azalduta nik ere ez dut ulertzen.

Ea argazkitxo batzuekin...

Bloke elementua (dadoa) barnean duen eduki-elementua (CDak)

Dado berdea elementu ez-mugikor bat da, bere eduki-elementua (CDak) garaiera jakin bat mantentzera behartzen duena. Dadoaren lekuan liburu bat sartu beharko balitz, ziur CDak bananduago egongo liratekela, eta txanpon bat jarriz gertuago. Eduki-elementuaren garaiera bere edukiaren garaierara moldatzen da.

Orain, nire dado berdea elementu mugikor bihurtzen badut, oihaletik zentimetro batzuk altxatzen ari naiz, eta bananduta mantentzeko ezer ez dutelarik, CDek grabitatearen arauak betetzen dituzte. Kontuan izan elementu mugikorra ingelesez "floating element" (elementu flotatzailea) dela, eta hori adierazten da dadoa oihaletik altxatuz, flotatzen ari dela, oihaleko beste elementuen jokaera aldatuz horrela.

Elementu mugikorra (dadoa) barnean duen eduki-elementua (CDak)

Ondorengo kodearekin aurrez esana irudikatzeko adibide txiki bat sor dezakegu.

Markatzea (HTML):

<div id="eduki-elementua">
 <div id="barra">
  <p>Lorem ipsum dolor sit amet,...</p>
  <p>Nullam pretium euismod sem...</p>
  <p>Vestibulum ante ipsum primis...</p>
 </div>
 <div id="gorputza">
  <p>Lorem ipsum dolor sit amet,...</p>
  <p>Nullam pretium euismod sem...</p>
  <p>Vestibulum ante ipsum primis...</p>
 </div>
</div>

Estiloa (CSS):

body {
 font-size:100%; /*beharrezkoa IEn diseinu elastikorako*/
 text-align:center;
}

#eduki-elementua {
 border:solid 1px blue;
 text-align:left;
 margin:auto;
 width:46em;
}

#barra {
 float:left;
 width:10em;
 outline:dashed 1px red;
 margin:0.5em;
 }

#gorputza {
 margin:0.5em;
 width:33em;
 float:right;
 outline:dashed 1px green;
}

Hau garbitu gabe eta bi geruza mugikor erabiliz sorturiko maketazio sinplearen adibide on bat da.

Ez baduzu guztiz ulertu outline ezaugarriaren erabilera, irakurri beste artikulu hau.

Konponbide klasikoa

Orain artean arazo hau konpontzeko clear ezaugarria erabili izan da.

Hala, ondorengo kodea gehitzen badiogu aurretik genuenari, gure eduki-elementua haztera derrigortu dezakegu.

HTML:

<div id="eduki-elementua">
  ...
  <div class="clear"></div>
 </div>

CSS:

.clear {
 clear:both;
}

Teknika hau ez da oso dotorea, gure HTML markatzea zikintzen du edukiarekin zerikusirik ez duen elementu batekin, eta gainera elementu "huts" bat gehitzen du. Baina badabil, adibide honetan ikus dezakezuen bezala.

Behin-betiko konponbidea

Baina bada arazo guztiak konpontzen dituen irtenbide bat, Quirksmodeko artikulu honetan azaltzen den bezala.

Overflow ezaugarriak eduki-elementu baten barneko elementuek gainezka ez egitea ahalbidetzen du, eta lau balio onartzen ditu: auto, visible, scroll eta hidden.

Balio lehenetsia visible da, eduki-elementua bere semeen neurrietara egokitzeko haztera behartzen duelarik. Gainerantzeko balioek width eta height atributuen bitartez zehaztutako dimentsioak mantentzen dituzte, baina higitze-barren jokaera kontrolatzea ahalbidetzen digute: beti bistaratuz (scroll), beti ezkutatuz (hidden) edo beharrezkoa denean soilik erakutsiz (auto).

Bada kontua da, visiblek ezik, beste balio posible guztiek nabigatzaileari pentsarazten diotela dimentsio batzuk zehaztuak izan direla, eta hala ez bada... hauek kalkulatzera behartzen dutela!!

Overflow erabiliz kutxa bati gogorarazten diogu semeak dituela. Mugikorrak, baina semeak.

Hemen duzue beraz behin-betiko konponbidearen adibidea.

Arazoak Internet Explorerrekin

Ez dira oso larriak, baina bai kontuan hartzekoak.

Aurrez esandako guztiak funtzionatzen du IEn, betiere eduki-elementuari zabalera bat zehazten badiozu, ez galdetu zergatik.

Gainera, teknika honek Mac-erako IEn funtziona dezan nahi badugu, nahitanahiez overflow:hidden erabili behar dugu.

Edo hala dirudi behintzat, izan ere ezin izan dut azken hau frogatu Macintoshik ez dudalako, eta izango banu ez nuke bertan Internet Explorer instalatuko.