web.hc.lv - vortāls tīmekļa veidotājiem: Raksti http://web.hc.lv/kods/css/?rss=1/ Dažādi raksti par CSS izmantošanu mājaslapu veidošanā lv 2007-2017, web.hc.lv web.hc.lv 60 http://www.hc.lv/inc/baners/hclv_baner_small.gif web.hc.lv - vortāls tīmekļa veidotājiem http://web.hc.lv/ web.hc.lv - vortāls tīmekļa veidotājiem Tue, 26 Sep 2017 03:01:48 +0300 2 3 4 5 6 CSS atribūtu atdalītāji Kods CSS Raksti http://web.hc.lv/kods/css/raksti/css-atributu-atdalitaji/ http://web.hc.lv/kods/css/raksti/css-atributu-atdalitaji/ Mon, 01 Mar 2010 22:21:20 +0200 web.hc.lv - vortāls tīmekļa veidotājiem Kopš populārākās mājaslapas 2010.gadā pārstāj atbalstīt Internet Explorer 6 pārlūku, ir vērts paskatīties uz CSS iespējām, kuras neatbalstīja IE6, bet atbalsta jaunāki pārlūki.

Viena no CSS īpašībām ir spēja atšķirt HTML elementus balstoties uz viena no elementa atribūtiem. Apskatiet šo HTML kodu:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Šim elementam ir trīs atribūti - id, class un rel. Lai izvēlētos šo elementu iekš CSS, jūs varat izmantot ID atdalītāju (#first-title) vai klases atdalītāju (.magical). Bet vai jūs zinājāt, ka varat izvēlēties šo elementu arī pēc rel atribūta un tā vērtības? To sauc par CSS atribūtu atdalītāju:

h2[rel=friend] {
    /* woohoo! */
 }

 

Tas vēl nav viss saistībā ar atribūtu atdalītājiem, tāpēc apskatīsimies tuvāk dažādas iespējas, un mēģināsim aptvert dažus "reālās pasaules" scenārijus, kuri varētu noderēt.

Atribūtam ir konkrēta vērtība

Atribūtam ir noteikta vērtība

Piemērā augstāk h2 elementa atribūta vērtība bija "friend". CSS atdalītājs norādīja uz šo h2 elementu, jo šī elementa atribūta rel vērtība bija tieši "friend". Citiem vārdiem sakot, vienādības zīme nozīmē tieši to, ko jūs domājat, ka tā nozīmē... tiešu sakritību. Apskatīsimies citu vienkāršu piemēru:

<h1 rel="external">Atribūts ir vienāds</h1>

 

h1[rel=external] { color: red }

 

Lielisks šāds reālās pasaules piemērs ir blogu ruļļa (blogroll)stilu izveidošana. Pieņemsim, ka jums ir šāds draugu saišu saraksts:

<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

Un jūs velaties katrai saitei izvēlēties citu stilu. Tradicionāli jūs visdrīzāk piešķirtu katrai saitei savu klases nosaukumu, uz kuru norādīt, taču tas pieprasa papildus kodu, no kā vienmēr ir labāk izvairīties (semantika u.t.t.). Cits variants varētu būt :nth-child izmantošana, taču tas nozīmē, ka saišu kārtība nedrīkst mainīties. Šis ir perfekts piemērs atribūtu atdalītāju izmantošanai... saitēm jau ir unikāls atribūts, uz kuru var norādīt!

a[href=http://perishablepress.com] { color: red }

 

Es ticu, ka visbiežāk atribūtu atdalītājus var izmantot uz input elementiem. Tie ir ar tipiem - text, button, checkbox, file, hidden, image, password, radio, reset un submit (es kādu izlaidu?). Tie visi ir <input> elementi, taču tie ir ļoti atšķirīgi. Tāpēc darīt līdzīgi, kā, piemēram, input { padding: 10px } parasti nav laba doma. Daudz labāk ir darīt šādi:

input[type=text] { padding: 3px }
input[type=radio] { float: left }

 

Šis tiešām ir vienīgais veids atšķirt dažādus input elementu tipus nesačakarējot pārējos un iztiekot bez lieka papildus HTML koda.

Atribūta vērtība kaut kur satur noteiktu vērtību

Atribūts satur kaut kur noteiktu vērtību

Te sāk palikt interesantāk. Vienādības zīmei atribūtu atdalītājos priekšā var pievienot citas zīmes, kas var mainīt mazliet jēgu. Piemēram, "*=" nozīmē, ka "norādītā vērtība atrodas jebkur elementa atribūta vērtībā". Apskatieties šo piemēru:

<h1 rel="xxxexternalxxx">Atribūts satur</h1>

 

h1[rel*=external] { color: red }

 

Neaizmirstiet, ka elementa klases un ID arī ir atribūti, kas var tikt izmantoti kopā ar atribūtu atdalītājiem. Pieņemsim, jūs veidojat CSS stilu mājaslapai, kurai jūs nevarat mainīt HTML kodu, un neveiklajam kodētājam ir trīs div elementi, uz kuriem nepieciešams norādīt:

<div id="post_1"></div>
<div id="post_two"</div>
<div id="third_post"></div>

 

Jūs varat tos visus izvēlēties šādi:

div[id*=post]  { color: red }

Atribūta vērtība sākas ar noteiktu vērtību

Atribūta vērtība sākas ar noteiktu vērtību

<h1 rel="external-link yep">Atribūts sākas</h1>

 

h1[rel^=external] { color: red }

 

Reālas izmantošanas piemērs varētu būt, ja jūs vēlaties lai visas saites, kas ved uz jūsu drauga mājaslapu, būtu atšķirīgas no visām citām saitēm, neatkarīgi no tā, uz kuru lapu drauga mājaslapā tiek saitēts:

a[href^=http://perishablepress.com] { color: red }

 

Šādi tiks norādīts ne tikai uz sākumlapu, bet arī uz visām mājaslapas apakšsadaļām.

Atribūta vērtība beidzas ar noteiktu vērtību

Atribūts beidzas ar noteiktu vērtību

Mēs varam izvēlēties pēc tā, ar ko sākas atribūta vērtība, kāpēc arī ne ar to, ar ko tā beidzas?

<h1 rel="friend external">Atribūts beidzas</h1>

 

h1[rel$=external] { color: red }

 

Ja godīgi, tad šim ir grūti piemeklēt kādu praktisku piemēru, taču ir patīkami apzināties, ka tāda iespēja pastāv. Varbūt var mēģināt izveidot atsevišķu stilu saitēm, kuras beidzas ar simboliem, kuri neko nemaina:

a[href$=#], a[href$=?] { color: red }

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar atstarpēm

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar atstarpēm

Jūs taču jau zināt, ka elementam var būt vairākas klases, vai ne? Ja jūs to izmantojat, tad varat izvēlēties jebkuru klasi savā CSS ar .klases-nosaukums. Ar atribūtu sadalītājiem ir sarežģītāk. Ja jūsu rel atribūtam ir vairākas vērtības (t.i. vērtību saraksts atdalīts ar atstarpēm), jums jāizmanto "~=".

<h1 rel="friend external sandwich">Atribūti atdalīti ar atstarpi</h1>

 

h1[rel~=external] { color: red }

 

Jūs varbūt jautājat, kāpēc izmantot "~=", ja "*=" ir daudz plašāks? Jā, "*=" ir plašāks, taču tas var būt pārāk plašs. "~=" pieprasa atstarpes ap elementu, kamēr "*=" - nē. Piemēram, ja ir divi elementi, viens ar rel="home friend-link" un otrs ar rel="home friend link", tad, lai korekti izvēlētos tieši otro pēc "friend" vērtības, ir jāizmanto "~=".

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar "|"

Atribūts satur noteiktu vērtību, kas no citām ir atdalīta ar atstarpēm

Šis atdalītājs strādā līdzīgi, kā iepriekšējais atdalītājs, vienīgi atribūta vērtības tiek atdalītas ar "|", atstarpes vietā.

<h1 rel="friend-external-sandwich">Atribūti atdalīti ar |</h1>

 

h1[rel|=external] { color: red }

Vairāku atribūtu vērtību sakritība

Vairāku atribūtu vērtību sakritība

Svarīgi atzīmēt, ka varat izmantot vairākus atribūtu atdalītājus vienā atdalītājā, kas pieprasa, ka tie visi sakristu, lai sakristu pats atdalītājs.

<h1 rel="handsome" title="Important note">Vairāki atribūti</h1>

 

h1[rel=handsome][title^=Important] { color: red }

Pārlūku atbalsts

Visi šeit aprakstītie piemēri darbojas visos populārākajos mūsdienu pārlūkos: Safari, Chrome, FireFox, Opera un IE. Internet Explorer perfekti atbalsta atribūtu atdalītājus sākot ar 7. versiju, kamēr 6. versija neatbalsta vispār. Lai pārbaudītu sava pārlūka atbalstu, izmantojiet šo testa lapu. Ja rinda/atdalītājs ir sarkanā krāsā, tātad atdalītājs tiek atbalstīts.

 

(Raksta oriģināls angļu valodā pieejams te: The Skinny on CSS Attribute Selectors by Chris Coyier.)

]]>
CSS float problēmas un risinājumi Kods CSS Raksti http://web.hc.lv/kods/css/raksti/css-float/ http://web.hc.lv/kods/css/raksti/css-float/ Sun, 14 Oct 2007 22:03:07 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Lai cik efektīva un noderīga mēdz būt elementu piesaistīšana pie cita elementa sāna (float), šie elementi mēdz būt diezgan viltīgi. Iespējams, ka esat redzējuši līdzīgu situāciju, kā 1.attēlā, kas ir izveidota tikai ar diviem <div> elementiem, katrs ar attēlu, kas ir piesaistīts pie kreisās malas.

1. attēls. Nav labi!
1. attēls. Nav labi!

Visdrīzāk, ka tas nav īsti tas, ko kodētājs bija iedomājies, taču ar izmantoto CSS kodu, šis ir korekts izklājums. Lūk, kā tas tika izveidots:

div.item {border: 1px solid; padding: 5px;}
div.item img {float: left; margin: 5px;}

Tas ir viss, kas nepieciešams. Rezultātā, tas, kas redzams 1.attēlā, notiek jo, <div> elementi „neizstiepjas”, lai aptvertu pie sāna piesaistītās bildes, kuras tajos ir iekļautas. Ja palūkojas uz situāciju no otras puses, tad tā notiek, jo piesaistītās bildes „lien ārā” no <div> elementu apakšas.

Tā nav kļūda. Tā arī nav CSS nepilnība. Patiesībā, pārsvarā gadījumu kodētāji vēlas tieši šo likumsakarību. Tikai piemērā, kas redzams 1.attēlā, tas nav tas, ko viņi vēlas.

Problēmas izprašana

Tātad, kad visa labā un pareizā vārdā, kodētāji vēlētos, lai pie sāna piesaistītais elements izvirzītos no elementa, kurā tas atrodas? Elementāri: vēsturiski visbiežāk pielietotajā CSS pazīmes (property) float izmantošanā. Pievērsiet uzmanību 2.attēlam un xHTML kodam, kas seko.

2.attēls. Bilde, kas piesaistīta teksta kreisajai pusei.
2.attēls. Bilde, kas piesaistīta teksta kreisajai pusei.

<p>
...teksts...
<img src="jul31-03-sm.jpg" height="200" width=”50” class="picture" alt=”Kalni” />
...teksts...
</p>
<p>
...teksts...
</p>

Šāda attēla ievietošana tekstam pa vidu tiek praktizēta jau kopš ļoti, ļoti seniem laikiem. Tāpēc šī iespēja tikai ieviesta tīmeklī sākot ar Netscape 1.1, un kāpēc CSS padara to iespējamu izmantojot CSS pazīmi float.[1] Taču palūkojieties uzmanīgāk uz 2.attēlu. Bilde lien ārā no elementa (<p>), kurā tā atrodas. Uzskatāmāk to var novērot, attēlojot malas rindkopām, kā parādīts 3.attēlā.

3.attēls. Rindkopu malas ir redzamas.
3.attēls. Rindkopu malas ir redzamas.

Tagad ir redzams, kāpēc ir būtiski, lai pie sāna piesaistītie elementi izvirzītos no elementiem, kuros tie atrodas. Ja tas tā nenotiktu, tad 2.attēlā redzamā situācija attēlotos kā 4.attēlā.

4.attēls. Ja piesaistītie elementi neizvirzītos no elementiem, kuros tie atrodas.
4.attēls. Ja piesaistītie elementi neizvirzītos no elementiem, kuros tie atrodas.

Tas ir tas, ko dizaineri nekad nepieļautu. Tātad, lai sekotu tīmekļa dizaina tradīcijām un tam, ko kodētāji sagaida, CSS ir veidots, lai ļautu piesaistītajiem elementiem izvirzīties no elementu apakšas, kuros tie atrodas. Lai gan tā ir nepieciešamība izmantojot piesaistīšanu pie teksta, šeit rodas liela problēma, kad piesaistītie elementi tiek izmantoti, lai veidotu lapas izklājumu (layout).

Clear risinājums

Ja piesaistītie elementi tiek izmantoti veidojot beztabulu izklājumus, tad ir nepieciešams atrast veidu, lai elementi, kuros tie atrodas izstieptos ap tiem. Pašlaik tam nepieciešams ir neliels strukturāls triks (hack). Tā kā mēs vēlamies, lai elementa, kurā atrodas piesaistītais elements, apakšējā mala atrastos tīri aiz piesaistītā elementa apakšējās malas, tad CSS parametrs clear ir mūsu risinājums. Mums nepieciešams ievietot block-level elementu tieši pirms saturošā elementa noslēguma, un pievienot tam CSS pazīmi clear. Ievērtējiet:

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
<hr />
</div>
<div class="item">
<img src="w6145.gif" />
Widget 6145
<br />$44.95
<hr />
</div>

Tagad mums jāpielieto sekojošais CSS kods xHTML kodam, un jāiegūst rezultāts, kas attēlots 5.attēlā.

div.item hr 
{
display: block;
clear: left;
margin: -0.66em 0;
visibility: hidden
}

5.attēls. Horizontālās līnijas izmantošana elementa pastiepšanai.
5.attēls. Horizontālās līnijas izmantošana elementa pastiepšanai.

Pārliecinoties, ka <hr> elementi ir block-level, un tiem ir CSS pazīme clear, mēs piespiežam <div> elementus „aptvert” attēlus, kas ir piesaistīti kreisajam sānam.

Negatīvās augšējā un apakšējā maliņas (margins) ir nepieciešamas, lai noslēgtu atstarpi, ko aizņem <hr> elementi. Tomēr šis efekts nav precīzs un nedarbojas identiski uz visiem pārlūkiem. Elementa <hr> mistiskās dabas dēļ ir ļoti grūti iepriekš paredzēt, kā īsti tas attēlosies. Nepieciešamais <hr> elementa augstums varētu būt nulle, vai neliels pozitīvs skaitlis, vai pat negatīvs augstums.

Tāpēc situācijās, kur ir nepieciešama precizitāte, kodētāji var izmantot <div> elementu <hr> elementa vietā, lai panāktu attīrīšanas efektu. Piemēram:


div.clearer {clear: left; line-height: 0; height: 0}

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
<div class="clearer">&nbsp;</div>
</div>

Float izmantošana float labošanai


Ir veids, lai izvairītos no pārliekas strukturālā trika izmantošanas, kurš tika apskatīts iepriekš, lai gan reizēm tomēr arī tas ir nepieciešams. Lielākajā daļā pārlūku, un kā tas ir definēts iekš CSS 2.1, elements ar CSS float parametru paplašināsies, lai aptvertu visus elementus ar CSS parametru float, kurus tas pats satur. Tātad mūsu piemērā mēs varētu izvākt visus <div class="clearer"> elementus un tā vietā pierakstīt šādu CSS kodu:

div.item {float: left; border: 1px solid; padding: 5px; width: 60%}
div.item img {float: left; margin: 5px}

Pievērsiet uzmanību, ka CSS float parametrs tika iedots gan bildēm, gan <div class="item"> elementiem. Norādot <div> elementu platumu lielāku par 50%, mēs nodrošinām, ka tie nekad nevarēs atrasties viens otram blakus, bet tā vietā atradīsies viens virs otra. Rezultāts ir attēlots 6.attēlā.

6.attēls. float parametra izmantošana problēmas risināšanai.
6.attēls. float parametra izmantošana problēmas risināšanai.

Šo acīmredzami ir vieglāk izmantot, gan HTML koda ziņā, gan CSS koda ziņā. Tomēr triks, kas tika apskatīts agrāk vēl aizvien var būt noderīgs. Iedomāsimies, ka ir nepieciešams pievienot nelielu papildus tekstu zem „items”. Lai teksts nesāktos no <div> elementu labās puses, mums jāizmanto iepriekš apskatītais „clear” triks. Kas mūs noved pie sekojoša koda, kura rezultāts ir attēlots 7.attēlā.

<div class="item">
<img src="w6144.gif" />
Widget 6144
<br />$39.95
</div>
<div class="item">
<img src="w6145.gif" />
Widget 6145
<br />$44.95
</div>
<div class="clearer">&nbsp;</div>
<p>Widgets are sold on an "as is" basis without
warranty or guarantee.</p>

7.attēls. Kombinējot risinājumus var iegūt vēlamo rezultātu.
7.attēls. Kombinējot risinājumus var iegūt vēlamo rezultātu.

<div class="clearer"> elements automātiski piespiež tam sekojošus elementus sākties no jaunas rindas, tātad zem <div class="item"> elementiem.

Iespējamā problēma, izmantojot piesaistītus sāniem elementus citos piesaistītos elementos, ir tas, ka jūs balstāties uz pārlūku korektu darbību. Šī situācija kļūst daudz trauslāka, ja šie piesaistītie elementi ir daļa no daudz sarežģītāka izklājuma, kurā iespējams arī tiek izmantota piesaistīšana pie sāniem, tabulas vai pozicionēšana. Neteiksim, ka šādus izklājumus nav iespējams veidot. Taču šādu izklājumu veidošana var veidot milzīgu mēģinājumu un kļūdu apjomu, lai izvairītos no nekorektas piesaistīšanas pie sāniem un citām izklājuma kļūdām, kas var rasties pārlūku CSS attēlošanas kļūdu dēļ.

Apkopojums

Izprotot, kā piesaistītie pie sāniem elementi un nepiesaistītie mijiedarbojas viens ar otru, un izprotot kā CSS parametrs clear var tikt izmantots, kodētāji var uzskatīt CSS parametru float par ļoti spēcīgu izklājumu veidošanas rīku. Tā kā šie elementi ar CSS parametru float sākotnēji nebija paredzēti izklājumu veidošanai, daži triki var būt nepieciešami, lai tie izkārtotos tā, kā tas ir ieplānots. Var iesaistīt pie sāniem piesaistītus elementus, kuri satur citus piesaistītus elementus, „attīrošos” elementus ar CSS parametru clear, vai izmantot abu šo triku kombināciju.

Skatoties nākotnē, ir ierosināti vairāki CSS uzlabojumi, kas ļautu kodētājiem norādīt, ka elementam vajadzētu izstiepties, lai saturētu sevī pilnībā visus sāniem piesaistītos elementus. Šīs noteikti būtu iekš CSS gaidītas iespējas, taču pašlaik izskatās, ka līdz šādu iespēju atbalstīšanai būs jāgaida ļoti ilgi.

[1] Termins „float” attiecināms uz veidu kādā elements tiek piesaistīts cita elementa sānam (vai apakšai), kā tas ir aprakstīts oriģinālajā „Addition to HTML 2.0” dokumentā, kas nāca līdzi Netscape 1.1 izlaidumam.

Raksta autors ir Eric A.Meyer, vispāratzīts CSS guru.
Raksts pārtulkots no complexspiral.com, kur tas tika publicēts 2003.gada 25.augustā.
]]>
Neliels knifs ar PNG attēlu caurspīdīgumu Kods CSS Raksti http://web.hc.lv/kods/css/raksti/knifs-ar-png-attelu-caurspidigumu/ http://web.hc.lv/kods/css/raksti/knifs-ar-png-attelu-caurspidigumu/ Fri, 22 Jun 2007 19:33:18 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Varbūt būsiet pamanījuši, ka www.hc.lv izvēlnē sadaļu apzīmējumiem fons ir dažādās krāsās, taču ar krāsu pārejām. Šādas pārejas nav iespējams panākt ar CSS koda palīdzību, neizmantojot attēlu, taču ir iespējams izmantojot fona attēlu.
HC.LV izvēlne

