« 1 2 »
Autor Zpráva
honky tonk
Profil *
#1 · Zasláno: 19. 12. 2013, 17:56:29
Odpovědět Citovat
Jak udělat css když mám tabulku jako tuto: 

<TABLE id=index_male_last_users>
<TR BGCOLOR="#2A84BF"> 
<TD CLASS="tab" width=140><FONT CLASS="font2" COLOR="#FFFFFF"><B><?=USERNAME?></B></FONT>
<TD CLASS="tab" width=10><FONT CLASS="font2" COLOR="#FFFFFF"><B><?=AGE?></B></FONT>
<TD CLASS="tab" width=140><FONT CLASS="font2" COLOR="#FFFFFF"><B><?=REGDATE?></B></FONT>
<TD CLASS="tab"><FONT CLASS="font2" COLOR="#FFFFFF"><B><?=PHOTO?></B></FONT>
</TR>
</TABLE>

A chci vytvořit pravidlo tak aby první td v tabulce mělo šířku 140, druhé td šířku 10, třetí td 140 a poslední bez zadání? A mám dvě tabulky tohoto typu 

table.index_female_last_users, table.index_male_last_users { width: 100%; padding:1px; margin:3px; border: 1px solid #F8E5B2;}
Antik4
Profil
#2 · Zasláno: 19. 12. 2013, 18:23:58
Odpovědět Citovat
JsFiddle
Trejpa
Profil
#3 · Zasláno: 19. 12. 2013, 18:33:15
Odpovědět Citovat
honky tonk:
ukázka
honky tonk
Profil *
#4 · Zasláno: 19. 12. 2013, 19:09:23 · Upravil/a: honky tonk
Odpovědět Citovat
díky


ještě taková hloupá otázkajak zapsat zkráceně toto:
padding-left:32px; padding-bottom:0; padding-top:0;
nedaří se mi ty čísla uspořádat do padding: ....


A ještě jedna otázka: 

table#sidemenu td {
    text-align:left;
     padding-left:32px; padding-bottom:0; padding-top:0;
    height:26;
      background-image: "./templates/sun/images/but1_.gif";    
    }
.tab {padding-right: 8px; padding-left: 8px}

Mám tabulku ve stylu: 
<TABLE id=sidemenu >
<TR> 
<TD CLASS="tab" BACKGROUND="<?=C_URL?>/templates/<?=C_TEMP?>/images/but1_.gif"><A  CLASS="link11" HREF="<?=MAIN_PAGE_LINK?>"><?=MAIN_PAGE?></A>
<TD class="tdx" ><IMG SRC="<?=C_URL?>/templates/<?=C_TEMP?>/images/h.gif" WIDTH="1" HEIGHT="26"></TD >
<TR> 
<TD CLASS="tab" BACKGROUND="<?=C_URL?>/templates/<?=C_TEMP?>/images/but1_.gif"><A  CLASS="link11" HREF="<?=REGISTER_LINK?>"><?=REGISTER?></A>
<TD class="tdx" ><IMG SRC="<?=C_URL?>/templates/<?=C_TEMP?>/images/h.gif" WIDTH="1" HEIGHT="26"></TD >
<TR> 
<TABLE>

Když odstraním CLASS="tab" tak se mi rozhodí design. Je to tabulka, která vytváří boční menu. Jednotlivé položky v menu jsou nakraji zkosené pomocí nějakého obrázku no a když to tab odstraním, tak se to smrskne roh není vidět. Ale nechápu jak je to možné, protože bych řekl že když table#sidemenu td definuje šířku, tak by se měla držet šířka td.


Vlastně když dám 
table#sidemenu td {
    height: 26px;
    padding-bottom: 0;
    padding-top: 0;
    text-align: left;
}
style.css (řádek 137)
.tab {
    padding-left: 32px;
    padding-right: 8px;
}

