Jak na layout?

Ahojky.. můžete mi prosím ve zkratce objasnit rozdíl mezi tabulkovým a beztabulkovým layoutem na jednoduchém příkladu? Jak vlastně takový layout (šablonu stránky) sestavujete graficky? Celé to namalujete tam nebo při té grafické tvorbě se vracíte pořad na prohlížeč? Snad porozumíte.. díky

Tabulky se v prohlížečích obecně zobrazují pomaleji nebo chceš-li prohlížeč čeká, než stáhne obsah všech tabulek. Dnes je od tabulek odstupováno.

Grafika webu se kreslí např.: ve Photoshopu a pak se rozřeže na jednotlivé elementy a ty se nakódují :)

Takže když sestavuju tabulku a chci do grafického návrhu přidat tlačítko.. mám jej namalovat, nebo odskočit na explorer a oscreenovat a pak vložit do toho návrhu? Jak se jinak dělá ten beztabulkový layout? Nějak nechápu..

Grafika se kreslí většinou celá, nicméně zrovna tlačítka, tedy pokud je neděláš přes CSS se můžou dělat samostatně v graf. editoru. Do prohlížeče vůbec nelezeš, to až když to nakóduješ.

Pokud chceš web bez tabulek, můžeš použít kaskádové styly CSS. V nich se zadává kromě jiného právě poloha jednotlivých prvků na stránce.

Doporučoval bych nastudovat jakpsatweb.cz ;)

Tabulka:
<table width="800">
<tr><td colspan="2">hlavicka</td></tr>
<tr><td width="180">levy sloupec</td><td>content</td></tr>
<tr><td colspan="2">paticka</td></tr>
</table>

Beztabulkový layout:
<div style="width:800px;">hlavicka</div>
<div style="width:180px; float:left">sloupek</div><div style="margin-left:180px;">content</div>
<div style="800px;">paticka</div>

Píšu to z hlavy a je to hrozně zjednodušené, tak mě prosím nekamenujte, že tam jsou chyby - je to jen ilustrace rozdílu mezi tabulkou a beztabulkou ;)

Photoshop (resp. ImageReady) na Tebe po rozřezání obrázku vyplivne i tabulku i divy (podle volby). Je ale to dost nepoužitelné (jde-li Ti o rychlost zobrazení) protože (alespoň já to neumím zařídit) za Tebe neudělá to, že by např. na plochách s přechodem zopakoval jen úzký proužek na celou šířku (resp. výšku) prvku, neumí (nebo já to neumím) jiné rollovery než JS (přitom css jsou rychlejší a nezávislé na nastavení browseru), atp. Prostě stejně pak musíš jít a ten kód přepsat.

ok.. díky moc

Původně odeslal hermanek ↪

Tabulka:
<table width="800">
<tr><td colspan="2">hlavicka</td></tr>
<tr><td width="180">levy sloupec</td><td>content</td></tr>
<tr><td colspan="2">paticka</td></tr>
</table>

Beztabulkový layout:
<div style="width:800px;">hlavicka</div>
<div style="width:180px; float:left">sloupek</div><div style="margin-left:180px;">content</div>
<div style="800px;">paticka</div>

Píšu to z hlavy a je to hrozně zjednodušené, tak mě prosím nekamenujte, že tam jsou chyby - je to jen ilustrace rozdílu mezi tabulkou a beztabulkou ;)

Photoshop (resp. ImageReady) na Tebe po rozřezání obrázku vyplivne i tabulku i divy (podle volby). Je ale to dost nepoužitelné (jde-li Ti o rychlost zobrazení) protože (alespoň já to neumím zařídit) za Tebe neudělá to, že by např. na plochách s přechodem zopakoval jen úzký proužek na celou šířku (resp. výšku) prvku, neumí (nebo já to neumím) jiné rollovery než JS (přitom css jsou rychlejší a nezávislé na nastavení browseru), atp. Prostě stejně pak musíš jít a ten kód přepsat.

Jenom taková poznámka, podle mě je vždy lepší psát styly do samostatného souboru .css

Davidkojot: To je jasné ;) chtěl jsem jen, aby bylo z té ukázky zřejmo, jak se to v zásadě liší .... každému jedinečnému divu přiřadit ID, opakujícím se stejnými vlastnostmi class .... atd. ;-) Ono je toho moc, co by se mělo k tomu napsat - tak jako tak rada kolegovi medvídkovih prostudovat to na webu, kde se o tom píše podrobněji je nenahraditelná:
http://www.jakpsatweb.cz/tabulky-design.html
http://www.jakpsatweb.cz/css/css-design-position.html

Původně odeslal hermanek ↪

Davidkojot: To je jasné ;) chtěl jsem jen, aby bylo z té ukázky zřejmo, jak se to v zásadě liší .... každému jedinečnému divu přiřadit ID, opakujícím se stejnými vlastnostmi class .... atd. ;-) Ono je toho moc, co by se mělo k tomu napsat - tak jako tak rada kolegovi medvídkovih prostudovat to na webu, kde se o tom píše podrobněji je nenahraditelná:
http://www.jakpsatweb.cz/tabulky-design.html
http://www.jakpsatweb.cz/css/css-design-position.html