Pirmā doma, kas varētu ienākt prātā, kā to panākt, ir ka jāveido dažādi fona attēli – katrs savā krāsā ar pārejām. Taču, šim variantam ir vairāki mīnusi:
  • Pirmais ir, ka tādā gadījumā vienā izvēlē būtu jāizmanto vairāki atsevišķi attēli (katrs savā krāsā). Kopējais lapas izmērs ne tikai stipri palielinātos, bet lapa arī ielādētos salīdzinoši ilgi.
  • Otrs mīnuss ir tas, ka lai izveidotu citas krāsas fona attēlu, katru reizi tas būtu jāveido no jauna Adobe Photoshop programmā, vai jebkurā citā, un šo procesu automatizēt ir diezgan sarežģīti.
Te nu es izdomāju kādu knifu - izmantot PNG attēlu daļējo caurspīdīgumu. Ideja ir pavisam vienkārša – ar CSS palīdzību uzliekam sadaļas apzīmējumam jebkuru fona krāsu (CSS background-color atribūts), un pa virsu ar CSS palīdzību (CSS background-image atribūts) uzliekam PNG attēlu, kā daļēji caurspīdīgu fona attēlu, lai panāktu krāsu pāreju efektu.

Ja noņem caurspīdīgumu šādam PNG attēlam, tad tas izskatītos šādi (palielināju kontrastu, lai var labāk saskatīt krāsu pārejas):