Tak je design v pořádku, ale když bych přidal padding-left: 32px; do
table#sidemenu td
tak to přepíše to .tab a design se rozhodí. No to nechápu. Jak to. Jsou to jiné elementy?
juriad
Profil
#5 · Zasláno: 19. 12. 2013, 19:52:51
Odpovědět Citovat 
padding: 0 <right> 0 32;
Zapisuje se v pořadí top, right, bottom, left (po směru hodinových ručiček :)
Hodnotu right musíš vyplnit. Pokud ji nechceš definovat, tak musíš jednotlivé strany rozepsat zvlášť.
margin
Profil *
#6 · Zasláno: 19. 12. 2013, 19:55:45 · Upravil/a: margin
Odpovědět Citovat
honky tonk:
Doporučil bych ti použít Trejpův postup, jeho kód funguje od IE7 včetně a všech ostatních prohlížečích.

„jak zapsat zkráceně toto:“
„padding-left:32px; padding-bottom:0; padding-top:0;“
Koukni na Zápis stran
Striktně vzato, zkráceně to zapsat nemůžeš, chybí ti tam pravý padding, při zkráceném zápisu není možné některou ze stran vynechat.


juriad:
„padding: 0 <right> 0 32;“ 
padding: 0 <right> 0 32px;
Nenulové rozměry je nutné zapisovat s jednotkou.
honky tonk
Profil *
#7 · Zasláno: 19. 12. 2013, 20:09:54
Odpovědět Citovat
Takže by následující dva řádky měly být jedno a to samé, a přesto ten první mi rozhodí design, ten druhý je ok!
// padding: 0 0 0 32px;
padding-left:32px; padding-bottom:0; padding-top:0;
margin
Profil *
#8 · Zasláno: 19. 12. 2013, 20:56:33
Odpovědět Citovat
Pokud nedeklaruješ pravý padding, není to totéž.
padding: 0 0 0 32px; je padding-top: 0; padding-right: 0; padding-bottom: 0; pagging-left: 32px;
honky tonk
Profil *
#9 · Zasláno: 19. 12. 2013, 23:23:28 · Upravil/a: honky tonk
Odpovědět Citovat
Můžete pomoct s tímhle?

http://jsfiddle.net/J5Qg8/1/

Má to být zápatí, tvořené třemi horizontálními čarami (každé má jinou barvu) a dole pod tím je text. Jenže když jsem odstranil styly z tabulek a nahradil je stylopisem, tak ty horizontální "čáry" td úplně zmizely.


Mezi |||| by se nacházel text, ale hlavní problém jsou ty první tři td čka, ale ani ten čtvrtý nesedí. 

table#foot td+td+td+td {text-align:center; vertical-align:middle}



Původní kód 
<TABLE id=foot class=full>
    <TR> 
     <TD BGCOLOR="#FBE899" HEIGHT="10"><IMG SRC="img/h.gif" WIDTH="1" HEIGHT="10">
    <TR> 
     <TD BGCOLOR="#73acd4" HEIGHT="6">Stránky hostuje <a href="http://www.endora.cz" title="Hosting zdarma zajišťuje Endora.cz">Endora</a>.<!--<IMG SRC="img/h.gif" WIDTH="1" HEIGHT="6">-->
    <TR> 
     <TD BGCOLOR="#2172be" HEIGHT="10"><IMG SRC="img/h.gif" WIDTH="1" HEIGHT="10">
</TABLE>
Trejpa
Profil
#10 · Zasláno: 20. 12. 2013, 00:21:05
Odpovědět Citovat
honky tonk:
Nerozumím, co chceš? Žádné vodorovné čáry jsi tam neměl ani poprvé. Nemyslíš snad svislé (vertikální) mezery mezi buňkami? Nebo rámeček mezi buňkami?
honky tonk
Profil *
#11 · Zasláno: 20. 12. 2013, 09:28:32 · Upravil/a: honky tonk
Odpovědět Citovat
Trejpa:
Ty buňky mají mít styl barvy pozadí, který se v tom css stylu neaplikuje. Je tam nastavení výšky a barvy pozadí. Když to odstraním z původní tabulky a dám do css, tak to nejede (styl zmizí).


A hlavičky:
http://paste.ofcode.org/RzXz9T6cQ8tYKtBkiSUXcb

