| Autor | Zpráva | ||
|---|---|---|---|
| jefitto44 Profil |
#1 · Zasláno: 24. 2. 2014, 12:35:55 · Upravil/a: jefitto44
Potrebujem si vyrobiť takúto tabuľku: http://www.jefitto.ic.cz/tablicka.bmp , avšak idem sa z toho zošalieť, ale furt mi to nejde. Ospravedlňujem sa za rýchlu schému, skicar rules :O
Do mriežky chcem umiestniť obrázky, veľkosť obrázkov, ani buniek nenastavujem, keĎže obrázky majú také veľkosti, aké majú mať. Kód vyzerá takto: <table> <tr> <td rowspan="2"><img src="daco.jpg" alt=""> <!-- Táto bunka presahuje cez dva riadky, lebo je na nej väčší obrázok --> </td> <td rowspan="2"><img src="nic.jpg" alt=""> <!-- Táto bunka presahuje cez dva riadky, lebo je na nej väčší obrázok --> </td> <td><img src="dakto.jpg" alt=""> <!-- Toto je obrázok s polovičnými rozmermi a mal by byť zarovnaný vľavo hore, ale nie je --> </td> <td><img src="nikto.jpg> <!-- Toto je obrázok s polovičnými rozmermi a mal by byť ravonaný vpravo hore, ale nie je --> </td> </tr> <tr> <td></td> // Do tejto bunky preshuje horný rowspanovaný obrázok <td></td> // Do tejto bunky presahuje horný rowspanovaný obrázok <td><img src="nuda.jpg" alt=""> <!-- Tento obrázok vôbec nie je zobrazený --> </td> <td><img src="sranda.jpg" alt=""> <!-- Tento obrázok vôbec nie je zobrazený --> </td> </tr> </table> Urobil som menšiu zmenu, keďže mi došlo, že musím použiť aj colspan... :O Teraz to vyzerá takto: <table> <tr> <td rowspan="2" colspan="2"><img src="daco.jpg" alt=""> <!-- Táto bunka presahuje cez dva riadky, lebo je na nej väčší obrázok --> </td> <td></td> <td rowspan="2" colspan="2"><img src="nic.jpg" alt=""> <!-- Táto bunka presahuje cez dva riadky, lebo je na nej väčší obrázok --> </td> <td></td> <td><img src="dakto.jpg" alt=""> <!-- Toto je obrázok s polovičnými rozmermi a mal by byť zarovnaný vľavo hore, ale nie je --> </td> <td><img src="nikto.jpg> <!-- Toto je obrázok s polovičnými rozmermi a mal by byť ravonaný vpravo hore, ale nie je --> </td> </tr> <tr> <td></td> // Do tejto bunky preshuje horný rowspanovaný obrázok <td></td> // Do tejto bunky presahuje horný rowspanovaný obrázok <td><img src="nuda.jpg" alt=""> <!-- Tento obrázok vôbec nie je zobrazený --> </td> <td><img src="sranda.jpg" alt=""> <!-- Tento obrázok vôbec nie je zobrazený --> </td> </tr> </table> Teraz mi síce zobrazí všetky štyri malé obrázky, avšak nie sú na svojom mieste :O Sú tak, že horné dva sú na spodnej úrovni veľkých obrázkov a spodné dva malé obrázky prekukávajú popod riadok... |
||
| DJ Miky Profil |
#2 · Zasláno: 24. 2. 2014, 12:45:37
Když některou buňku rozšíříš do dalšího řádku, již ji v dalším řádku nespecifikuješ znovu, tedy ty dvě prázdné
<td> v druhém řádku tam být nemají (místo pro buňky z horního řádku se vytvoří automaticky). Ohledně zarovnání, dá se nastavit pomocí CSS vlastnosti vertical-align s hodnotou top.
|
||
| Joker Profil |
#3 · Zasláno: 24. 2. 2014, 12:45:49
jefitto44:
Poznámka, bylo by lepší náčrtky ukládat v jiném formátu než BMP. Takhle ten obrázek má 1,3MB. I jednoduché editory umějí uložit třeba PNG. Ohledně problému, nestačilo by jen nastavit správné zarovnání v buňkách (text-align a vertical-align)? |
||
| jefitto44 Profil |
#4 · Zasláno: 24. 2. 2014, 12:50:47
Joker:
„Poznámka, bylo by lepší náčrtky ukládat v jiném formátu než BMP. Takhle ten obrázek má 1,3MB.“ Ospravedlňujem sa. Že tam majú byť tie prázdne bunky, som sa dočítal na jakpsatweb, preto som ich tam dal. Chybu som našiel. Problém je ten, že táto tabuľka sa nachádza v dive s class="wrapper" , napriek tomu berie svoje vlastnosti z CSS Resetu, čo je pre mňa nepochopiteľné. Keď v developerských nástrojoch vypnem v resete vertical-align:baseline; tak to funguje tak, ako má. Problém je ten, že som definoval .wrapper table {vertical-align: top;}, napriek tomu, že v developerskych nástrojoch mi ukazuje, že to prepisuje, v skutočnosti to neprepisuje. A to dokonca ani keď k vertical-align: top pridám !important. A tomu nechápem |
||
| jenikkozak Profil |
Prosím o odkaz na živou ukázku.
Colspan v tomto případě na nic nepotřebuješ. Ty buňky se roztáhnou podle svého obsahu, případně jim šířku můžeš nastavit. |
||
| jefitto44 Profil |
#6 · Zasláno: 24. 2. 2014, 13:46:06 · Upravil/a: jefitto44
http://www.pieskovisko.6f.sk/
Nechápem, prečo to nechce prepísať ten CSS... :O Vyriešil som to tak, že som z CSS Resetu vyhodil ten baseline a hotovo... viem, že sa to nepatrí, ale bohužiaľ |
||
| peta Profil |
Zkus
td {border:1px solid #f00 !important;}
Kdyz delas takovehle tabulky, tak je dobre si zapnout ramecek, cili <table border=1>.
http://www.pieskovisko.6f.sk/ rowspan - slucuje radky, rows colspan - slucuje sloupce, cols Cili, prvni 2 obdelniky zleva je bud a) slouceni 2 radku a nebo b) slouceni 2 radku a 2 sloupcu. Posledni 4 fotky jsou pak 2x td na jednom radku a 2x td na druhem. Po zapnuti toho rameckovani tam ale vidis navic 4 dalsi bunky. Na 3. a 4. radku pak take vidis 2 dalsi bunky. bunky, ktere jsou soucasti slouceni se uz do dalsiho radku nepisou. Cili, pocet tagu TD v TABLE odpovida tomu, co vidi take uzivatel. Ano, je to trochu nelogicke (protoze se to pak hrozne spatne navrhuje), asi slo o usporu kodu. |
||
| Bubák Profil |
#8 · Zasláno: 24. 2. 2014, 14:17:19
jefitto44:
„tabuľka sa nachádza v dive s class="wrapper" , napriek tomu berie svoje vlastnosti z CSS Resetu, čo je pre mňa nepochopiteľné“ Nevím, jaký CSS reset jsi použil CSS reset resetuje všechny elementy, které odpovídají selektoru, ať už jsou jakkoliv zanořené. mi to přijde logické. „Nechápem, prečo to nechce prepísať ten CSS... :O“ Doporučil bych to popisovat problém lépe, které tvé pravidlo ti nechce přepsat reserovací CSS? „Vyriešil som to tak, že som z CSS Resetu vyhodil ten baseline a hotovo...“ Vyrážení klínu klínem, i když můj názor je, že nejlepší reset je žádný reset, takže já bych ho smazal celý. „viem, že sa to nepatrí, ale bohužiaľ“ Máš pravdu, kvůli tomu, že jsi problém "opravil", těžko ti někdo poradí, v čem byla příčina, že ti tvůj CSS nefungoval. |
||
| jefitto44 Profil |
#9 · Zasláno: 24. 2. 2014, 14:23:49
Ok, teda Eric Meyer Reset na začiatku style.css píše že
html, body, a, table, tr, td, a ešte milion ďalších selektorov ako h1, h2, h3, ... { margin:0; padding: 0; font-size:100%; vertical-align: baseline; } Tabuľka je umistnená v dive s názvom .wrapper Takže som si definoval .wrapper table { vertical-align: top; } AVŠAK tento druhý vertical-align mi neprepísal ten vertical-align z CSS resetu... ale mal ho prepísať. Neprepísal ho ani, keď som k nemu použil !important. Naproti tomu, v developer tools v chrome sa všetko javilo, že funguje, že je to prepísané, ale nefungovalo to. V skratke, vertical-align z CSS resetu bol síce preškrtnutý, avšak všetko sa napravilo až po deaktivácií alignu z CSS Resetu. Tomu nechápem |
||
| _es Profil |
#10 · Zasláno: 24. 2. 2014, 14:43:01
jefitto44:
A prečo nenastavuješ tú CSS vlastnosť bunkám tabuľky - elementom td? |
||
| jenikkozak Profil |
#11 · Zasláno: 24. 2. 2014, 14:43:49
Když nyní vidím, k čemu tu tabulku chceš, doporučil bych ji úplně vyhodit a jednotlivým obrázkům nastavit
float:left + patřičně velké okraje.
|
||
| Bubák Profil |
Jak píše _es, vertical-align, ten se ve tvém případě týká obsahu buňky tabulky. Pokud něco nechápeš, což je u začátečníků běžné, tak je dobré podívat se alespoň na www.jpw.cz, co se o problematice píše.
.wrapper table td {
vertical-align: top;
}.wrapper td {
vertical-align: top;
} |
||
| jefitto44 Profil |
#13 · Zasláno: 24. 2. 2014, 19:03:59
Prepáčte, pán profesionál, ale vami uvedený selektor .wrapper table td {blabla} som použil, no napriek tomu to nefungovalo
|
||
| peta Profil |
jefitto44: Mozna by nebylo od veci pouzit validator a zbytecne neotevirat nove tabulky.
Ten zapis css funguje za urcitych priznivych okolnosti. Ve FF, kdyz si dam zobrazit seznam stylu, tak tvuj wraper styl, ktery je uprostred BODY tagu, coz profik nepredpoklada, ze by nekdo mohl napsat (sak validator na to musi kricet), se mi zobrazuje jako prvni az po nem je hromadne prepsani ala Eric Meyer Reset. Musel bys tam pouzit important, aby to melo vyssi prioritu. (Coz by mohl byt novy bug FF, ze si zmeni takhle poradi tagu, jak se mu zachce) |
||
| _es Profil |
#15 · Zasláno: 25. 2. 2014, 10:29:17
jefitto44:
Skontroluj si HTML kód. V ukážke z [#6] máš v HTML kóde chyby, prinajmenšom v otváracích a uzatváracích značkách. |
||
| jefitto44 Profil |
#16 · Zasláno: 25. 2. 2014, 11:18:27
Ani !important to neprepísalo :O
Možno bol problém v tom, že hore som includoval header pomocou <?php get_header();?> a v tom headeri sú zakomponované aj štýly, title a charset, ktoré mi tiež mimochodom nefungujú. CSS pre úvodnú stránku som písal medzi html medzi <style> a </style> |
||
| Bubák Profil |
#17 · Zasláno: 25. 2. 2014, 11:51:22
peta:
„Musel bys tam pouzit important, aby to melo vyssi prioritu.“ Blábol, nemusí, úplně stačí konkrétnější selektor. Selektory v Meyerově resetu mají jeden bod priority, takže je velice snadné je přebít. „Coz by mohl byt novy bug FF, ze si zmeni takhle poradi tagu, jak se mu zachce“ Další blábol. jefitto44: „Ani !important to neprepísalo :O“ Psal jsem, ať se vyjadřuješ tak, aby se dalo pochopit, o co jde. Nevím, čemu jsi dal !important a ani co se mělo přepsat. Na tvém webu vidím jediný vertical-align deklarovaný pro tabulku, což, jak ses dozvěděl, nefunguje.
|
||
| peta Profil |
#18 · Zasláno: 25. 2. 2014, 12:52:41
jefitto44: Oprav si to tak, aby html bylo ok. Az tam nebudes mit tagy navic, styly v hlavicce a pod, pak ma smysl hledat dalsi problemy. Important neni reseni, to je spis nouzovka.
<?php get_header();?> Prohlizec tvoje phpko vubec nezajima. Prohlizec zajima az vysledny html kod, ktery mu php ze serveru odesle, ktery si muzes prohlidnout ve FF na Alt+Shif+u nebo prave tlacitko v obsahu stranky a vybrat Zobrazit zdrojovy kod.
"ktoré mi tiež mimochodom nefungujú" Ale css ma urcite pravidla prebijeni stylu. prednost ma id, tag, az pak je classname. Pokud je neco zabalene v id a v css mas to #id .class .class, tak ten zapis ma prednost pred .class .class. Muze to prebit important, ale to ma take sva pravidla.
Bezne se daji styly prepsat tak, ze je pises na konci a pokud to chces fakt natvrdo prebit, pak je dore uvest uplny zapis pro celou vetev, tagy+id+class a jeste k tomu pridat important, treba :) Napr. div#container
div#header
div.box
div#navigation
ul#main-nav
li#menu-item-73
{} |
||
| anonymníí Profil * |
#19 · Zasláno: 25. 2. 2014, 13:19:08
peta:
„prednost ma id, tag, az pak je classname“ Co to meleš? Podle tebe má a větší váhu než .modra? Vrhni se zpět na základy CSS, nebo si najdi hobby, ve kterém se budeš snáze orientovat. Základy CSS jsou na tebe asi zbytečně těžké.
„pak je dore uvest uplny zapis pro celou vetev, tagy+id+class“ Ty pěkně perlíš. Nechtěl bych psát pravidelně html body div#obal div#obsah div#levyobsah p span a. Třeba. To nemůže být myšleno vážně ani jako blbý pokus o vtip.
|
||
|
Časová prodleva: 10 let
|
|||
0