Necaurspīdīgs fona attēls

Rezultātā, mainot tikai ar CSS fona krāsu, mēs iegūstam dažādu vēlamo toņu fonus. Efekts ir kā, ja uz viena toņa krāsas galda uzliktu nevienmērīgi tonētu stiklu, kura dažas daļas būtu pilnīgi caurspīdīgas, bet dažas mazāk caurspīdīgas: galds izskatītos vairs nevis vienā tonī, bet ar krāsu pārejām no tumšākajām uz gaišākajām.

Izmantojot šo metodi, lai izveidotu jebkuras citas krāsas fonu ar visām pārejām, ir tikai jāpamaina zem daļēji caurspīdīgā PNG attēla esošā fona krāsa iekš CSS (background-color atribūts) un nav sev vairs jāsarežģī dzīve, veidojot papildus fona attēlus.

PNG attēlu caurspīdīgumam ir viena problēma – to diezgan problemātiski atbalsta dažādi vecāki interneta pārlūki, taču, izmantojot dažus CSS trikus, vismaz uz populārākajiem mūsdienu pārlūkiem (IE 5.5+, FireFox, Opera u.c.), šeit aprakstītais knifs strādā lieliski. Pie tam, arī uz tiem pārlūkiem, kuri neattēlo korekti PNG caurspīdīgumu, vizuāli mainās tikai tas, ka nav krāsu pārejas, kas nekādā gadījumā nesamazina lapas lietojamību.