O co teda jde? V čem je problém?
margin
Profil *
#12 · Zasláno: 20. 12. 2013, 10:10:48
Odpovědět Citovat
honky tonk:
„Když to odstraním z původní tabulky a dám do css, tak to nejede (styl zmizí).“
A kód, kterým styluješ tabulku v CSS, je kde?
honky tonk
Profil *
#13 · Zasláno: 20. 12. 2013, 10:22:42 · Upravil/a: honky tonk
Odpovědět Citovat
margin:
Dával jsem to do toho fiddle, ale teď jak se dívám na ten odkaz tak se to nějak změnilo.

Kód který jsem zkoušel: 
table#foot td {background-color:#FBE899; height:10px;}
table#foot td+td {background-color:#73acd4; height:6px; text-align:center;}
table#foot td+td+td {background-color:#2172be; height:10px;}
table#foot td+td+td+td {text-align:center; vertical-align:middle}



Někdo ten kód přepsal: 
td:nth-child(odd){
    background: red;
    width: 140px;
}

td:nth-child(even){
    background: blue;
    width: 10px;
}

Takže rozumím z toho, že před to nemůžu psát id tabulky? Moc nerozumím tomuto pravidlu. To nth znamená kolikátý prvek chci nastavit nebo od kolikátého prvku chci nastavovat? To druhé by dávalo smysl, když v závorce je even nebo odd.


Ten stylopis co někdo editoval je na nic, ale už jsem asi blízko: 
table#foot tr td {background-color:#FBE899; height:10px;}
table#foot tr+tr td {background-color:#73acd4; height:6px; text-align:center;}
table#foot tr+tr+tr td {background-color:#2172be; height:10px;}
table#foot tr+tr+tr+tr td {text-align:center; vertical-align:middle}



Ještě dvě chyby: první tr td není nastaveno vůbec, 4 tr td má nastavenou jinou barvu (stejná barva jako třetí tr td)


Tak ještě to poslední políčko. Tam je problém v tom, že
table#foot tr td {background-color:#FBE899; height:10px;}
nastavuje barvu první buňky.
Uvnitř té čtvrté
table#foot tr+tr+tr+tr td
je ale tabulka, která obsahuje tr td. Ta buňka vnořené tabulky přejímá barvu po tom prvním stylopisu. Jak to opravit aby to neplatilo i pro vnořené tabulky?
Chamurappi
Profil
#14 · Zasláno: 20. 12. 2013, 11:12:43
Odpovědět Citovat
Reaguji na honkyho tonka:
Mohl by sis laskavě nejprve promýšlet, co všechno chceš napsat, a pak to teprve poslat najednou? Diskuse není chat, abys sem ládoval své výjevy po kousíčkách.

„To nth znamená kolikátý prvek chci nastavit“
Ano, ale :nth-child nefunguje ve stále hojně rozšířeném Exploreru 8.

„table#foot tr+tr“
Tohle styluje všechny <tr>, před kterými je alespoň jeden <tr>. Na zaměření prvního <tr> potřebuješ tr:first-child.
honky tonk
Profil *
#15 · Zasláno: 20. 12. 2013, 11:25:01
Odpovědět Citovat
Jsem ty čtyři buňky v podstatě rozjel, problém ale je, že v poslední se to dědí na další vnořenou tabulku. Jak zakázat, aby se styl nemohl dědit do vnořených prvků/tabulek/buněk? Tedy v tomto případě chci aby se první styl neaplikoval na tabulku která je umístěná pot table#foot -> čtvrtý tr -> td 