Je to tak, jen jsem se chtěl vyhnout tomu, aby se naučil psát styly přímo do kódu. Jinak pochopitelně jako ukázka je to přesné.

Snad bych jen dodal, že jsou případy, kdy jsou tabulky nenahraditelné, tedy lépe řečeno jsou nejlepší volbou. Styly rozhodně nejsou vhodné na všechno ;)

davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)

Původně odeslal kohout ↪

davidkojot: Nenahraditelné jsou jen při tvorbě klasické tabulky:)

Ten byl dobrej :D

Prošel jsem si i ty odkazy, co jste tam dali a mám ještě další dotaz. Při použití position:absolute se často stane, že se ta stránka rozhodí nebo podsunuje pod jiný objekt. Tento problém nastává v jiných prohlížečích (např.) anebo když stránku posílám mailem.. Vám se to ještě nestalo? Proto se snažím tomuto vyvarovat.. ale pokud je prozměnu toto moderní.. tak bych se chtěl spíš naučit toto bezchybně aplikovat..

anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?

Původně odeslal Unregistered ↪

anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?

hledej na diskuse.jakpsatweb.cz :)

Původně odeslal Unregistered ↪

anebo jak beztabulkový layout s užitím position:absolute centrovat na střed, když jsou různé typy monitorů?

Použivej radši position: relative

PHP kód:

<style>
#container {
  position: relative;
  width: 760px;
  top: 0px;
  left: 50%;
  margin-left: -380px;
}
</style>

<div id="container">
...
</div> 


Stránka vycentruješ takhle:

Kód:

<style>
body{
  margin: auto; 
  text-align: center; /* Pro IE */
}
#container {
  width: 760px;
  text-align: left;
}
</style>
<body>
<div id="container">
...
</div>
</body>

Používat v tomto případě předchozí možnosti je imho blbost.

Původně odeslal Martin ↪

Stránka vycentruješ takhle:

Kód:

<style>
body{
  margin: auto; 
  text-align: center; /* Pro IE */
}
#container {
  width: 760px;
  text-align: left;
}
</style>
<body>
<div id="container">
...
</div>
</body>

Používat v tomto případě předchozí možnosti je imho blbost.

Takhle to nepojede ve FireFoxu...

Jasně, omlouvám se - margin: auto; má být u #container.

Mám pocit, že neregistrovaný myslel horizontálně!

Asi to je barbarske reseni, ale me to funguje ve vsech prohlizecich :)
Proste vsechno co chci mit na stredu uzavru do <center></center> a je to.

Priklad:

<center>
<div id="content">
....................
....................
....................
....................
</div>
</center>

Původně odeslal Scorpius ↪

Asi to je barbarske reseni, ale me to funguje ve vsech prohlizecich :)
Proste vsechno co chci mit na stredu uzavru do <center></center> a je to.

Priklad:

<center>
<div id="content">
....................
....................
....................
....................
</div>
</center>

Hmmmmmmmmm, velice zajímavé řešení, ale takto radši ne :nono:

Pořád se mi plete vertikála s horizontálou, ale neva. Dokonce ty tabulky dneska řešili na sitepointu, jakožto velkou věc budoucnosti. Jestli jí vytvoříte pomocí html nebo css to už je celkem putna, alespoň pro screen readery.

Původně odeslal medvidekh ↪

Ahojky.. můžete mi prosím ve zkratce objasnit rozdíl mezi tabulkovým a beztabulkovým layoutem na jednoduchém příkladu? Jak vlastně takový layout (šablonu stránky) sestavujete graficky? Celé to namalujete tam nebo při té grafické tvorbě se vracíte pořad na prohlížeč? Snad porozumíte.. díky

Tabulky mají sloužit pouze pro "tabulkové údaje". Ale troufám si říct, že na nich skoro každý začínal. Čili na pochopení pro úplné začátečníky (nekamenujte mě) doporučuji vyzkoušet nejdřív table-layout a zjistit, že si rozdělíš stránku na bloky (buňky jako ve Wordu) a do nich rozdělíš obsah, každá buňka může mít jiné pozadí, barvu...a poskládáš si jednoduchý web se "styly" v kódu (uvidíš, jak se každá buňka široká, vysoká, jakou má barvu ohraničení atp.) - něco podobného by šlo při troše zručnosti i ve Wordu :o)

Sám zjistíš (kromě jiného), že je to dost krkolomné a omezené řešení a plynule předeš k "beztabulkovému layoutu".

Jinak grafiku můžeš sestavit pro "tabulkový i beztabulkový layout", to je úplně jedno :o)

Původně odeslal Dreamweb4u ↪

Čili na pochopení pro úplné začátečníky (nekamenujte mě) doporučuji vyzkoušet nejdřív table-layout [...]

Musím nesouhlasit!

Když jsem se začal učit CSS, tak největší problém jsem měl právě s odnaučením „tabulkového myšlení“. Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.

Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.

