noTime
Balandis 10, 2007

Div’ų Dyvai

Tikėjau, kad lentelės yra pats geriausias būdas išdėstyti turinį, įdėti iliustracijas bei pateikti daug kitų vizualių elementų. Ir dabar tikiu, nors ir atėjo Div’ų era. Bėda ta, kad jeigu ūkininkui, naudojančiam tik dalgį, įteiki žoliapjovę, jis būtinai iškrės kokią kvailystę: sulaužys žoliapjovės mechanizmą, “nuskus” gėlynus ir t.t. Taip ir tarp tinklalapių kūrėjų: kažkas leptelėjo, kad lentelės yra “evil”, o Div’ai - UB3RL33T ir naujokams prisidėjo dar vienas galvos skausmas.

Funkcionalumo atžvilgiu <div> žymė yra lankstesnė: ja galima aprašyti nestandartinio išdėstymo tinklalapius, lengviau pritaikyti JavaScript (ypač su Ajax) scenarijams. Tačiau žaliems vis dar trūksta patarimo (ypač lietuviško) kaip, kur ir kada dėti tuos Div’us. Teks įsitekti į vieną straipsnį, nors vargu ar užtektų trijų romanų tomų šitam reikalui aprašyti.

Nuo ko pradėti rašyti CSS aprašą, kai naudojami Div’ai?

body { margin: 0; padding: 0 }

Taip atsikratysite papildomų overflow problemų. Tačiau jų neišvengsite, jeigu neteisingai sudėsite Div’us. Tarkim, atsiras horizontali slinkties juosta.

Div’as centre

Taip taip, align=”center”. Strict dokumento tipas tokių įmantrybių nemėgsta ir apskritai taip daryti negražu. Tai gal to ir nedarykime - Div’as labai gražiai centruojamas šitaip:

#konteineris { width: 600px; margin: 0 auto }

Div’as Div’e vardan paveiksliukų

<div> žymės sukelia labai daug išdėstymo problemų, ypač kai kalbama apie skirtingas Interneto naršykles. Tačiau pradedantieji vis tiek rizikuoja “nudegti” pirštus naudodami Div’us Div’uose tam, kad galėtų ten įgrūsti kokių nors grafinių elementų. Pavyzdžiui (aiškumo dėlei vietoje CSS naudosiu “style” atributą):

<div id="mano-antraštė" style="width: 600px">
<div style="position: relative; float: left; background: url(logotipas.gif); width: 200px; height: 50px"></div>
<div style="position: relative; float: right; background: url(email.gif); width: 100px; height: 40px"></div>
</div>

Juk baisiau ir būti negali, ar ne? Ne, vis dėlto gali. Šis pavyzdys ypatingas tuo, kad jis yra sąlyginai teisingas. Bet kas garantuos, kad naujokas neįdės šito Div’o į dar vieną Div’ą? Tai akivaizdi destrukcija: kuo daugiau Div’ų Div’uose, tuo didesnė tikimybė, kad jūsų “bokštelis nugrius”. Sprendimas gana paprastas ir logiškas - nevargti su Div’ų išdėstymu ir dydžiais:

<div id="mano-antraste">
<div style="background: url(logotipas.gif) no-repeat">
<div style="background: url(email.gif) no-repeat top right; width: 600px; height: 50px">
</div>
</div>
</div>

Logiškas mąstymas atsiranda iš gero CSS žinojimo. Naujokai, išmokite CSS!

Meniu gamyba

Toks kodas man neretai kelia šypseną:

<div id="meniu">
<div id="naujienos"><a href="http://pixel.lt/#" x mce_href="http://pixel.lt/#">Naujienos</a></div>
<div id="kontaktai"><a href="http://pixel.lt/#" x mce_href="http://pixel.lt/#">Kontaktai</a></div>
<div id="kazkas"><a href="http://pixel.lt/#" x mce_href="http://pixel.lt/#">Kažkas</a></div>
<div id="velniai-zino-kas"><a href="http://pixel.lt/#" x mce_href="http://pixel.lt/#">Velniai žino kas</a></div>
</div>

