« 1 2 »
Autor Zpráva
Stalker
Profil
Ukázkový web: www.ritc.ic.cz

Na výše uvedených stránkách mám v záložce Rank tabulku a chtěl bych ji posunout cca o 150px víš, vedle levého navigačního menu a nevím jak na to. Nějaké rady?

Problém je, že mám opakující se pozadí o velikosti 2px, které začíná až pod levým navigačním menu a pokud tabulku v html kódu posunu víš (například k 1.částí pozadí, kde mám header, navigaci apod. ), tak mi to udělá paskvil a pozadí se neopakuje.

Stejný problém mám pak i v záložce Forum s návštěvní knihou
Sir Tom
Profil
Stalker:
Je tam špatný layout, ale v aktuální situaci to můžeš vyřešit tak, že tabulce dáš position: relative a top: -200px. To znamená, že tabulka se vykreslí o 200px výše než by normálně se měla vykreslit.
Stalker
Profil
Špatný layout = špatná grafika? Tzn. tak, jak mám dělanou grafiku pro web (rozstříhané pozadí, které mi pak na sebe navazuje), tak tak už se to dnes asi nedělá, že? A v tom bude chyba, proto to v tomto případě můžu zamáslit funkcí relative, ale celkově jsem se neměl do této situaci díky pozadí dostat.

Chápu to správně?
Sir Tom
Profil
Stalker:
Ne. Špatná grafika tam není. To, že máš udělanou grafiku pro web, která je pak rozstříhána je v pořádku. To se dělá. Jenom ta struktura střihu je neobvyklá a právě relativní pozicování umožní obsah "vysunout" mimo střih. Když se podíváš na div #poz2, tak ten div začíná až tam, kde končí menu - což je pro obsah toho divu špatné. Normálně se layout (struktura webu) dělá tak, že pomocí pozicování (nebo floatováním) uděláš nejprve menu a pak vpravo od něj div s obsahem.
Stalker
Profil
Sir Tom:
Aha, akorát si to pro tento design nedokážu dost dobře představit. Vždy tam budu muset mít pod levým menu ten 2px proužek, kterej se bude opakovat a prostor vedle levého menu, napravo, budu muset stejně vyplnit ještě nějakým divem a vložil bych-li text do tohoto divu, tak se mi ten 2px proužek nebude stejně protahovat. Zřejmě to je ale složitý na vysvětlování takhle v textu ale chápu, co jsi tím chtěl říct. Tento projekt mě má naučit teprve základy a ukázat základní chyby. Pokud budu dělat něco v budoucnu, něco dalšího, vezmu si z toho poučení.


Tak pozicování s pomocí funkce relative funguje skvěle, přesně tak, jak jsem si představoval, akorát má jeden neduh. Koukněte do odrážky Forum. Tím, že jsme vlastně nastavili pouze pozici relative, tak tam těch 200px pod koncem návštěvní knihy zůstalo a je tam zbytečný prostor a vypadá to blbě. Dá se s tím vůbec něco dělat?
Sir Tom
Profil
Stalker:
Tím, že jsme vlastně nastavili pouze pozici relative, tak tam těch 200px pod koncem návštěvní knihy zůstalo a je tam zbytečný prostor a vypadá to blbě.
Já tam zbytečný prostor nevidím...
Stalker
Profil
Sir Tom:
Zapomněl jsem to nahrát na FTP. Už to tam je
Sir Tom
Profil
Stalker:
Zapomněl jsem to nahrát na FTP. Už to tam je
Není... Nikde pod forem není prázdné místo...
Stalker
Profil
Sir Tom:
Já ho tam mám. Možná jsem se špatně yyjádřil. Myslel jsem v záložce forum a až dole pod návštěvní knihou a před patičkou. Viz
Sir Tom
Profil
Stalker:
Já jej tam nemám. Nemám prázdný prostor, který je na obrázku. Koukni se na stránky pod jiným prohlížečem.
Stalker
Profil
Mam ho prave ve vsech prohlizecich a i jeden z mých známých ho tam má.
Sir Tom
Profil
Stalker:
Ano - už tam je. Ten problém je fakt způsoben tím relativním pozicováním. Těžko říct, jak jej spravit. Spíše bych doporučil změnit celý layout.
margin
Profil *
Sir Tom:
Těžko říct, jak jej spravit.
Místo relativního pozicování použít margin, v tomto případě margin-top: -200px;

Spíše bych doporučil změnit celý layout.
Taky si to myslím.
Stalker
Profil
margin:
margin-top: -200px; mi to celé rozháže.


Sir Tom, margin:
A jak byste ten layout řešili? Přeci jenom stále tam potřebuji mít to 2px pozadí, které se mi bude opakovat, protože se délka textu u novinek bude neustále měnit (závisí to na délce jednodlivých zpráv). A ten proužek může být až pod levým menu. Takže i kdybych to levé menu rozdělil na dvě části (levé menu a prázdné pole vpravo od něj) tak si tím vlastně ničemu nepomůžu.
Sir Tom
Profil
margin:
Místo relativního pozicování použít margin
To jsem už zkoušel a rozháže se to víc, než u toho relativního pozicování.

Stalker:
Ten web je vlastně tvořen ze 3 částí: hlavička, levý sloupec a pravý sloupec. V levém sloupci je menu a v pravém je obsah webu. Zkus si někde nanečisto vytvořit layout z těchto 3 částí tak, aby nahoře byla hlavička, vlevo sloupeček a vpravo sloupeček. Hlavička má jasně dané rozměry. Sloupečky mají jasně dané šířky, ale výška u nich je různá.
margin
Profil *
Stalker:
margin-top: -200px; mi to celé rozháže.
Máš pravdu, ale to je proto, že máš layout velice nešťastně řešený.
Už jednou jsi dostal radu, jak to udělat, ale ty sis práci zjednodušil a udělal jsi to jinak. Uznávám ze spousty rad, co jsi dostal (i v jiných vláknech) jako začátečník musíš být zmatený.
Správné zobrazení v IE
Nakódovat to půjde, ale tvůj layout není úplně triviální, ale nakódovat to jde. Vyjdi z http://qu.wu.cz/webtest/jednoduche-schema-stranky.htm.
Stalker
Profil
Dobře děkuji za rady. Zkusím to tedy ještě předělat a uvidíme, jak se mi to podaří.
Stalker
Profil
Bohužel s tím pozadím jaké mám to prostě nejde vyřešit tak, jak vy píšete.

- V levém menu se mi u středové svislé čáry kříží s čárami vodorovnými, tzn funkci repeat-y můžu udělat až pod tímto menu. No a na tom to všechno stojí.

- Kdybych chtěl udělat boční čáry jen 1px s fcí repeat-y, tak taky budu moci začít až nějakých 30px od vrchu, protože se ta čáru z úzké stává tlustší. Aby to šlo udělat jak vy říkáte, musel by být trochu jiný grafický návrh.
Sir Tom
Profil
Stalker:
Vyřešit to lze, nicméně nečekej, že to někdo zde vytvoří za tebe. :) Můžeš to sám zkoušet, nebo napiš do zde do sekce zakázek anebo napiš přímo mě e-mail a já ti za drobný peníz ten layout udělám.
margin
Profil *
Stalker:
V levém menu se mi u středové svislé čáry kříží s čárami vodorovnými
Ta čára nemusí být "středová" může být umístěná pod menu. Může probíhat obalovým elementem celého layoutu, ale v hlavičce nebude vidět díky pozadí hlavičky a hornímu vodorovnému menu. Tři hroty mohou být součástí hlavičky. Takže v hlavičce bys měl logo, pod ním menu a pod menu vodorovnou čáru a zmíněné tři hroty, třeba i v jednom obrázku, datově to je přijatelné a bude méně http požadavků, takže to vyjde skoro nastejno, jako při rozřezání na kousíčky.
Položky levého menu mohou mít toto pozadí a totéž pozadí může mít i celé menu. Popsaný postup neber jako jediný možný nebo nejlepší, ale jenom jako jednu z mnoha možností.
Menu se dělá jako <menu> nebo častěji jako <ul> (což chápeme jako seznam odkazů), položky jako <li> a pak jsou vlastní odkazy <a href="#">

Koukám, patičku už máš zvládnutou, web se ti správně natahuje podle obsahu.

Mimo dotaz, ve středním sloupci máš:
      <div id="stredtext">
        <strong class="newsdate">17.11.2012</strong>
        <p class="newstext">Po delší pauze začínám znovu pracovat na webu.</p><br /><br /> 