table#foot tr:first-child td {background-color:#FBE899; height:10px;}
table#foot tr+tr td {background-color:#73acd4; height:6px; text-align:center;}
table#foot tr+tr+tr td {background-color:#2172be; height:10px;}
table#foot tr+tr+tr+tr td {text-align:center; vertical-align:middle}
Kubo2
Profil
#16 · Zasláno: 20. 12. 2013, 11:31:01
Odpovědět Citovat
honky tonk:
Riešením je nevnorovať tabulky.
Trejpa
Profil
#17 · Zasláno: 20. 12. 2013, 12:06:04
Odpovědět Citovat
honky tonk:
„Tedy v tomto případě chci aby se první styl neaplikoval na tabulku která je umístěná pot table#foot“
Dědit se to bude, ale můžeš dědit pro další tabulky něco jiného: 
table#foot table td {text-align: left; vertical-align: top; }
honky tonk
Profil *
#18 · Zasláno: 20. 12. 2013, 12:11:33
Odpovědět Citovat
Kubo2:
To jo, smažu tu vnořenou tabulku, ona je tam úplně zbytečná.

Ale stále to nechápu: 

<table id="foot" class="full">
<tbody>
<tr>
<td height="10" bgcolor="#FBE899">
</tr>
<tr>
<td>
</tr>
<tr>
<td>
</tr>
<tr>
<td class="font2" align="CENTER">
<font color="#000000">
</td>
</tr>
</tbody>
</table>

Ve firebugu když najedu na čtvrtý tr td tak tam je tento stylopis: 

table#foot tr + tr + tr td {
    background-color: #2172BE;
    height: 10px;
}

