| Autor | Zpráva | ||
|---|---|---|---|
| MíšaH. Profil * |
#1 · Zasláno: 5. 6. 2013, 01:01:23
Zdravím,
potřebovala bych poradit - mám to do školy na test a už nevím co s tím (není to přímo test, jen příklad pro trénink). Mělo by to vypadat zhruba takhle: Odkaz na vzor Text a obrázek mám trochu jiné, to není důležité... Ale buňka z tabulky "Komunikace" mi pořád nechce zalést na správné místo a taky se to nějak rozjíždí velikostně... Ale hlavně ta 1 buňka, nevíte, co s tím pls? Vzhled mé stránky (Prosím o shovívavost, dělám to prvně...) <html>
<head>
<link type="text/css"rel="stylesheet" href="style.css"/>
<title> Web test </title>
</head>
<body>
<table align="center" style="margin-top: 50px" cellpadding="20"; cellspacing="20">
<tr>
<td colspan="5" height="70" bgcolor="red" style="font-family: Arial Black" align="center": 50px"><strong>Význam paměti</strong></td>
<td rowspan="3" width="140" align="center" style="color: white" bgcolor="blue"><strong>Přátelství</strong></td>
</tr>
<tr>
<td rowspan="2" width="140" align="center" bgcolor="yellow"><strong>Informace</strong></td>
<td rowspan="4" colspan="4" bgcolor="white" valign="top">
Co musí sedět:
<BR></BR>
<BR><em>seznam a obrázek</em></BR>
<ul>
<li>polka 1</li>
<li>polka 2</li>
<ul>
<li>pol. 1</li>
<li>pol. 2</li>
</ul>
<li>polka 3</li>
</ul>
<a href="web 4.html" target="_blank">odkaz z pc.html nebo z webu http:// </a>
<img src="http://thumbnail016.mylivepage.com/chunk16/314324/204/small_mozek1.jpg.jpg" alt="MOZEK">
</tr>
<tr align="center">
<td rowspan="2" width="140" bgcolor="#2efa0a"><strong>Komunikace</strong></td>
</tr>
<tr>
<td rowspan="4" width="140" align="center" bgcolor="red"><strong>Myšlení</strong></td>
<td rowspan="4" width="140" bgcolor="yellow" valign="top">TEXT</td>
</tr>
</table>
</body>
</html>Style.css obsahuje toto: Body {background-color: red;}
td {border: 1px solid silver;}
table {border: 2px solid white; width: 740px; height: 740px;
background-color: green;} |
||
| nounejm Profil * |
#2 · Zasláno: 5. 6. 2013, 07:53:22 · Upravil/a: nounejm
1. ve škole vám říkali, ať to děláte pomocí tabulek?
2. pokud se buňka tabulky odsune nakonec, tak to s největší pravděpodobností znamená, že se do tabulky nevešla. Jsou tam nastaveny nějaké šířky a výšky a vnitřní buňky mají asi větší výšku, než ta vnější. ... anebo jsou tam špatně tagy <tr><td> - už tam vidím jeden neuzavřený <td> - tabulka je potom rozhozená |
||
| ts_istudio Profil |
#3 · Zasláno: 5. 6. 2013, 08:18:06
nounejm:
„1. ve škole vám říkali, ať to děláte pomocí tabulek?“ V obrázku se zadáním je řeč o tabulce a buňkách. O úrovni učitele to hodně vypovídá. |
||
| nounejm Profil * |
#4 · Zasláno: 5. 6. 2013, 08:56:56
jinak by se to mělo dělat pomocí bloků:
Jak zarovnat dva blokové prvky vedle sebe? 1.oba prvky obalíme vnějąím <div> 2.vnitřním blokům nastavíme vlastnost float: left; 3.za pravý sloupec v HTML vloľíte prázdný <div class="cistic"></div> 4.v CSS definujete - div.cistic { clear: both; height: 1px; margin-top: -1px; padding: 0; border: 0; visibility: hidden; } <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<style>
* {border: 0px; margin: 0px; padding: 0px;}
div.cistic { clear: both; height: 1px; margin-top: -1px; padding: 0; border: 0; visibility: hidden; }
body { background-color: red; }
div#stranka { border: 3px solid white; margin: 45px auto 0px auto; width: 800px; background-color: green; }
div#logo { border: 1px solid white; margin: 20px 10px 10px 20px; width: 575px; height: 65px; background-color: red; }
div#levy { float: left; }
div#informace { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 140px; background-color: yellow; }
div#komunikace { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 140px; background-color: lime; }
div#mysleni { border: 1px solid white; margin: 10px 10px 20px 20px; width: 140px; height: 235px; background-color: red; }
div#prostredni { margin: 10px 10px 20px 10px; width: 415px; height: 562px; float: left; background-color: white; }
div#levyobal { float: left; }
div#pravyobal { float: left; }
div#pratelstvi { border: 1px solid white; margin: 20px 10px 20px 10px; width: 158px; height: 390px; background-color: blue; }
div#text { border: 1px solid white; margin: 10px 10px 20px 10px; width: 158px; height: 235px; background-color: yellow; }
</style>
</head>
<body>
<div id="stranka">
<div id="levyobal">
<div id="logo">
Význam tréningu lidské paměti
</div>
<div id="levy">
<div id="informace">
informace
</div>
<div id="komunikace">
komunikace
</div>
<div id="mysleni">
mysleni
</div>
</div>
<div id="prostredni">
prostredni
</div>
<div class="cistic"></div>
</div>
<div id="pravyobal">
<div id="pratelstvi">
pratelstvi
</div>
<div id="text">
text
</div>
</div>
<div class="cistic"></div>
</div>
</body>
</html> |
||
| Trejpa Profil |
MíšaH.:
Těch colspanů a rowspanů tam máš moc. Ta tabulka má tři sloupce a čtyři řádky. Postupuj po řádcích zleva. Když narazíš na buňku, tak ji napiš. Pokud má na tom místě začínat širší nebo vyšší buňka, doplň colspan nebo rowspan. Pokud jsi na místě, kam přesahuje shora nebo zleva jiná buňka, tak ji vynech. Jinak </BR> v HTML neexistuje a seznam nemůžeš zanořit přímo do jiného seznamu, ale až do jedné z jeho položek. Středník se za HTML atributy nepíše (cellpadding="20" Oprava: Doplnění uvozovek kolem víceslovného názvu písma (upozornil nounejm). <table align="center" style="margin-top: 50px" cellpadding="20" cellspacing="20">
<tr>
<td colspan="2" height="70" bgcolor="red" style="font-family: 'Arial Black';" align="center"><strong>Význam paměti</strong>
<td rowspan="3" width="140" align="center" style="color: white" bgcolor="blue"><strong>Přátelství</strong>
<tr>
<td width="140" align="center" bgcolor="yellow"><strong>Informace</strong>
<td rowspan=3 bgcolor="white" valign="top" width="460">
Co musí sedět:<BR><BR>
<em>seznam a obrázek</em>
<ul>
<li>polka 1</li>
<li>polka 2
<ul>
<li>pol. 1</li>
<li>pol. 2</li>
</ul>
</li>
<li>polka 3</li>
</ul>
<a href="web 4.html" target="_blank">odkaz z pc.html nebo z webu http:// </a>
<img src="http://thumbnail016.mylivepage.com/chunk16/314324/204/small_mozek1.jpg.jpg" alt="MOZEK">
<tr align="center">
<td width="140" bgcolor="#2efa0a"><strong>Komunikace</strong>
<tr>
<td width="140" align="center" bgcolor="red"><strong>Myšlení</strong>
<td width="140" bgcolor="yellow" valign="top">TEXT
</table>nounejm: „pokud se buňka tabulky odsune nakonec, tak to s největší pravděpodobností znamená, že se do tabulky nevešla“ Ne, to znamená chybu v počtu buněk vedle sebe, případně zadání colspanu. „... anebo jsou tam špatně tagy <tr><td> - už tam vidím jeden neuzavřený <td> - tabulka je potom rozhozená“ Koncová značka buněk i řádků tabulky není povinná, takže nechybí. „jinak by se to mělo dělat pomocí bloků:“ Když se ve škole učí tabulky, tak ne. Máš to zbytečně upovídané. |
||
| peta Profil |
Co treba pouzit validator?
na radku 15 je chyba align="center": 50px">
na radku 13 je chyba cellpadding="20";
na radku 22 je chyba <BR></BR>
A tu td komunikace bude treba presunout do tr k td informace a mysleni. --- Jo, ty colspan, rowspan jsou tez divne. <table border=1> <!-- to doporucuju, aby bylo videt, co se s cim rameckuje --> <tr> <td colspan=3> hlavicka</td> <!-- spoj 3 bunky vedle sebe --> <tr> <td> a</td> <td rowspan=3> b</td> <!-- spoj 3 bunky pod sebou --> <td rowspan=2> c</td> <!-- spoj 2 bunky pod sebou --> <tr> <td> aa</td> <tr> <td> aaa</td> <td> ccc</td> </table> |
||
| nounejm Profil * |
#7 · Zasláno: 5. 6. 2013, 09:22:51
Trejpa:
Máš to zbytečně upovídané. - a co mám vyhodit? style="font-family: Arial Black" - to Black to už nevezme Když se ve škole učí tabulky, tak ne. - nikde tam není napsané, že se to tak učí ani, že by to mělo být v tabulkách (podle mě nemělo) Koncová značka buněk i řádků tabulky není povinná, takže nechybí. - tak to mě překvapilo, přesto bych takový nevalidní kód nikoho neučil |
||
| _es Profil |
#8 · Zasláno: 5. 6. 2013, 09:23:07
Trejpa:
To mixovanie formátovania cez HTML atribúty a CSS asi nie je práve najlepšie na výuku. Asi by bolo lepšie použiť buď len HTML atribúty a HTML značky, alebo len CSS. |
||
| Trejpa Profil |
#9 · Zasláno: 5. 6. 2013, 10:06:39
_es:
V každém případě je vhodné znát oba způsoby. Jejich kombinování při učení dodá vyučovanému zase možnost přímého porovnání a může se tak naučit vhodnosti využití toho kterého způsobu. nounejm: Zbytečně se usvědčuješ z neznalosti. „a co mám vyhodit?“ Znáš sdružené zadávání CSS vlastností? #informace, #komunikace, #mysleni { border: 1px solid white; width: 140px; }
#prostredni, #levyobal, #pravyobal { float: left; }„není napsané, že se to tak učí ani, že by to mělo být v tabulkách“ Je to typický školní příklad kombinující vše, co se naučili („mám to do školy na test“). „tak to mě překvapilo, přesto bych takový nevalidní kód nikoho neučil“ Nejdřív si zjisti, jak funguje HTML. Ne že by na tom záleželo, ale tohle validní je. |
||
| _es Profil |
#10 · Zasláno: 5. 6. 2013, 10:32:56
Trejpa:
„Jejich kombinování při učení dodá vyučovanému zase možnost přímého porovnání“ Lepšie porovnanie by snáď bolo pomocou dvoch riešení: 1) Formátovanie len pomocou HTML, úplne bez CSS. 2) Formátovanie len pomocou CSS, bez HTML značiek a atribútov pre formátovanie. Keď už „ukážkový“ kód s využitím toho, že sú niektoré koncové značky nepovinné, tak by sa asi mali z neho odstrániť aj značky </li>.
|
||
| Trejpa Profil |
#11 · Zasláno: 5. 6. 2013, 10:39:39
_es:
„tak by sa asi mali z neho odstrániť aj značky </li>.“ Mám je tam úmyslně, demonstruji jimi správné zanoření seznamu. Bez uvedení koncových značek by nebyl můj didaktický úmysl patrný na první pohled. |
||
| _es Profil |
Trejpa:
„Mám je tam úmyslně, demonstruji jimi správné zanoření seznamu.“ Nevidím z tohto hľadiska rozdiel v zanorení zoznamu a automatického ukončenia li a možnom zanorení tabuliek či automatického ukončenia riadkov a buniek - teda je vynechanie </li> ekvivalentné vynechaniu </td> či </tr>.
|
||
| Trejpa Profil |
#13 · Zasláno: 5. 6. 2013, 11:07:47
_es:
Když nechápeš důvod mého zápisu ani po mém vysvětlení, tak se nemám o čem bavit. Na téma nepovinných koncových značek už zde reagovat nebudu. |
||
| Chamurappi Profil |
#14 · Zasláno: 5. 6. 2013, 11:40:21
Reaguji na _es:
Špatně umístěné </li> může (nespolehlivě) změnit strukturu kódu (u tabulky je to obtížnější). MíšaH. ji změněnou má — má podseznam přímo v <ul>. Kdyby se jen smazaly ukončovací značky, nebylo by na tuto chybu názorně upozorněno.
|
||
| _es Profil |
Chamurappi:
„Kdyby se jen smazaly ukončovací značky, nebylo by na tuto chybu názorně upozorněno.“ Dá sa predsa na chybu upozorniť aj bez zamlčania toho, že značka </li> je nepovinná. Z kódu v Trejpa [#5] skôr môže neznalý prísť k dojmu, že je nutná, hlavne, keď keď nie sú použité analogické nepovinné značky tabuľky.
„u tabulky je to obtížnější“ Tam môže predsa tiež dôjsť k chybe, že sa bude niekto pokúšať vložiť do tabuľky tabuľku nie do elementu td ale do tr alebo table. |
||
| margin Profil * |
#16 · Zasláno: 5. 6. 2013, 12:38:24
nounejm:
„style="font-family: Arial Black" - to Black to už nevezme“ Vezme, přesto bych doporučil vložit jméno písma obsahující mezeru do uvozovek, tak, jak je to nyní v Trejpově opraveném kódu. |
||
| MíšaH. Profil * |
#17 · Zasláno: 5. 6. 2013, 21:09:47
Moc všem děkuju za rady!
Nemusíme to dělat přes tabulky, ale můžeme a já jsem na ten druhý způsob popravdě ani nepřišla :) Takže díky za druhý způsob i za opravu těch tabulek! (Trejpa a Nounejm) Snad to nějak zvládnu, pokud ne, velmi pravděpodobně se tu ještě objevím :,) |
||
|
Časová prodleva: 11 let
|
|||
0