Lapas kods ir pieejams zemāk, kā tas izskatās darbībā, var aplūkot te.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lv" lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Triks ar caurspīdīgu PNG attēlu</title>
<!--Te sākas kods tikai IE līdz 7.versijai-->
<!--[if lt IE 7]>
<style type="text/css">
.nav li
{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/inc/themes/watercolors/images/bg.png',sizingMethod='scale')
}
</style>
<![endif]-->
<!--Te beidzas kods tikai IE līdz 7.versijai-->
<style type="text/css">
ul.nav
{
margin:0
}
.nav li
{
height:40px;
width:70px;
background-image:url(/inc/themes/watercolors/images/bg.png);
float:left;
list-style-type:none
}
</style>
</head>
<body>
<h1>Izvēlne</h1>

<ul class="nav">
<li style="background-color:#f00;">
<a href="#" title="Izvēlne 1">Izvēlne 1</a>
</li>
<li style="background-color:#f00;">
<a href="#" title="Izvēlne 2">Izvēlne 2</a>
</li>
<li style="background-color:#0f0;">
<a href="#" title="Izvēlne 3">Izvēlne 3</a>
</li>
 <li style="background-color:#0f0;">
<a href="#" title="Izvēlne 4">Izvēlne 4</a>
</li>
<li style="background-color:#003;">
<a href="#" title="Izvēlne 5">Izvēlne 5</a>
</li>
<li style="background-color:#003;">
<a href="#" title="Izvēlne 6">Izvēlne 6</a>
</li>
</ul>