Tzn. že se na čtvrtý řádek/ buňku aplikuje barva pozadí z třetího řádku/buňky. A pochopitleně to tam nechci mít.
margin
Profil *
#19 · Zasláno: 20. 12. 2013, 12:51:27
Odpovědět Citovat
honky tonk:
„Ale stále to nechápu:“
Protože se nesnažíš pochopit, jak funguje +, na to, jak funguje přímý sourozenec ti vysvětlil [#14] Chamurappi.
Koukni na http://jecas.cz/css-selektory, zvýšenou pozornost věnuj http://jecas.cz/css-selektory#primy-sourozenec a http://jecas.cz/css-selektory#prvni-posledni-potomek a koukni na http://jecas.cz/stylovani-tabulky
honky tonk
Profil *
#20 · Zasláno: 20. 12. 2013, 13:45:11
Odpovědět Citovat
Stále to ale nechápu. tr:first-child přece mohu použít jen na první buňku, u ostatních to nefunguje a nemůže fungovat proto že je to first child.
Kubo2
Profil
#21 · Zasláno: 20. 12. 2013, 14:18:37 · Upravil/a: Kubo2
Odpovědět Citovat
honky tonk:
tr:first-child je prvý riadok tabuľky, tr td:first-child je prvá bunka. Chápeš?


Všeobecne PARENT E:first/last-child znamená prvý/posledný potomok elementu PARENT typu element E.
honky tonk
Profil *
#22 · Zasláno: 20. 12. 2013, 14:55:39
Odpovědět Citovat
Kubo2:
Jasně to chápu. Jenže přesto mi ten stylopis dělá něco úplně jiného a nechápu proč. Ve buňka ve čtvrtém řádku dědí styl po
table#foot tr + tr + tr td
To je to co nechápu. Jak může čtvrtý řádek/buňka přebírat styl po třetím řádku/buňce . Chápeš co nechápu?
margin
Profil *
#23 · Zasláno: 20. 12. 2013, 14:57:51
Odpovědět Citovat
Tak polopatisticky, třeba s buňkami tabulky, s řádky je to podobné:
Zkrácená ukázka: 
<style>td + td {background: red;}
<table><tr><td>1<td>2<td>3<td>4</table>
Živá ukázka: http://kod.djpw.cz/xyy
První buňka sousedí s druhou buňkou, proto bude druhá buňka červená.
Druhá buňka sousedí se třetí buňkou, proto bude třetí buňka červená.
Třetí buňka sousedí se čtvrtou buňkou, proto bude čtvrtou buňka červená.

Zkrácená ukázka: 
<style>td:first-child + td {background: red;}
<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></table>
Živá ukázka: http://kod.djpw.cz/bzy
První buňka sousedí s druhou buňkou, proto bude druhá buňka červená.
Jiná první buňka v tabulce není, takže další buňky nezčervenají.
honky tonk
Profil *
#24 · Zasláno: 20. 12. 2013, 15:19:42
Odpovědět Citovat
margin:
Díky. Z té první ukázky to konečně chápu o co tam jde. Ale stejně nevím jak tedy nastavit např. tu třetí buňku, aniž by ta čtvrtá převzala ten styl. Jde o to, že to first-child použít nemohu. Chamurappi napsal "nth-child nefunguje ve stále hojně rozšířeném Exploreru 8." tudíž dá se to udělat smysluplně bez použití nth-child?
margin
Profil *
#25 · Zasláno: 20. 12. 2013, 15:41:03 · Upravil/a: margin
Odpovědět Citovat
honky tonk:
„tudíž dá se to udělat smysluplně bez použití nth-child?“
Nevím, zda je to "smysluplné", ale jde to třeba pro devatenáctou buňku z dvaceti.

Přiznej se, že jsi se na http://jecas.cz/stylovani-tabulky nepodíval.


http://kod.djpw.cz/jzy
honky tonk
Profil *
#26 · Zasláno: 20. 12. 2013, 15:57:07 · Upravil/a: honky tonk
Odpovědět Citovat
margin:
chceš říct že tam mám strčit col? abych to vyřešil? Ne to je nesmysl. Co je nad IE8 mě nezajímá, používám IE8.


margin:
No konečně jsem to pochopil. Ale to má úplně jiné chování než popisovali na různých stránkách na které jsem se díval a třeba z tohoto textu:


"V CSS 3 je k disposici přímo selektor n-tého prvku, s možností například přímo odlišit sudý a lichý řádek. Funguje ale až od IE 9:
...
Ve starších prohlížečích lze tuto funkčnost simulovat právě pomocí first-child / selektoru sourozence (něco + něco). I když pro hodně velkou tabulku kód značně nabobtná. V takovém případě může být lepší použít řešení na straně serveru."
Tam není ukázka použití. Je tam pouze ukázka aplikace na druhou buňku, ale ani jedna ukázka toho jak to použít na další buňky. Vždyď to funguje úplně naopak a ukazuje to odzadu ne odzačátku jak jsem si myslel.
honky tonk
Profil *
#27 · Zasláno: 20. 12. 2013, 20:08:15
Odpovědět Citovat
Takže to ve finále bylo úplně jednoduché, stačilo: 

table#foot tr td {background-color:#FBE899; height:10px;}
table#foot tr:first-child+tr td {background-color:#73acd4; height:6px; text-align:center;}
table#foot tr:first-child+tr+tr td {background-color:#2172be; height:10px;}
table#foot tr+tr+tr+tr td {text-align:center; vertical-align:middle}


A je to.
návštěvník
Profil *
#28 · Zasláno: 21. 12. 2013, 13:45:20
Odpovědět Citovat
Existuje ještě nějaký jiný způsob jak nastavit pravidla pro liché/sudé řádky v tabulce bez použití nth?

nahradit toto 
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
verzí pro IE8.
Kubo2
Profil
#29 · Zasláno: 21. 12. 2013, 14:31:33
Odpovědět Citovat
návštěvník:
Dá sa to nasimulovať v JS, niečo som začal písať do nástroja kod.djpw.cz, avšak omylom som na mojej úžasnej klávesnici stlačil zbytočnú klávesuPrejsť naspäť do histórie (už dlhšiu dobu plánujem ju podložiť a znefunkčniť nejakým špáratkom) a celá moja práca ostala znehodnotená, pretože v localStoarge sa udržal iba prvý riadok toho 12-riadkového skriptu, takže sa mi to nechcelo písať celé znovu.
návštěvník
Profil *
#30 · Zasláno: 21. 12. 2013, 15:35:07
Odpovědět Citovat
Kubo2:
Tak nic, nevadí. Vlastně, jo JQuerry mohu použít. To je fakt.

Zkus toto.
http://ahkscript.org/boards/
Zablokovat klávesu je docela snadné, jen to podmínit, aby to platilo jen pro dotyčný program.
Téma pokračuje na další straně.
« 1 2 »

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0