Jump to content
php.lv forumi

div layout fons


renathy

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...