</body>
</html>

Iedziļinoties sīkāk CSS kodā, varu pateikt, ka uz IE 5.5-IE 6 izmantotais CSS triks strādās tikai uz HTML elementiem, kuriem var norādīt un ir norādīts augstums un platums (width un height CSS attribūti), bet vairāk par PNG pielāgošanu dažādiem pārlūkiem var palasīt angliski te.

Varbūt kādam noderēs!
]]>
2 kolonnu mājaslapas izkārtojums ar CSS Kods CSS Raksti http://web.hc.lv/kods/css/raksti/2-kolonnu-majaslapas-izkartojums-ar-css/ http://web.hc.lv/kods/css/raksti/2-kolonnu-majaslapas-izkartojums-ar-css/ Sat, 16 Jun 2007 17:36:21 +0300 web.hc.lv - vortāls tīmekļa veidotājiem Beidzot atradu, kā var ar CSS palīdzību panākt 2 kolonnu mājaslapas izkārtojumu, kurā vienai kolonnai būtu fiksēts platums (fixed, static width) un otra platumā izplestos pa atlikušo ekrāna daļu (fluid, liquid width). Turklāt, lai fiksētā platuma kolonnas saturs kodā būtu aiz nefiksētā platuma kolonnas satura.
Cerams, ka kādam tas noderēs vēl. Pašlaik šis pats risinājums tiek izmantots web.hc.lv vortālā.

