Jump to content
php.lv forumi

kaartojam kastes greedaas un blakus vienu otrai

labikataa

By labikataa
in CSS

 Share

Recommended Posts

labikataa Newbie

labikataa

Posted
Posted (edited)

:unsure: diemzeel nespeeju saprast kaapeec ar pieejamajiem instrumentiem nav iespeejams veidot normaalu 3 sleju layout, preciizaak veidot var, bet veidoshana notiek atkaapjoties no filosofijas, ka visam jaabuut tiiram un skaistam, ka saturam un kodam jaastaav atseviskji utt... paskaidroshu siikaak...

 

te ir veelamais rezultaats -

 

mydreamlayout.gif

links uz bildi, ja raada hosted by angelfire... Links uz bildi ar layoutu

 

vai kaads var izveidot shaadu layout ieveerojot shaadus nosaciijumus:

  • css stila daljaa un html koda daljaa katraa driikst defineet vai raadiit tikai 7 div elementus
  • 5. kaste ir liidzinaajusies ar 3. un 4. nevis pielipusi kreisajai lapas malai, kaut gan 2. kaste jau beigusies
  • kasteem jaabuut minimaalajam izmeeram, taa, lai kustiiba sasniedzot browsera logam 640 pix platumu apstaatos

protams es te uzrakstiiju taadus sausos likumus, ja jums ir idejas vai jautaajumi, luudzu posteejat. ja jums liekas, ka es gribu par daudz, sakiet. ja kaads atradiis sveeto graalu, ieguus lielo colu un cipsus no manis. taads nu mans jautaajums, dariet ar vinju ko gribat :)

Edited by labikataa
Link to comment
Share on other sites
CooLynX Newbie

CooLynX

Posted
Posted

Kapēc nevarēja vienkārši ierakstīt googlē?

http://www.google.lv/search?q=css+layouts

un atrast kaudzi ar piemēriem?

pie tam pirmais jau būtu pareizā atbilde

http://glish.com/css/7.asp

 

max-width:640px;

http://www.w3schools.com/css/pr_dim_max-width.asp

http://www.google.lv/search?q=css+max-width

http://www.svendtofte.com/code/max_width_in_ie/

un

min-width:640px;

http://www.w3schools.com/css/pr_dim_min-width.asp

Link to comment
Share on other sites
Venom Newbie

Venom

Posted
Posted (edited)

vispār šajā gadījumā varētu melot. Vienīgais, 9 divi, laikam. Bet beidzot pieleca likt viducim normāli izplesties.

<style type="text/css">
div {border:1px solid red}
</style>
<div id="container" style="width:100%">
<div id="header" style="width:100%">header</div>
<div id="main" style="width:100%">
 <div id="leftmenu" style="width:180px;float:left">left menu</div>
 <div id="rightmenu" style="width:130px;float:right">right menu</div>
 <div align="center" style="width:640px">
  <div id="box3" style="width:100%">middle top</div>
  <div id="box4" style="width:100%">middle center</div>
  <div id="box5" style="width:100%">middle bottom</div>
 </div>
</div>
<div id="footer" style="width:100%">footer</div>
</div>

Edited by Venom
Link to comment
Share on other sites
labikataa Newbie

labikataa

Posted
  • Author
Posted

CooLynX, nav jau taa, ka googlee nemekleeju, viss respekts tev, bet luudzu izlasi jautaajumu pirms atbildeeshanas :(

 

Venom, labs meeginaajums, bet 2 probleemas redzamas uzreiz - "videejaa sleja" ar 3., 4. un 5. kasti palec zem 2. kastes, ja logu samazina un savukaart ja palielina, paraadaas lieeeeeels speiss starp "videejo sleju" un 6. kasti. Es zinu, tu vari teikt, ka manaa dusmiigajaa specenee taadas lietas nebija un tev buus taisniiba, bet ja nu kaads var tomeer zina ko vairaak par to kas webaa rakstiits.

 

(es pats saprotu, ka to izdariit nav iespeejams, vienkaarshi, ja nu peeksnji... shii ir arii laba vieta css advokaatiem novilkt balto kreklu un paraadiit briinumu)

Link to comment
Share on other sites
Venom Newbie

Venom

Posted
Posted

Neesmu CSS advokāts, bet pašam kaut kas līdzīgs vajadzīgs (būtība taisīts tikai 3 CSS layouti, no kuriem izmantojs tikai 1).

Reku mēģinājums nr.2. Viduča kluči turās kopā, un turās pa vidu "līdz pēdejam" 

<style type="text/css">
div {border:1px solid red}
</style>
<div id="header" style="width:100%">header</div>
<div id="main" align="center" style="width:100%">
<div id="leftmenu" style="width:180px;float:left">left menu</div>
<div id="rightmenu" style="width:130px;float:right">right menu</div>
 <div id="center" style="width:100%">
  <div id="box3" style="width:100%">middle top</div>
  <div id="box4" style="width:100%">middle center</div>
  <div id="box5" style="width:100%">middle bottom</div>
 </div><!-- center -->
</div><!-- main -->
<div id="footer" style="width:100%">footer</div>

Pretjautājums: kur tad vidējai slejai jāspruk, kad logu samazina?

Link to comment
Share on other sites
labikataa Newbie

labikataa

Posted
  • Author
Posted

Super Venom, tik taalu es it kaa tiku, vieniigi firefox 0.8 lietas raada savaadaak. es advanceeju vienu tavu rindinju ar pussuporteeto min-width 

<div id="main" align="left" style="width:100%;min-width:640px">

un tagad IE raada pareizu (gandriiz ir paaraak maigi teikts) layoutu savukaart gecko raada pareizu minimaalo platumu... shovakar paspeeleeshos ar shitaam dzejas rindaam, varbuut kas sanaak, liidz riitam :)

