0xDEAD BEEF Ierakstīts Novembris 3, 2009 Share Ierakstīts Novembris 3, 2009 Sveiki! Esmu mazliet iebraucis CSSā. (conter strike source! ). Manta forša, bet šis tas vel nav skaidrs! Ko īsti nozīmē, kad raksta .my_class { } Kāds ir scope tam my_class? Es pagaidām tikai močiju ar <div class= .. , bet problēma tāda, ka CSS fails vienkārši pārkraujas ar manām klasēm! Galvenā fīča man patīk tā, ka ar tiem <div ..> es varu sadalīt ekrānu blokos! Jautājums galvenais ir tāds - vai es varu rakstīt kaut kā tā CSS, lai būtu apmēram tā - .uber_div { } .row { } , bet lai row attiecas tikai uz uber_div? Lai nebūtu tāk, ka ir vel kāds cits div (nu tur FAQ div) un tur arī es gribu row, bet te man jāsāk izdomāt visādi perversi vārdi.. Beefs Link to comment Share on other sites More sharing options...
cLOWN Novembris 3, 2009 Share Novembris 3, 2009 (labots) <div class="uber_div"> <p>Man garšo pankūkas</p> </div> Ja vēlies padarīt tekstu sarkanu, kas atrodas iekš .uber_div (piemērs tikai): .uber_div p { color:red; } Un ja būs šāda situācija: <div class="mega_div"> <p>Man garšo zemenes</p> </div> Tad teksts nebūs sarkans. Tas ir tikai piemērs. Ceru, ka es pareizi sapratu, ko tu vēlies Un ir arī tāda lieta kā <div id="uber_div"> Labots Novembris 3, 2009 - cLOWN Link to comment Share on other sites More sharing options...
aaaa Novembris 3, 2009 Share Novembris 3, 2009 Ja gribi kaut tā precizēt, tad var visādas izvirtības veikt. Piemēram #blabla span.test{color:red;} #blabla a.test{color:red;} .test{color:yellow;} a.test{color:green;} <span class="test">bbbb</a> <a href="#" class="test">aaaa</a> <div id="blabla"> <span class="test">bbbb</a> <a href="#" class="test">aaaa</a> </div> Faktiski, jo precīzāk tu norādi, jo augstāka prioritāte tam stilam. Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 3, 2009 Author Share Novembris 3, 2009 (labots) Es jau vairs nesaprotu, ko tu tur uzrakstiji! Kas ir #? Un kas ir id? Un ar ko span atskiras no div? edit: un ja es gribu mainit tabulai kaut ka parametrus, ka atrodas ieksh uber_div? A es varu mainit 1mo un otro td, vai ta gan nevar darit? Beefs Labots Novembris 3, 2009 - 0xDEAD BEEF Link to comment Share on other sites More sharing options...
cLOWN Novembris 3, 2009 Share Novembris 3, 2009 Hmm - varbūt iesākumā palasi html un css pamatus? css'ā ar # apzīmē id: <style type="text/css"> #mans_div { display:none; } </style> <div id="mans_div">Šams teksts nebūs redzams</div> katram id visā "kodā" jābūt unikālam, tāpat kā primārā atslēga datu bāzēs. span ir inline elements un div ir block elements - display:block vai display:inline Ja tu tabulai pirmajam un/vai otrajam td iedod kādu klasi, id, tad jā. <style> .uber_div .test { font-size:8pt; } </style> <div class="uber_div"> <table> <tr> <td class="test">Šis ir mazs</td> <td>Šis ir liels</td> </tr> <tr> <td class="test">Šis ir mazs</td> <td>Šis ir liels</td> </tr> </table> </div> Link to comment Share on other sites More sharing options...
aaaa Novembris 3, 2009 Share Novembris 3, 2009 Nu par span un div atšķirībā nedomā, tas tik tāds piemērs. Bet # iekš css atbilst id html kodā, tāpat kā . klasei. Ja vēl aizmirsu piebilst, ka var rakstīt a#id_nosaukums, tb likt tagus priekšā. Bet tajā piemērā mēģināju parādīt, ka lai arī visiem klases ir vienādas, pēc css definējuma, katrs teksts būs savādākā krāsā. #blabla .test{color:red;} #blabla a.test{color:blue;} .test{color:yellow;} a.test{color:green;} <span class="test">šis būs dzeltens, jo atbilst definējumam - .test{color:yellow;}</a> <a href="#" class="test">te būs zaļš, lai gan arī atbilst dzeltenajam definējumam, bet ar lielāku prioritāti ir šis - a.test{color:green;}</a> <div id="blabla"> <span class="test">te sarkans, jo lai arī atbilst dzeltenajam, ar leilāku prioritāti ir šis, tāpēc, ka norādīts arī id kurā tas atrodas - #blabla .test{color:red;}</span> <a href="#" class="test">te zils, jo lai gan atbilst visiem iepriekšējiem, ar lielāko prioritāti ir tomēr šis, kas visus iepriekšējos pārraksta - #blabla a.test{color:blue;}</a> </div> Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 3, 2009 Author Share Novembris 3, 2009 OK. Tad taja piemera ar #, vai es varu ari rakstiit .uber_div.row{..}. Ko nozime punkts uber_div prieksha? Vai ir kada ipasha kvalitativa atskiriba starp id un name lietoshanu? Vai var kaut ka nerakstit visiem uber_div .uber_div.row, .uber_div.frame, bet kaut ka isak? Vai tabulai visiem <td> jaliek klase, vai ari var kaut ka isak? Vai pashu tabulu nevar ar css ietekmet tas izskatt? Beefs Link to comment Share on other sites More sharing options...
cLOWN Novembris 3, 2009 Share Novembris 3, 2009 Visu var ietekmēt ar css, arī tabulu: table { background-color:black; color:white; } t tāpat ar td un tr. Ja gribi kādu no tiem īpaši izcelt, tad lieto klases un id. Un ja tu gribi secību tad nevis .uber_div.row bet gan .uber_div .row (ar atstarpi) Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 3, 2009 Author Share Novembris 3, 2009 (labots) Kapec table neliek prieksa punktu? OO! Tiku tik talu! Strada feini! .checkout_form table{ color:Red; } .checkout_form table td{ color:Green; } Man ir vel paris jautajumi!!! Tagad, skatos, vairak tabulas neizmanto ka agrak! Nakushi klat kaut kadi ui itemi un loti daudz ko karto vienkarshi ar css float. Kur ideja un ka pareizak izkartot lietas? Kas notika ar tabulam? Beefs Labots Novembris 3, 2009 - paulis nevajadzīgs citāts Link to comment Share on other sites More sharing options...
paulis Novembris 3, 2009 Share Novembris 3, 2009 par tabulu (ne)lietošanu - http://davespicks.com/essays/notables.html Link to comment Share on other sites More sharing options...
Val Novembris 3, 2009 Share Novembris 3, 2009 http://www.htmldog.com/guides/cssbeginner/ Link to comment Share on other sites More sharing options...
edw Novembris 3, 2009 Share Novembris 3, 2009 http://www.kasis.lv Link to comment Share on other sites More sharing options...
Vilx- Novembris 3, 2009 Share Novembris 3, 2009 (labots) Trijos vārdos: Tie blociņi, kurus Tu raksti CSS failā, tiek saukti par "likumiem" (rules). Katram likumam sākumā ir "selektors" (selector), kas apzīmē to, uz kuriem elementiem tas attieksies. Kad browseris grib uzzīmēt kādu elementu (piem. to Tavu <div>), viņš iet pēc kārtas cauri visiem likumiem, un meklē, kuri attiecas uz konkrēto elementu. Kā kādu atrod, tā uzliek elementam attiecīgo stilu. Selektoros vari izmantot šādas konstrukcijas: abc - atbildīs visi elementi ar tagu "abc". T.i. visi <abc> tagi. #abc - atbildīs visi elementi ar ID="abc". Taču, tā kā ID ir jābūt unikālam, tad principā šis likums attiecas tikai uz vienu konkrētu elementu. .abc - atbildīs visiem elementiem, kuriem class="abc"; abc.def - kombinācija starp abiem augstāk minētajiem. T.i. visi <abc class="def"> elementi. abc.def.ghi - atbilst <abc class="def ghi">. Jā, vienam elementam var piešķirt vairākas klases, un tad uz to darbosies visi attiecīgie selektori. Tālāk ir iespējas kombinēt (šeit abc, def, utt apzīmēs gatavus selektorus iz pirmā saraksta): abc def - atbildīs visi elementi, kas atbilst selektoram def, un ir zem elementa, kas atblst ar selektoram abc. Piefiksē, ka šiem elementiem nav jābūt vienam zem otra, bet gan var būt vairāki pa vidu. Piemēram, selektoram table.abc div#def atbildīs šis <div> elements: <table class="abc"><tr><td><div id="def">.Un šādus ar atstarpi atdalītus selektorus var vēl kombinēt savā starpā: abc, def - atbildīs gan abc, gan def selektori. T.i. lai nav jāatkārtojās rakstot vienu un to pašu, vari vienus un tos pašus likumus piešķirt uzreiz vairākiem selektoriem. abc > def - tas pats, kas abc def, bet abc ir jābūt uzreiz virs def. Uzmanies - šis nestrādā uz IE6 un jaunākiem. Ir arī vēl selektori, bet iesākumam pietiks ar šito. Vairāk vari palasīties oficiālajā specifikācijā. Labots Novembris 3, 2009 - Vilx- Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 3, 2009 Author Share Novembris 3, 2009 Labi! Apmeram daros un vairak vai mazak, bet viss sanak! Vel tik tads jautajums - man ir .row {width:100%;}. Ka man uztaisit .buttons{???} ta, lai html <input type="submit".../> atrastos, teiksim, 60% ataluma no kreisas malas ieksha .row. Un varetu tam gala piekabinat vel vienu tadu button? Beefs Link to comment Share on other sites More sharing options...
Vilx- Novembris 3, 2009 Share Novembris 3, 2009 Īsti nesaprotu, ko Tu gribi panākt, bet varbūt šis der: .row input[type=submit] { left: 60%; } Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 3, 2009 Author Share Novembris 3, 2009 Vot shita man nestrada. <div class="row"> <input type="submit" value="Continue"/> .checkout_form .row { min-height:25px; width:100%; float:left; padding-bottom:2px; text-align:left; } .row input[type="submit"] {left:60%; } Beefs Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 4, 2009 Author Share Novembris 4, 2009 (labots) Klau! Vot šitas man nekādi nepielec! Jau cik stundas mudos... Karoče - man ir .row {width:100%;} un tad man ir .row .name, .row .qty un es rakstu <div class="name">Krāsu televīzors</div><div class="qty">100$</div>... Kas man nesanāk ir tas, ka ja es taisu jaunu row un gribu uzreizu sākt ar qty, tad tas lauks man vienmēr nostājas pavisam pa kreisi. Es izmantoju float:left un width:30%. Mēģināju pārslegties uz left:%40, bet tur nekas nesanāk. Kā man uztaisīt tādu klasi, kura atrodas 40% no sākuma row klasē? Nu tā, lai es varētu normāli būvēt tabulu neuztraucoties par secību? Savādāk sākumā jāsprauž tās tukšās kolonas... :/ <div class="fieldItem"><br/></div> <div class="fieldQty"><br/></div> Beefs Labots Novembris 4, 2009 - 0xDEAD BEEF Link to comment Share on other sites More sharing options...
japets Novembris 4, 2009 Share Novembris 4, 2009 Ja vajag tabulu, tad tabulu arī lieto. Bet vispār jau ar css Tev būs pistne, nebūs viss tik intuitīvi vienmēr un visur, it sevišķi, ja gribēsi, lai smuki rādās uz visiem browseriem. Link to comment Share on other sites More sharing options...
Vilx- Novembris 4, 2009 Share Novembris 4, 2009 Pirmkārt - ja Tev vajag tabulu, tad arī izmanto tabulu! Šitie brēcēji "nē tabulām" bieži vien paši nesaprot, ko runā. Nereti tabula arī ir vienkāršākais un elegantākais veids, kā panākt dažādus izkārtojumus, kur ar CSS būtu tāds spageti, ka tik turies. Otrkārt - davai, uzzīmē mums, ko Tu īsti gribi panākt! Citādi te tāda salmu kulšana vien sanāk. Un - CSS speceni palasīji, vai nē? Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 4, 2009 Author Share Novembris 4, 2009 (labots) Vēlos panākt šito bet nevēlos rakstīt šādi <div class="row_underline_dashed"></div> <div class="row"> [s] <div class="fieldItem"><br/></div> <div class="fieldQty"><br/></div>[/s] <div class="fieldAmount">1733.33 USD</div> </div> <div class="row"> [s] <div class="fieldItem"><br/></div>[/s] <div class="fieldQty">Shipping:</div> <div class="fieldAmount">103.50 USD</div> </div> .order_form .row { width:100%; float:left; padding-bottom:2px; text-align:left; } .order_form .row .fieldItem { padding-left:5%; color:Black; font-size:13px; float:left; width:40%; overflow:hide; text-align:Left; } .order_form .row .fieldQty { color:Black; font-size:13px; width:10%; float:left; text-align:right; } .order_form .row .fieldAmount { color:Black; font-size:13px; width:20%; float:left; text-align:right; } Beefs Labots Novembris 4, 2009 - 0xDEAD BEEF Link to comment Share on other sites More sharing options...
japets Novembris 4, 2009 Share Novembris 4, 2009 Tie ir tabulāri dati. Tabulāriem datiem ir domāts table elements! To arī ir daudz vienkāršāk stilot. Link to comment Share on other sites More sharing options...
Vilx- Novembris 4, 2009 Share Novembris 4, 2009 +1 Japets. Šeit ir jāizmanto tabula, un tikai. Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 4, 2009 Author Share Novembris 4, 2009 Nu laikam liku pārāk daudz cerības uz CSS! Tabula, diemžēl, īpaši neatrisina manu problēmu, jo man tāpat būs tukšās kolonas jāaizstāj ar <td></td>. Biju cerējis uz kādu elegantu CSS veidu, kā sadalīt "bloku" kolonās. Beefs Link to comment Share on other sites More sharing options...
Vilx- Novembris 4, 2009 Share Novembris 4, 2009 A kā tieši Tu to iedomājies? Eku, es darītu aptuveni šitā (konkrētā pieeja var mazliet variēt atkarībā no tā, kas un kā jāģenerē): <html> <head> <style type="text/css"> table.order { border-collapse: separate; width: 100%; } table.order th { font-weight: normal; border-bottom: 1px dashed black; } table.order th, table.order td { text-align: right; } table.order .description { text-align: left; width: 50%; } table.order .description, table.order .amount { width: 25%; } table.order tr.firstfooter td { border-top: 1px dashed black; } table.order tr.lastfooter td { font-weight: bold; } </style> </head> <body> <table class="order"> <tr> <th class="description">Item description</th> <th class="quantity">Quantity</th> <th class="amount">Amount</th> </tr> <tr> <td class="description">Apple iPhone 3GB 8GB</td> <td class="quantity">3 pcs.</td> <td class="amount">1500.33 USD</td> </tr> <tr> <td class="description">Nokia N95 Silver</td> <td class="quantity">1 pcs.</td> <td class="amount">233.00 USD</td> </tr> <tr class="firstfooter"> <td colspan="3">1733.33 USD</td> </tr> <tr> <td colspan="2">Shipping:</td> <td class="amount">103.50 USD</td> </tr> <tr class="lastfooter"> <td colspan="2">Total:</td> <td class="amount">1866.83 USD</td> </tr> </table> </body> </html> Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 4, 2009 Author Share Novembris 4, 2009 OOO!!! Colspan ruleeeeeeee! THNX, tavs kods izskatas labak! Beefs Link to comment Share on other sites More sharing options...
Vilx- Novembris 4, 2009 Share Novembris 4, 2009 Hiden sīkrets HTML specifikācijā ir rowspan atribūts! Link to comment Share on other sites More sharing options...
eMDiiPii Novembris 4, 2009 Share Novembris 4, 2009 šaubos gan Link to comment Share on other sites More sharing options...
bubu Novembris 5, 2009 Share Novembris 5, 2009 Par ko tu šaubies? Link to comment Share on other sites More sharing options...
Vilx- Novembris 5, 2009 Share Novembris 5, 2009 Es gan nešaubos. Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 8, 2009 Author Share Novembris 8, 2009 (labots) CLOSE! pasham bija ljoti rupja kljuuda... Beefs Labots Novembris 8, 2009 - 0xDEAD BEEF Link to comment Share on other sites More sharing options...
0xDEAD BEEF Novembris 8, 2009 Author Share Novembris 8, 2009 ne! man bija <?php function darit() {?> html kods <?php echo funckijas vertibas;?> html kods. } un kad taisiju include, tad ieklavu to dalu, ko nebiju ielicis php tagos un kad izsaucu to funkciju, tad otro dalju drukaja ara un vispar sviests smagi smagais! Beefs Link to comment Share on other sites More sharing options...
Recommended Posts
Izveido kontu, vai pieraksties esošajā, lai komentētu
Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas
Izveidot jaunu kontu
Piereģistrējies un izveido jaunu kontu, tas būs viegli!
Reģistrēt jaunu kontuPierakstīties
Jums jau ir konts? Pierakstieties tajā šeit!
Pierakstīties tagad!