div layout fons

[Maris-S]

Principā pirmais punkts par caurspīdīgu bildi ir samērā vienkāršs. Viens variants ir izveidot to bildīti kopā ar visu fonu (nelikt tos zariņus kā atsevišķu bildi), kā backgroundu var mierīgi likt viena punkta platu gradienta bildīti un pa virsu augšā tad izveidoto zariņu-fona salikumu). Ja nu tomēr ir nepieciešams caurspīdīgums, tad viens variants ir gif (diez vai sanāks, jo kvalitāti labu nesanāks dabūt), otrs variants png, bet šis ir mazliet sarežģītāks, būs jāizmanto hacki, lai png caurspīdību atpazītu IE6.

 

Noapaļoto stūri var dabūt kā parastu bildīti ieliekot to visā platumā (zem trim koloniņām vidus daļā), nu likt viņu tā ka viņa būs pēc visa kontenta, aptuveni tā (atbilstošais fragments tām koloniņām un bildītei pēc viņām neņemot vērā kreiso maliņu), kods rakstīts uz ātro un nepārbaudīts, var būt kļūdas, bet doma kā tāda:

 

<div id="content_container">
  <div id="column_1"><div>
  <div id="column_2"><div>
  <div id="column_3"><div>
  <!-- Te vēl jāņem vērā nestēto float div elementu problēma mozilla pārlūkos. -->
</div>

<div id="rounded"></div>

 

Atbilstoši css šiem div elementiem:

 

div#content_container {
  width: 800px;
  background-image: url(bilde/fona/gradientam.jpg);
}

div#column_1 {
  width: 150px;
  float: left;
}

div#column_2 {
  width: 500px;
  float: left;
}

div#column_2 {
  width: 150px;
  float: left;
}

div#rounded {
  width: 500px;
  height: 10px;
  background-image: url(bilde/apaliem/stuuriishiem.jpg);
}

 

Izmēri protams ir sarakstīti aptuveni, kā arī jau rakstīju piezīmi par nestētiem div elementiem, šeit ir sīkāk:

http://www.positioniseverything.net/easyclearing.html

[Maris-S]

Un vēl, par to 'pozicionēšanu (minimāli absolute, vairāk relative)'. Principā nav stingru noteikumu ko var izmantot minimāli un ko daudz. Ir jāizmanto tas kas nepieciešams konkrētajā gadījumā. Piemēram, norādīt right un bottom vērtības nevar objektiem, kam ir relative pozicionēšana (nu norādīt var, bet nestrādās). Vēl piezīme, ja izmanto absolute, tad parent elementam obligāti norādi viņa pozicionēšanas veidu (absolute vai relative), savādāk tiks pozicionēts atbilstoši pārlūka logam.