Manau dar ne visi įsisavino nenumeruoto sąrašo (unordered list) ypatumus. Galbūt per daug neišsiplėsiu, nes už mane tai jau padarė nemažai žmonių: http://css.maxdesign.com.au/listamatic/index.htm. Nėra reikalo išsišokti aukščiau jų.

Kai <div> viduje, fono nebėra

Šiek tiek aukščiau minėjau, ką daryti kai Div’o matmenys aiškūs ir fiksuoti. O ką sugalvot, jeigu tarp tų Div’ų yra mano pastraipos, paveiksliukai ir kita velniava? Garbės žodis, žinau kam reikalinga “float” ypatybė, tačiau logiškai neišmąstau kaip ji gali įtakoti Div’o foną. Na, išimčių pilna visur. Geriausias sprendimas - duoti Div’ui float: left ir problemos kaip nebūta.

Atsargiai - sluoksniai!

Kadaise teko naudoti position: absolute ir labai nusvilau: virš prisijungimo formos bei kitokio turinio reikėjo įdėti nežmoniško dydžio permatomą PNG paveikslėlį, ir aš linksmai prilipinau absoliutinį Div’ą su aukštesne z-index reikšme. Matmenys buvo tokie - 100% × 400px. Forma neveikė, turinio pažymėti neišėjo. Kaip ir lentelės, <div> yra didelė, didelė siena, net jeigu ji ir permatoma. Kvaila klaida, bet padariniai nekokie.

Naršyklių mėsmalė

Kuriant tinklalapius su Div’ais galima susidurti su netikėčiausiais naršyklių nesuderinamumais. Visų kalčiausia teisėtai lieka Internet Explorer naršyklė, nes jos vizualinis mechanizmas net 7-oje versijoje neatitinka visų W3C standartų, o 5/6-oje versijose dar prisideda eilė klaidų (PNG palaikymas, dvigubos paraštės klaida ir t.t.). Jei susidūrėte su tam tikrais sunkumais, kurių panaikinti niekaip nepavyksta, paieškos užklausa “ie workaround” tikrai padės surasti atsakymą.

Panašūs straipsniai


“Div’ų Dyvai” komentarų: 10

  1. pypt

    Vietoje IE workaround’ų daug greičiau ir paprasčiau pasirašyti IE hack’ų CSS’ą. See http://www.quirksmode.org/css/condcom.html

  2. noTime

    Workaroundas ir hackas yra vienas ir tas pats. Nejaugi iš karto pradėjai gaminti savo IE apėjimus? Aš ne.

  3. ~Karolis

    Aš tai pradedu CSS taip:
    *{margin:0;padding:0}

    Taip nuimamas overflow nuo visų elementų, įskaitant ir HTML.

  4. noTime

    Ne visur to reikia. :)

  5. Sergej Kurakin

    Perskaičiau straipsni 2 kartus, ir taip nesupratau, kam jis parašitas. Kažkoks keistas visiems žinomų faktų konstatavimas.

    Beja, noTime, man kažkaip neveikia Jūsų tinklapis, vis meta į parkavimo zoną.

  6. noTime

    Kad nelabai kas tų faktų paiso. Bandžiau daryti išvadas kodėl, ir taip gimė šitas rant’as (nervus dėjau į konservus).
    Tinklapis tikrai veikia.

  7. noTime

    Ech, buvau užmiršęs pasikeisti profilį. Dabar viskas tvarkoje.

  8. pypt

    Hack’as - visokie š, kai bandoma priversti vieną CSS’ą normaliai veikti visose naršyklėse. Workaround’as - atskiras CSS’as nedraugiškam browser’iui.

  9. noTime

    Praktiškai vienintelė nedraugiška naršyklė yra IE. Teisingai išsireiškei, kad hack’as yra š. Su juo labai lengvai gali nusižengti CSS taisyklėms, nors jis atlieka tą patį veiksmą kaip ir workaround’as. Pastarojo pliusas - kitos naršyklės neįkrauna papildomo IE css’o. Ar verta dar ginčytis dėl terminų? Jeigu pageidauji, tai galiu pasakyti, kad abu žodžiai išreiškia būdą apeiti programos veikimo principus. ;)

  10. eSito

    Aš nauojakas, tad norėčiau pakalust kas yra apskritai Div’as? ir ko jis skiresi nuo spav ar kaip jis ten?

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.