Autor Zpráva
jefitto44
Profil
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
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
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
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
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
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
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
jefitto44:
A prečo nenastavuješ tú CSS vlastnosť bunkám tabuľky - elementom td?
jenikkozak
Profil
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;
}
nebo, a to bych pravděpodobně použil
.wrapper td {
vertical-align: top;
}
a spousta dalších vhodných selektorů se dá "vymyslet", se kterými bys původní reset přebil.
jefitto44
Profil
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
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
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
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
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 *
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: