Autor Zpráva
Vaon
Profil
Cau vim ze se tu resilo neco podobneho ale ja mam o neco jinsi pripad...
na strance Odkaz a sirku horniho loga mam na 1680px. chtel bych aby byla roztahla pres celou obrazovku u vsech typech monitoru.
Dalsi dotaz se tyka ikony pod menu...
chtel bych ji mit na modrem pozadi ale kdyz ji tam pres css dam tak se za nej schova. neni naky kod ktery by ji dostal do popredi?
Dik za odpoved
KoLi
Profil
Vaon:
sirku horniho loga mam na 1680px. chtel bych aby byla roztahla pres celou obrazovku u vsech typech monitoru.
Dalsi dotaz se tyka ikony pod menu...


Šířka loga rozhodně není 1680 px. Tvoje logo (nepleť si to s hlavičkou) má šířku 659 px. A proužek, který považuješ za logo, jsi už správně roztáhl na 100% šířku. Ovšem tvé řešení moc šťastně neni viz
 <img height="115" width="100%" src="logob.jpg">
Mnohem lepší by bylo to řešit jako <div id="head">uvnitř absolutně pozicované logo</div> a v CSS pak #head {width: 100%;height: 115px;background: url(prouzek.jpg) repeat-x;}

chtel bych ji mit na modrem pozadi ale kdyz ji tam pres css dam tak se za nej schova. neni naky kod ktery by ji dostal do popredi?
Vkládáš to tam správně, ale to tvoje všudeabsolutní pozicování je fakt nepraktický a hnusný. Pozicuj spíš relativně, i to menu nad tim, vyznáš se v tom pak líp. Zkus se někde podívat na hotová řešení a uč se z toho.
panther
Profil
KoLi:
Mnohem lepší by bylo to řešit jako <div id="head">
proč ne pozadí na body? Ušetřili bychom zbytečný div#head. Tedy alespoň v tomto případě, záleží, co tam má být dále.

ale to tvoje všudeabsolutní pozicování je fakt nepraktický a hnusný. Pozicuj spíš relativně
jaká je výhoda relativního pozicování oproti absolutnímu. Pro začátečníka prašť jak uhoď. Když už něco doporučit, tak studium floatu a clearu, případně komplet řešení.
KoLi
Profil
panther:
jaká je výhoda relativního pozicování oproti absolutnímu Pro začátečníka prašť jak uhoď.
Začátečníka bys měl směrovat správný směrem, takže doporučení na relativní pozicování je určitě na místě.

Když už něco doporučit, tak studium floatu a clearu, případně komplet řešení.
Na hotová řešení jsem ho odkázal a myslím si, že vygooglit css hotová řešení umí každý. Když se na nějaké takové řešení podívá a bude se o něj trochu zajímat, tak si určitě už sám dohledá, co to je float a clear.
Trejpa
Profil
KoLi:
doporučení na relativní pozicování je určitě na místě
Nedávno jsme se tu s Chamurappim bavili, kde berou začátečníci názor, že by se k tvorbě základního rozvržení stránky mělo použít relativní pozicování. Vysvětli mi prosím, v čem je pro tvorbu základního rozvržení stránky relativní pozicování lepší, než rozvržení pomocí plavání nebo absolutní pozice.

Je nějaká výuková stránka nebo kniha, kde autor nabádá k používání relativně pozicovaného rozvržení? Doporučoval ti to snad někdo nebo jsi na to došel sám? Doopravdy by mě to zajímalo. Mám totiž názor (nejen já), že relativní pozicování je k tvorbě rozvržení stránky naprosto nevhodné, takže bych si rád přečetl argumenty těch, co to používají nebo doporučují.


Vaon:
Takto se stránka z malých kostiček neskládá. Základem jsou velké bloky (hlavička, menu, obsah, patička), kterým se podle potřeby nastaví rozměr a jejich vzájemnou pozici určí plavání (případně absolutní pozice). Jejich obsah už se nechává volně plynout.

Máš tam pár chyb:
1) Do řádkového elementu, jako je tučné písmo <b> a nastavení písma <font>, nemůžeš vkládat odstavce <p>.
2) Ve značce <font> ti přebývají atributy font, to tam nemá co dělat.
3) Ztučnění zvýrazňuje text. Zvýrazníš-li vše, není zvýrazněno nic.
4) Bylo by vhodné zadat všem (významným) obrázkům alternativní textový popis (atribut ALT), aby se jejich textový význam dozvěděli uživatelé bez obrázků a hlavně vyhledávače. Zejména v menu a nadpisech to vadí.
5) Chybí ti tam údaj o kódování češtiny (značka <meta>).


Malá ukázka do začátku:
(při zachování levého zarovnání, na střed by to bylo trošku jinak)

<html><head>
<meta http-equiv=content-type content="text/html; charset=windows-1250">
<title>nemám facebook</title>

<style>
body, h1 { margin: 0; padding: 0; }
body { background: white url(logob.jpg) repeat-x top; font: 100% Calibri; }
#vse { background: url(menub.jpg) repeat-y left; width: 695px; }
#vlevo { float: left; text-align: center; width: 150px; min-height: 300px; }
#vpravo { margin: 1em 20px 1em 170px; }
.urgent { clear: left; background: white; padding: 1em; }
h2 { font-weight: bold; font-size: 3em; margin: 0; }
</style>

</head><body><div id=vse>
  
<h1><img src="logo.jpg" height=115 width=695 alt="nemam facebook"></h1>

<div id=vlevo>
<img src="menu.jpg"><br>
<a href="index.html"><img src="domus.jpg" onmouseover="this.src='domuf.jpg'" onmouseout="this.src='domus.jpg'" border=0></a><br>
<a href="cojsme.html"><img src="cojsmes.jpg" onmouseover="this.src='cojsmef.jpg'" onmouseout="this.src='cojsmes.jpg'" border=0><a><br>
<a href="videa.html"><img src="videas.jpg" onmouseover="this.src='videaf.jpg'" onmouseout="this.src='videas.jpg'" border=0></a><br>
<a href="http://www.jakpsatweb.cz"><img src="http://www.jakpsatweb.cz/images/button_blue.gif" border=0 alt="Jak psát web" width=88 height=31></a>
</div>

<div id=vpravo>
<h2>Novinky</h2>
<p>Text stránky v odstavcích
<p>Další odstavec
</div>

<div class=urgent>
PRUH S REKLAMOU
</div>

</div></body></html>
pavuk
Profil
Trejpa:
kde berou začátečníci názor, že by se k tvorbě základního rozvržení stránky mělo použít relativní pozicování

Přestože považuju JPW za takovej základní zdroj a skoro učebnici, myslím že na vině je nechtěně Yuhů... Float a clear nejsou na JPW nijak zvlášť vytažený jako základní kameny stavby layoutu a kdo jako začátečník hledá jak seskládat web z částí, prakticky pokaždý dojde na stránku "Příklad sloupcového designu pozicováním"...
Vaon
Profil
Dik moc za rychle odpovedi... tomu logu jsem dal 100% a zrusil sem pozicování u loga a menu a jede to.
Trejpa
Profil
pavuk:
To není pravda. I když float s clearem Yuhů příliš nepopularizuje, protože, jak již několikrát psal, mu na rozdíl od absolutního pozicování nepřirostlo plavání k srdci, tak v uvedeném příkladě ani nikde jinde relativní pozicování ani absolutní pozicování maličkých bloků (jako má nyní Vaon pozicovanou každou položku v menu) nepoužívá a nedoporučuje. Nicméně příklad na rozvržení plaváním prý napíše.
KoLi
Profil
Trejpa:
Vysvětli mi prosím, v čem je pro tvorbu základního rozvržení stránky relativní pozicování lepší, než rozvržení pomocí plavání nebo absolutní pozice.
Však jsem psal, že to je doporučení nebo směrování správným směrem (myšleno do budoucna), nebo snad není?
Trejpa
Profil
KoLi:
to je doporučení nebo směrování správným směrem (myšleno do budoucna)
Není. Zajímalo by mě, proč si to myslíš.
KoLi
Profil
Trejpa:
Z vlastní zkušenosti. A taky z předpokladu, že začátečník se bude chtít nějakým způsobem vyvíjet kupředu.
Chamurappi
Profil
Reaguji na KoLiho:
Z vlastní zkušenosti.
Nešlo by to konkrétněji? Já mám zkušenost, že relativní pozicování posouvá začátečníky spíš výrazně dozadu.
KoLi
Profil
„Nešlo by to konkrétněji?“
Jde o to, že jsem se učil kódovat možná nestandardním způsobem oproti ostatním. Dělal jsem si rozbory kódu již hotových webových stránek a pak jsem si je v PSPadu upravoval a koukal, co to dělá. Pokud jsem se o nějaký css vlastnosti chtěl dozvědět něco více, pak tu pro mě byl jakpsatweb. Píšu to proto, že právě na těchto stránkách jsem už od počátku narážel na relativní pozicování a mně to žádný problém na pochopení nedělalo, v podstatě mi to přišlo logický oproti absolutnímu, kde musíš pořád vypisovat souřadnice.
panther
Profil
KoLi:
že právě na těchto stránkách jsem už od počátku narážel na relativní pozicování
protože Yuhů rád pozicuje, což je známá věc. Pro začátečníka je to věc nevhodná, navíc se tam dá udělat více chyb, než ve floatovaném layoutu, pokud se pochopí princip. A pochopení principu, jak jednotlivé CSS vlastnosti fungují, je základ - kdo nezvládne toto, měl by si hledat jiného koníčka.
Trejpa
Profil
KoLi:
v podstatě mi to přišlo logický oproti absolutnímu, kde musíš pořád vypisovat souřadnice.
Aha. Takže z této věty a rozborem několika stránek, které jsi tu předváděl, mi konečně došlo, že relativnímu pozicování vůbec nerozumíš.

Na stránkách používáš vystředěné plovoucí rozvržení. To, že každému druhému bloku na stránce nastavíš position: relative, ze stránky relativně pozicovanou nedělá. Bez uvedení pozice (top, left, bottom nebo right) jsou ty position: relative naprosto k ničemu (takto umožňují jen ukotvit absolutní pozici, ale to ty stejně nepoužíváš).

Relativní pozice znamená, že se z místa, kam původně daný prvek patřil, tento vytrhne a posune se daným směrem. Okolní objekty a text se k relativně pozicovanému prvku chovají tak, jako by byl na své původní pozici, běžně tam tedy po něm zůstane prázdné místo.

Teď si vyzkoušej, že na svých stránkách můžeš position: relative bez uvedených rozměrů smazat a nic se nezmění. Opravdu neděláš relativně pozicované layouty.



na těchto stránkách jsem už od počátku narážel na relativní pozicování
Kde to Yuhů doporučuje?
CSS pozicování: „Obecně doporučené použití relativní polohy neexistuje, používá se většinou jako taková legrácka.
Position: „Position: relative je dobrá na tři věci: 1. posunutí prvku trochu jinam… 2. vytvoření … omezujícího bloku… 3. …odstraňuje vykreslovací chyby…
Vystředění prvku pozicováním: „Nepříjemnosti obou způsobů: vyjmutí z toku dokumentu, při úzkém okně není vidět levá část.
KoLi
Profil
Trejpa:
Aha. Takže z této věty a rozborem několika stránek, které jsi tu předváděl, mi konečně došlo, že relativnímu pozicování vůbec nerozumíš.
Narážíš na rok starý post na zhodocení o MyPSP? Od 14 let jsem se něco přiučil. Asi jsem se tady špatně vyjádřil, ale odmítám to, že nerozumím relativnímu pozicování.

Bez uvedení pozice (top, left, bottom nebo right) jsou ty position: relative naprosto k ničemu (takto umožňují jen ukotvit absolutní pozici, ale to ty stejně nepoužíváš).
Třeba jsem to absolutní pozicování (a ano, teď narážim na MyPSP) dříve na nějakých podstránkách používal z důvodu přesného zarovnání s nějakým jiným prvkem a pak jsem to zapomněl smazat.

„na těchto stránkách jsem už od počátku narážel na relativní pozicování“
Kde to Yuhů doporučuje?
Neměl jsem na mysli jakpsatweb.cz ale ty stránky, odkud jsem čerpal ze zdrojového kódu.

A vůbec, asi už se k tomu dál vyjadřovat nehodlám.
Chamurappi
Profil
Reaguji na KoLiho:
Měl bys ukázku nějaké dobře nakódované stránky s relativně pozicovaným layoutem?
Neber si to osobně — nás opravdu zajímá, jestli existuje nějaká šance, že by to byl dobrý směr vývoje pro začátečníka, protože už jsme viděli značné množství webů, kde relativní pozicování vedlo k naprosto nežádoucím (a z pohledu autora neřešitelným) stavům — třeba nedávno tady.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0