Fiksētā platuma kolonnas saturam jābūt kodā aiz nefiksētā platuma kolonnas satura, lai dažādas meklētājsistēmas lielāku svaru dotu lapas saturam, kurš atrodas nefiksētā platuma kolonnā, jo web.hc.lv fiksētā platuma kolonnās tiek ievietotas mazāk būtiskas lietas - tādas kā reklāmas un citas.

2 kolonnu izkārtojums

Sākumā esmu izveidojis 2 kolonnas, no kurām kreisās puses kolonna ir ar fiksētu platumu. Labās puses kolonnā esmu ievietojis vēl 2 kolonnas, no kurām, savukārt, labās puses kolonna ir ar fiksētu platumu. Nepieciešamības gadījumā nav grūti pārveidot kodu pēc savām vajadzībām. Kods darbojas korekti uz visām populārākajām pārlūkprogrammām.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="lv" lang="lv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 column CSS layout</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
float: left;
width: 100%;
background-color:#f66
}
.content0{
margin-left: 150px;
background-color:#ff6
}
.content1{
margin-right: 150px;
background-color:#6f6
}
.column0{
float: left;
width: 150px;
margin-left: -100%;
background-color:#f66
}
.column1{
float: left;
width: 150px;
margin-left: -150px;
background-color:#6ff
}
.footer{
clear: left;
width: 100%;
background-color:#66f
}
.maincontainer{
border: 1px solid #000
}
</style>
</head>
<body>
<div class="maincontainer">
<div class="topsection">
<h1>2 column CSS layout - header1</h1>
<p>(1st in source)</p>
</div>
<div class="wrapper">
<div class="content0">

<div class="maincontainer">
<div class="topsection">
<h2>right column floated (liquid) header2</h2>
<p>(2nd in source)</p>
</div>
<div class="wrapper">
<div class="content1">
<p>content of right column</p>
<p>(3rd in source)</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="column1">
<p>another fixed (static) width 150px right
column inside floated right column</p>
<p>(4th in source)</p>
</div>
<div class="footer">
<p>footer1 of right column</p><p>5th in source)</p>
</div>
</div>

</div>
</div>
<div class="column0">
<p>left column fixed (static) width 150px</p><p>(6th in source</p>
</div>
<div class="footer">
<p>footer2 - web.hc.lv</p>
<p>(7th in source)</p>
</div>
</div>
</body>
</html>

Testēts uz: Internet Explorer 6, 7, Opera 9, Firefox 2. Lūdzu ierakstiet komentāros, kā tas darbojas uz citiem pārlūkiem. Aplūkot kodu darbībā var te.
]]>