Link to comment
Share on other sites
CooLynX Newbie

CooLynX

Posted
Posted

Tagad tiešām sapratu. Ja tas viss tiek uztverts pilnā nopietnībā, tad gribētu sarūgtināt, ka tā ir tikai un vienīgi ākstīšanās kā arī laika izšķiešana.

 

Bet, ja nav nekā cita, ko darīt, tad var arī paķēmoties un beigās nonākt pie bēdīgiem secinājumiem, ka CSS bez hakiem un apkārtceļiem reālā dzīvē nav iespējams. To es kā praktiķis saku.

Link to comment
Share on other sites
Kaklz Newbie

Kaklz

Posted
Posted

Vai tad nu tiešām ir tik svarīgi savā maģiskajā izskatā ir tik liela nozīme tam, ka tur ir <div> nevis <table><tr><td></td></tr></table> ? Ir tāds jēdziens kā hybrid layouts (tabulas kopā ar CSS) un tas nu nemaz nav tas sliktākais piegājiens.

 

Attēlā redzamo izkārtojumu diezgan triviāli var panākt ar vienas tabulas izmantošanu un attiecīgi nav jēgas taisīt 10 <div> elementus, pielietot n-desmit trikus, lai panāktu to pašu 1 tabulas saveidoto izskatu.

 

Neviens ar bomi pa galvu nedos, ja tev būs viena tabula

<table id="pageStructure">

<tr><td rowspan="3"></td><td></td><td></td><td rowspan="3"></td></tr>

<tr><td></td></tr>

<tr><td></td></tr>

<tr><td colspan="3"></td></tr>

</table>

 

Tie, kas cīnās par CSS izkārtojumiem lielākoties vēlas tikt vaļā no <font> un citiem absolūti nestrukturālajiem elementiem un aprakstīt izskatu ar CSS līdzekļiem, tādā veidā gūstot ietaupījumu gan lapas apjoma ziņā (external stylesheets) gan arī vienkāršojot lapas izskata maiņu nākotnē, kā arī uzlabojot savu lapu pozīcijas meklētājserveros. Tie, kas noliedz jebkādu tabulu pielietojumu, vienkārši skrien ar galvu sienā.

Link to comment
Share on other sites
labikataa Newbie

labikataa

Posted
  • Author
Posted

par saakotneejo ideju un Venom kodu... ir ok, ieksh IE6 viss izskataas pat ok, bet tomeer tas nav tas, ko es mekleeju, jo "videejaa sleja" ir atsevisks <div>, tas noziimee, ka triis kastes ir iekshaa tajaa slejaa un tas noziimee arii, ka php failaa buus liekas 2 rindas, no kuraam es gribu izbeegt... es gribeeju pateikt katrai kastei virs kuras vai zem kuras tai jaastaav ar kaadiem postion riikiem... labi, karoce es experimenteeju taalaak.

 

Vai tad nu tiešām ir tik svarīgi ... ka tur ir <div> nevis <table>
... var arī paķēmoties un beigās nonākt pie bēdīgiem secinājumiem, ka CSS ... reālā dzīvē nav iespējams.

 

Vai juus mani meeginat pierunaat atteikties no domas par css? ;) Ielaisties ar tabulu noziimee fikseetu layoutu un pamatiigas saapes seezamvietas rajonaa, kad gribas to mainiit vai taisiit projektam skinus un ielaisties ar css noziimee ... tas neko nenoziimee*

 

besii css taapeec, ka deva ceriibu un piecakareeja (dalja vainas iet pie VISIEM browseru developeriem un css advokaatiem cipargalvaam, kuriem pie vienas vietas pixelperfect dizains) pats stulbaakais ka ideja ir super un pat realizeejama :)

 

____________________

*peec 2 gadiem aatraakais, pie laimiigas apstaaklju sakritiibas ka w3c paspees defineet css3 pirms microsoft palaiz longhorn un microsoft vispaar interesees ko ir defineejis w3c un veel paaris gadiem, kameer cilveeki saaks lietot to longhornu... a ja nu peeksnji jaunsavaaktaa explorer komanda izdomaa ieveerot standartus un savietojamiibu shajaa pashaa IE6?... ups, dzeesham peedeejo domu, dzeesham, dzeesham :)

Link to comment
Share on other sites
labikataa Newbie

labikataa

Posted
  • Author
Posted

Varbuut kaads jau kaut ko lasiijis par naakamajiem css, es lasiiju so far tikai par mulicolumn box kas ljaus saturam paarliit naakamajaa slejaa, ja tas nepiecieshams... respektiivi... vai buus iespeejams pateikt katram elementam sekojoshas lietas, pashlak jau dalju var pateikt (skat pirmo postu ar ziimeejumu)...

 

1. kaste - 100% plata, 30 pix augsta

2. kaste - staaveet kreisajaa malaa, zem 1. kastes

3. kaste - staaveet blakus 2. kastei, liidzinaaties peec augsheejaas malas

4. kaste - staaveet zem 3. kastes, liidzinaaties peec kreisaas malas

5. kaste - staaveet zem 4. kastes, liidzinaaties peec kreisaas malas

6. kaste - staaveet blakus 3. kastei, liidzinaaties peec augsheejaas malas

7. kaste - 100% plata, 30 pix augsta, staavēt zem zemakaas no citaam kasteem

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...