Což jde udělat lépe takto:
<div id="stredtext">
<h2>17.11.2012</h2>
<p>Po delší pauze začínám znovu pracovat na webu.</p>
A k tomu takový styl:
#stredtext h2 { 
color: #D40000;
font-size: 1.2em;
margin: 0px;
}
#stredtext p { 
font-size: 1.1em;
margin-bottom: 2.5em;
}
Takže místo strongu použiješ nadpis, dole odsadíš odstavec dolním marginem namísto dvou brejků a zbavíš se přemnožených tříd newsdate a newstext, protože budeš mít nadpisy a odstavce zaměřené kontextem.
panther
Profil
margin:
Což jde udělat lépe takto:
nemyslím si, že by tebou navržené řešení bylo „lepší“. Datum přeci není žádný nadpis. Co se CSS týče, tam by se s tebou dalo celkem souhlasit. Tzn., vyházet ty přebytečné třídy, <br> a stylovat skrz kontext.
Stalker
Profil
Sir Tom:
Já to ani nechci po někom vytvořit, protože to je spíš takovej "cvičenej" projekt, na kterým se chci něco naučit a když nespatří světlo světa, tak se vesměs nic nestane, ale jestli říkáš, že to jde, pak je to jedině dobře a musím se na to vrhnout sám.

margin:
Díky za jedno z řešení. Je dobré na to vidět jiný pohled, protože takto jsem já nepřemýšlel. Určitě to zkusím překopat a uvidíme co mi z toho vyjde, popřípadě se tady "pochlubím" s výsledkem, snad s rozumnějším výsledkem.

Jinak mi taktéž přijde, že až zbytečně moc používám divy, ať už ID nebo class. Tvůj návrh je jednodušší a nejsou tam zbytečné třídy. Myslím, že to není problém pouze tohoto kousku, ale že bych mohl celkově web zlehčit. Díky za návrh.

panther: Je pravda, že datum není nadpis, ale co jiného tam dát místo "h" ?
panther
Profil
Stalker:
ale co jiného tam dát místo "h" ?
má to být tučně, tak třeba <b>? Nic lepšího asi nevymyslíš.
Chamurappi
Profil
Reaguji na panthera:
Datum přeci není žádný nadpis.
V tomto případě nadepisuje obsah dalšího odstavce. Sám také ve výpisu novinek používám nadpisy. Proč ne?


Reaguji na Stalkera:
ale co jiného tam dát místo "h" ?
Šlo by udělat celý blok jako definiční seznam.
Stalker
Profil
panther:
Hm, nebo strong. V jednoduchosti je krása. Akorát, když budu ztučňovat i nějaký jiný text v novince, tak bych ho musel zvlášť nastylovat.

Chamurappi:
Vůbec neznám definiční seznam, ale vypadá to zajímavě. Akorát bych vymazal odsazení, ale to by nebyl žádný problém. Díky za nápad.
Stalker
Profil
Tak jsem po měsící z5. Pustil jsem se do předělání layoutu, snad už to mám správněji a bude mě to v budoucnu více poslouchat. Dělat menu přes seznam mi nešlo správně nastylovat, takže jsem od toho zatím opustil, mám spíš jiný, triviální dotaz.

Vzorová stránka

Odkazy jsou ještě nefunčkní, mě ale zajímá jak dostanu odkaz na levé straně "schedule" o 5-10px víš? Margin ani padding mi nefunguje, vůbec nechápu proč. Můžete mi prosím poradit?

Předem děkuji za odpovědi
Petr ZZZ
Profil
Jak máš tohle:
<div id="lmenu2">
  <a id="schedule" href="schedule.html" alt="Schedule">Schedule</a>
  </div>

tak tam zkus připsat například:

<div id="lmenu2">
  <p class="testuji"><a id="schedule" href="schedule.html" alt="Schedule">Schedule</a></p>
  </div>

a do CSS si dej třídu .testuji a nastyluj ji, třeba takhle nějak:
.testuji { margin:50px 20px 80px 30px; }

Lepší by ale bylo dělat menu jako <menu> nebo jako seznam <ul> (oboje s položkami <li>). A vůbec nejlíp uděláš, když dáš na marginovy rady (určitě se podívej na jednoduché schéma stránky, na které v [#16] odkazuje).

Mimochodem, alt="něco" se používá jen u obrázků; u jiných prvků piš title="něco" (funguje to spolehlivěji a odpovídá to specifikaci).

Mimo dotaz: Takovýto zápis...
#lmenu2 { width: 286px; height: 40px; margin-top: 5px; }
#lmenu3 { width: 286px; height: 40px; margin-top: 5px; }

...můžeš zkrátit:
#lmenu2, #lmenu3 { width: 286px; height: 40px; margin-top: 5px; }
jenikkozak
Profil
Vybírám z výpovědí Petra ZZZ:
u jiných prvků piš title="něco"
A nebo tam nepiš nic. Atribut title se stejným obsahem, jako je text odkazu, na nic není.

Mimo dotaz: Takovýto zápis...
Lepší by bylo v tomto případě použít třídu a aplikovat ji na všechny prvky, které chceš upravovat.
Pokud jsou všichni potomci určitého rodiče stejní, dá se použít selektor rodič potomek, třeba #menu a{width:286px}

tak tam zkus připsat například:
Než přidávat další nepotřebný prvek (odstavec; který podle mne v menu vážně nemá co pohledávat), spíše bych se přikláněl k vyházení i těch stávajících divů. Na nic tam nejsou, jejich styl se dá zapsat přímo k těm odkazům.
Petr ZZZ
Profil
Reaguji na jenikakozaka:
Však mu píšu, ať vyjde z Trejpova schématu, na které odkázal margin.

„Atribut title se stejným obsahem, jako je text odkazu, na nic není.“
Jistě. Šlo mi o sdělení, že alt nemá jinde než v obrázku co pohledávat. Co se týče title, úplně mimochodem nesouhlasím. Osobně mám docela rád, když se mi při najetí na odkaz ukáže bublina s nějakou informací o odkazu. Když se neukáže, vždycky je má první myšlenka, že jsem asi nějak špatně pohnul myší, nebo že je třeba chvilku počkat, a až po chvíli jsem ochoten se smířit s tím, že odkaz nejspíš žádný title nemá. Odhaduji, že mi stačí, když jeden z deseti odkazů má title, abych ho očekával všude.

„Lepší by bylo v tomto případě použít třídu a aplikovat ji na všechny prvky, které chceš upravovat.“
Podívám-li se na současný stav Stalkerova kódu a porovnám jeho situaci s mou vlastní zkušeností nabývání znalostí, obávám se, že takovou radu by mohl pochopit taky třeba až za půl roku. Pokusil jsem se vycházet ze současnému stavu, samozřejmě to jde udělat úplně jinak a mnohem líp.

Dodatek: Píšeš o třídě, ale v příkladu máš ID. Je to drobnost, ale začátečníka tím můžeš docela zmást.
jenikkozak
Profil
Petr ZZZ:
Co se týče title, úplně mimochodem nesouhlasím.
Já úplně mimochodem jo. Pokud není z textu v odkaze a textu okolo odkazu jasně patrné, kam odkaz vede, pak je něco špatně. Považuji to za tak velký nedostatek, že uvedení atributu title beru jako velmi chabou záplatu. Ten atribut může pomoci, pokud se správně použije. Například když najedu na odkazy v tomto vlákně, zobrazí se mi „drobečková navigace“ u odkazů vedoucích na doménu jakpsatweb.cz. Titulek, který pouze duplikuje text odkazu mi v ničem nepomůže. Považuji tento atribut za přeceňovaný, což kladu za vinu „seoodborníkům“, kteří odkaz bez title považují za polofunkční. Podobně jako Marek Prokop jinde si myslím, že za to může záměna atributu a elementu. Živá ukázka.

Podívám-li se na současný stav Stalkerova kódu a porovnám jeho situaci s mou vlastní zkušeností nabývání znalostí, obávám se, že takovou radu by mohl pochopit taky třeba až za půl roku.
Záleží na tom, jakou jdeš cestou. Nejprve asi ostyluješ prvky podle názvů značek - nadpisy, odstavce, odkazy, pak se přesuneš na užší výběry buď pomocí tříd a id, nebo podle zanoření. Každopádně bych to viděl na výuku v řádu desítek minut než měsíců.

Dodatek: Píšeš o třídě, ale v příkladu máš ID. Je to drobnost, ale začátečníka tím můžeš docela zmást.
Věta „Pokud jsou všichni potomci[...] obsahuje jinou myšlenku, proto je na jiném řádku. (Dvojí zalomení řádku používám pro odlišení adresáta svého sdělení - reaguji na citát, udělám dvě zalomení a píšu obecně nebo vytáhnu jiný citát.)
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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