Sen sen atpakaļ, kad vēl reti kurš uzdrošinājās runāt par CSS izkārtojumiem mājas lapās, Dave Shea izveidoja CSS iespēju prezentēšanas lapu CSS Zen Garden. Tā teikt, lai rādītu labo piemēru un pārliecinātu izstrādātājus, ka CSS ir nākamais solis interneta attīstībā. Nu jau dažu gadu laikā tur ir sakrājušies vairāki simti dažādu izskatu vienam un tam pašam XHTML dokumentam. Diemžēl tā arī neesmu dzirdējis, ka kāds no Latvijas būtu papūlējies un ieguldījis tur savu artavu, palielījies, ka arī šajā stūrī cilvēki prot izmantot CSS piedāvātās iespējas. Nolēmu izmēģināt savus spēkus.

Ja no sākuma likās, ka sarežģītākais būs salikt uzzīmēto dizainu jau esošajā XHTML struktūrā, tad pašas lapas veidošanas procesā izrādījās pilnīgi pretēji - man kā programmētājam lielākas problēmas sagādāja daudz maz smuka un pārdomāta dizaina izveide.

Tēma

Pie tēmas izvēles īpaši nekavējos, parakājos pa savu digitālo foto arhīvu un atradu šādas tādas bildes, kuras varētu izmantot. Lai radītu kaut kādas asociācijas ar dārzu, izmantoju bildes no savas kolekcijas:

  • Lielā augšējā bilde ar ezi - fotografēta kaut kad pagājušajā vasarā. Nabaga ezi kāds nelietis bija iespundējis piecstāvu mājas bēniņos bez ēdamā, dzeramā. Drošības nolūkos izvedām viņu ārpus pilsētas uz savu dārzu. Tad nu cik nu veikli spēju, tvēru mirkli, lai uztaisītu mazu foto sesiju.
  • Bilde ar pieneni un biti - fotografēta tajā pašā reizē, kad dārzā ciemojās ezis.
  • Bilde ar taureni - fotografēta 2003. gada vasarā Tatros.
  • Bilde ar nepierasta izskata dāliju - fotografēta pie Igates pils šajā vasarā.

Izskats zīmēts ar Adobe Photoshop 7.

CSS pozicionēšana

Tie, kas kaut ko saprot no XHTML + CSS lietām, laikam nevar vien sagaidīt kaut ko par šo tēmu.

Iesākumā likās, ka būs baisi sarežģīti, ka kaut ko nevarēs novietot tur, kur vajadzēs, ka būs problēmas ar nelīdzeniem fontiem (Windows pārlūkprogrammām nav font anti-aliasing funkcionalitātes). Tās visas izrādījās vienkārši bailes no nezināmā. Tie elementi, kurus vajag pārvietot kaut kur citur, tiek pozicionēti absolūti, izmantojot iespēju norādīt tikai vienu no koordinātām - augšējo un norādot attiecīgi labo vai kreiso margin. Tādā veidā ir iespējams gan sadalīt tekstu no diviem paragrāfiem uz divām dažādām vietām, gan pārvietot izvēlni uz augšu, vai uz leju. Izmantojot tikai relatīvo pozicionēšanu, diez vai būtu iespējams panākt tādu izskatu.

Lai izvairītos no nelīdzeniem burtiem, CSS Zen Garden XHTML dokuments ir īpaši sagatavots. Ja parasti mēs virsrakstus apzīmējam ar:

<h1>Virsraksts</h1>

Tad viņu dokumentā ir:

<h1><span>Virsraksts</span></h1>

<span> elements ir pievienots tāpēc, lai izmantotu samērā vienkāršu triku, kā nomainīt virsraksta tekstu pret attēlu:

h1 {
  background-image: url(images/h1background.jpg);
  background-repeat:no-repeat;
  width: 200px;
  height: 24px;
}
h1 span{
  display:none;
}

Tas, kas tiek izdarīts, ir virsraksta elementam tiek uzlikta fona bilde, virsraksts tiek izstiepts vajadzīgajā platumā un augstumā, lai redzētu visu fona bildi, noņemam fona atkārtošanos. Pēc tam vienkārši noslēpjam h1 iekšpusē esošā span elementa saturu ar display:none

Būtībā tas arī bija viss - nekā sarežģīta - daudz reizes tiek izmantots iepriekš pieminētais triks ar teksta aizvietošanu pret bildi, tiek ieliktas vairākas fona bildes, sarakstiem pievienotas nelielas bildītes, sarakstīti stili saitēm un citām pierastām lietām, nocentrēts galvenais elements, kurā atrodas viss saturs un mūsu dizains ir gatavs.

Pilnīgi iespējams, ka dizaina vienkāršības dēļ tas netiks iekļauts oficiālo CSS Zen Garden dizainu sarakstā, taču tas arī nebija šī pasākuma mērķis. Galvenais ir parādīt, ka es arī VARU izveidot samērā glītu un prasībām atbilstošu CSS dokumentu.

Ja jau sāku rakstīt par CSS izkārtojumiem, tad, manuprāt, ir dažas pamatlietas, kuras būtu jāievēro liekot kopā CSS izkārtojumus:

  • Nedrīkst aizrauties ar border-left, border-right lietošanu. Zinot, ka IE vecākas versijas vēljoprojām tiek izmantotas un tur ir problēmas ar tā saukto box modeli, visur, kur vien ir vajadzīgas kaut kādas šauras sānu līnijas, es labprātāk izmantoju fona bildes (Faux Columns: A List Apart). Pretējā gadījumā var rasties jūtamas problēmas ar fiksēta platuma izkārtojumiem - viens pārlūks platumu sarēķinās vienā veidā, cits savādāk. Patiesībā, no pēdējiem CSS izkārtojumiem nevienā es neesmu lietojis labās vai kreisās malas atribūtus.
  • Tieši to pašu box modeļa problēmu dēļ ir jābūt arī uzmanīgiem ar padding un width lietošanu kopā. Būtībā tas ir tas pats iepriekšējais punkts, taču šim ir diezgan labs risinājums - elementiem, kuriem jūs norādat platumu, jūs neizmantojat padding atribūtu. Elementiem, kuriem jūs nenorādāt platumu, varat izmantot ko vien vēlaties. Ja kādam elementam ar noteiktu platumu ir nepieciešams uzlikt padding atribūtu, tad ir vērts padomāt, vai tam elementam, kas atrodas iekšpusē nav ērtāk uzlikt margin atribūtu.
  • Ja jums nav problēmu ar box modeli, tad laikam nekādām citām problēmām arī nevajadzētu būt, protams, ir arī sarakstu noformēšana un visādas citas ar CSS saistītas interesantas lietas, taču tām visām ir pietiekoši labas pamācības internetā (ListTutorial, FloatTutorial, Clearing Floats: The FnE Method, u.c.).

Ja iesākumā CSS izkārtojumus veidoju vairāk ar piespiešanos, tad tagad ir tā, ka es nevaru iedomāties, kam būtu jānotiek, lai es izvēlētos izmantot tabulas izkārtojuma veidošanai.

Nobeigumā vēl neliela reklāma - CSS tika rakstīts izmantojot pašmāju programmētāja Kārļa Blumentāla lielisko HTML redaktoru HTMLPad 2004 Pro. Lai arī kādus HTML, XHTML, CSS un citus redaktorus es nebūtu izmēģinājis, šis windows videi manā skatījumā ir viennozīmīgi labākais produkts.

Tad nu pagaidām, kamēr manu darbu vēl izvērtē publicēšanai CSS Zen Garden lapā, varat to apskatīt tepat pie manis: CSS Zen Garden: Hedgehog.