Původně odeslal tracy ↪

Musím nesouhlasit!
Když jsem se začal učit CSS, tak největší problém jsem měl právě s odnaučením „tabulkového myšlení“. Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.
Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.

To záleží na tom, jak člověk ulpí na určitém přístupu, já to psal hodně
obecně a asi jsem vycházel ze svého postupu, kdy jsem se všechno učil
sám bez správného sledu. Mnoho známých mělo naprosto stejné začátky,
kdy tabulkový layout byl prostě intuitivním začátkem.

Vžijte se do role úplného začítečníka, který nemá doma knihu "jak na CSS", nebo "pokročilé techniky pro webové designéry",
nechodí na kurzy a nemá mu to kdo ve škole vysvětlit.

Původně odeslal tracy ↪

Neměl jsem problém se syntaxí ale s tím, že jsem si stránku stále představoval jako buňky tabulky. A to je velmi omezující.

To je přesně ono, to co jsem napsal. Určitě existuje cesta, jak se tomu
vyhnout, ale myslím, že úplný začátečník, který se tím nechce dlouhodobě
zabývat, jí hledat nebude.

Původně odeslal tracy ↪

Troufám si tvrdit, že i spousta samotných grafických návrhů bývá poznamenána právě tabulkovým myšlením.

Tak to musím souhlasit.

Než Word, který generuje opravdu nepřehledný a překomplikovaný kód, doporučoval bych (ač je sám nepoužívám) pro začátky nějaký kvalitnější a přitom zadarmový vizuální (Wysiwyg) editor - tuším, že docela použitelný (a nyní již i v češtině) je NVU, kdysi jsem začínal (a dlouho se mi líbil) na HTML editoru (umí zpětnou editaci tagů) a myslím i trochu CSS - důležité je, aby měl vestavěné zobrazení stránky vestavěné přímo v editoru (jasně že to doopravdy nestačí), což oba uvedené mají.

Taky bych se klonil k tomu začít na tabulkách ale co nejrychleji přejít na čisté CSS (tabulky si taky myslím, že jsou hlavně pro tabulky ;-) ) A pro opakovaný obsah (menu apod.) bych pro začátek doporučil Iframe (než Medvídku zjistíš, že úplně nejjednodušší je include v PHP).
Oddělování obsahu do formy (designu, uspořádání stránky) je trend, který rozhodně má jediný budoucnost.

Mluvím z pozice právě toho, který si html ošahával úplně od nuly bez jakékoli vnější pomoci a dobře si pamatuji, jak kdekterá samozřejmost mi připadala záhadná.

Snaž se oddělit obsah od formy. Nejdřív si promysli co na stránce bude, vytvoř si v html kostru s nadpisy různých úrovní, navigací atd. Mrkni se na ty různý wysiwygy co ti tu doporučují a zase se na nš rychle vykašli. Napsal jsem ti v rychlosti primitivní wysiwyg, který by ti mohl pomoci. Jsou tam dvě textarey do té první vložíš css a do té druhé html a spustíš, pak si s tím můžeš hrát. Můžeš třeba vlevo
zkoušet http://www.csszengarden.com/001/001.css nebo http://www.csszengarden.com/208/208.css (url je vždy ve tvaru 001/001) atd. je tam těch stylů stovky, do pravého okna si dej část zdrojového kódu odsud http://www.csszengarden.com/ myslím celé body včetně tagu body. No a tak dva týdny si s tím hraj a uvidíš. Editor je v příloze.

Zkoušel jsem několik Wysiwyg editorů a NVU se mi jeví jako jeden z nejlepších zadarmo. Jediné, co mi na něm vadilo, byly ty mezery v kódu, které nechává. Možná se to stalo jen mně, ale to bylo šílené. Z 150 "řádků" jich máte najednou 500 :banghead:

Původně odeslal hermanek ↪

Než Word, který generuje opravdu nepřehledný a překomplikovaný kód, doporučoval bych (ač je sám nepoužívám) pro začátky nějaký kvalitnější a přitom zadarmový vizuální (Wysiwyg) editor - tuším, že docela použitelný (a nyní již i v češtině) je NVU, kdysi jsem začínal (a dlouho se mi líbil) na HTML editoru (umí zpětnou editaci tagů) a myslím i trochu CSS

Původně odeslal Dreamweb4u ↪

Zkoušel jsem několik Wysiwyg editorů a NVU se mi jeví jako jeden z nejlepších zadarmo. Jediné, co mi na něm vadilo, byly ty mezery v kódu, které nechává. Možná se to stalo jen mně, ale to bylo šílené. Z 150 "řádků" jich máte najednou 500 :banghead:

Nvu má novou verzi- Kompozer, který mnohé problémy odstaraňuje ;)

a znate nekdo nejaky tutorialy (s pouzitim dreamweaveru, photoshopu a imageready), kde se užívá CSS pozicování, ne tabulek?
Nebo to s těmito nástorji nejde a musí se to dělat jinak? potom jak, nějaký návody tutoriály?
Díky.