Autor Zpráva
KaZaN
Profil
Ahoj,
v rychlosti jsem v ruce vyrobil web www.studio-katka.cz . Chtěl bych poprosit o celkovou lustraci, ale hlavně o radu jaká je nejlepší cesta k vycentrování,
Jak vidno použil jsem externí CSS a absolutní pozicování, protože to je pro mne nejjednodušší cesta k layoutu dle představy. Logicky toto nejde vycentrovat na obrazovce, což je chyba.
Zkoušel jsem i zdejší fígl s ID #centruj {width: 650px;margin-left: auto;margin-right: auto;} a relativním pozicováním, ale při rozložení více objektů mi přišlo pozicování šíleně pracné. Zkusil jsem tedy místo pozicování tabulku, ale tam jsem se dostal do podobné situace, kdy se pracnost markantně zhoršila.
Moje otázka tedy zní, lze nějak zajistit pozicování vůči "bodu nula" sloupce vytvořeného pomocí ID #centruj {width: 650px;margin-left: auto;margin-right: auto;} nebo nějak jinak pozicovat všechny objekty vůči JEDNOMU? Pokud je toto nesmysl, jak by jste řešili vycentrování?

Díky moc, už mi z toho houká (o:
Venca V.
Profil *
1. / Rozhodně nedělej stránku s jedním velkým obrázkem místo textu :-)
2./ K tvému dotazu: Pro body si nastav text-align:center - kvůli vycentrování v Msie, do deklarace pro div #centruj připiš text-align:left; aby obsah divu (tedy až tam nebude v podstatě jen ten obrázek;-)) nebyl zarovnaný na střed a připiš position:relative. Jakmile bude mít div #centruj nastavenou position:relative (případně absolute, ale to v tomhle případě nepoužiješ), bude se pozice všech prvků v něm obsažených počítat ne od levého horního okraje celého dokumentu, ale od okraje tohoto divu. Viz tzv. zanořená pozice.
KaZaN
Profil
Venca V. díky za tip
ad 1./ bylo to nejrychlejší a relativně efektivní řešení (o; Je to skutečně tak kompromitující způsob? Kvůli velikosti nebo proč? Počítám-li správně, vejdu se do 125kB komplet. Nebo mi vytýkáš spíš to, že ten text je obsahem obrázku? Vážně se ptám, obecně bych taky asi řekl, že je to čuněc, ale...
ad 2./ text-align: center nastaven mám v CSS souboru. Jen zrekapituluju, jestli jsem Tě pochopil správně, cílem je nastavit pro vnitřek toho ID #centruj zarovnání vlevo a příznak position relative a pak se mi vše "zanořené" v tomto DIVu bude pozicovat od leveho horniho rohu toho divu. Jestli je to taklhl ejednoduché, tak to si asi utrhnu hlavu, že se tu tak dlouho laboroval a nepodařil se mi (o: díky
KaZaN
Profil
Venca V. tak jsem si přečetl link od Tebe a skutečně to vypadá jako legantní řešení mého problému. Jen jedno mi není zcela jasné, jaký je důvod toho zarovnání vlevo pro ten DIV vycentrovaneho bloku? V tom příkladu http://www.jakpsatweb.cz/css/priklady/position-zanorena.html se to zdá být nepotřebné. Rozhodně to ráno vyzkouším
Díky
Venca V.
Profil *
To zarovnání textu doleva vážně nemá se zanořenou pozicí společného nic, ale když budeš mít pro body nastaveno text-align:center a nenastavil bys pro div #centruj text-align:left, tak tento div samozřejmě zdědí vlastnost nadřazeného prvku a všechny texty by se ti zarovnávaly na střed, což není zrovna nejlepší na čtení:-)

A k obrázkům místo obsahu: jeden (myslím nejdůležitější) příklad za všechny: vypni si v prohlížeči stahování obrázků a podívej se na stránku... Obrázky na webu by měly být jen jako doplněk, vylepšení vzhledu; rozhodně by neměly nést nejdůležitější obsahovou část webu a web by na nich neměl stát.
KaZaN
Profil
Tak už jsem našel chybu, zřejmě to nefunguje při použití #centruj a div id=centruj, ale jen s .centruj a div class="centruj". Ač v příkladu v jednom z ukázkovejch příkladů jsem to s ID viděl. Takže super, ještě to dočešu a centrování bude ready. Díky.

Nějaký další hrubky?
KaZaN
Profil
S obrázkem máš recht, klíčové informace jsou proto napsány ještě pod obrázkem pro případ zobrazení bez obrázku.
A zarovnání na střed je konkretne pro tuto stranku zadouci, pro podstranky jiz budu konvecnejsi, vcetne zarovnani doleva.

EDIT: Tak jsem promítl změny do ostrý verze, ještě jednou děkuju moc za navedení, to vycentrování mne trápilo už delší dobu (o;
S obrázkem provedu úpravu, že vymažu obrázko-text z něj a napozicuju tam text regulérní, je to správná metoda?
Kamil V
Profil
to už je apríl?

není jiné cesty: celé znovu a lépe! Udělat web celý obrázkem a pod něj zdublovat obsah textem je podivné (kdyby aspoň ten obrázek tvořící web stál zato)

v textu se furt opakuje "Stáhněte si..., Stáhněte si..., Stáhněte si..." - taková formulace na mě nepůsobí moc dobře, čekám, že se tam objeví "gatě".
KaZaN
Profil
KamilV ((((o: celé znovu a lépe, ano, ale jsou tam teď chyby v kódu nebo je to ok? Asi Ti došlo, že obrázek už existoval a na stránku se jen narouboval, aby to bylo rychle hotovo. Určitě sem nerobil obrázek, abych ho pak řezal a dával na stránku. Cílem bylo tam fofrem něco dát a následně vyrobit něco kvalitnějšího. Zastávám názor, že je lepší když to vypadá takhle (pokud ta nejsou chyby), než aby tam byl jen suše nabušenej jen ten text. Jsem amatér a tak upečení něčeho obstojnýho mi potrvá dýl, takže tohle je provizorní řešení. Nicméně než se vrhnu do předělávání, chtěl jsem ověřit, jestli nedělám v kódu nějaký základní chyby, které bych pak musel pracně odstraňovat ze všech výplodů.
Rozhodně díky za oprávněnou kritiku, pokusím se být nápaditějším.
Ano text z obrázku rozhodně zmizí a bude implantován tak jak má být.
Všechny "gatě" přesunu po dovyrobení stránek, které nyní "gatě" suplují do sólo sekce Gatě ke stažení (o;
Venca V
Profil
Buď si si změň doctype (viz doctype na JPW), protože rozhodně nepíšeš XHTML a vyházej lomítka z konců meta tagů, nebo doctype a lomítka nech a přepiš zbytek stránky do XHTML, což bude asi trošku pracnější :-)
<a href=/objects/... správně <a href="./objects/...

případně můžeš lomítko vypustit úplně, když se složka nachází ve stejném adresáři...
KaZaN
Profil
Díky, jdu na to. ...resp vlítljsem na to a teď je to snad už v pořádku, alespoň dle validátoru.
Kamil V
Profil
ještě drobnost: nadpis H1 bych nepsal natvrdo velkýma písmenama, je to záležitost grafická, podle mě by to mělo být tak jak "čeština káže" a teprve CSS stylem nastavit pro H1 všechna písmena velká
KaZaN
Profil
Super, provedu (o;
KaZaN
Profil
Hotovo, ještě mne trošku trápí font a jeho "tok" u těch odkazů/obrázků. Vlevo je to ok, tam je to zarovnany doleva k obrazkum, ale vpravo to je jen napasovany, ale kdyz si nekdo zvetsi pismo v prohlizei, ujede mi text do toho obrazku, nejde nějak ukotvit ten text koncem na misto, aby se zvetsoval doleva a ne do prava?
Venca V
Profil
Neber to moc vážně, ale třeba jen pro inspiraci, taková rychlovka ;-) odkaz...
KaZaN
Profil
Tvoje rychlovka vypadá o moc líp než moje asi tak 50x dýl trvající rychlovka (o;
Sákryš, teď sem tu rozpolcenej, kterou variantu zvolit
ověřenou, přehlednou a pěknou založenou na tý od Tebe
psychedelickou, kompaktní a ne zcela konvenční mojí
... a nebo to nějak sklíčit (o:
Shadowwolf
Profil
Ještě ad to centrování, dělával jsem to stejně, ale pak se mi zalíbilo:

div#vycentrovany {float: left; margin-left: 50%; width: X; position: relative; left: -X/2}
or
div#vycentrovany {float: left; width: X; position: relative; left: 50%; margin-left: -X/2}

... je to super, protože takhle můžeš floatovat i obsahující box.
KaZaN
Profil
StínovejVlkoush, taky dobrej způsob, hned to musím vyzkoušet (o;
KaZaN
Profil
Vence V co je to za font co jsi použil v tom "logu"/nadpisu? Můžu ten obrázek případně použít?
Venca V
Profil
Jestli se ti líbí můj pětiminutový zázrak z photoshopu, tak ho klidně použij:-) Font se jmenuje Book Antiqua.
KaZaN
Profil
Jo, myslel sem si to, že je to von... díky
KaZaN
Profil
Mel bych jeste prosbicku, trosku OT, nemohl by nekdo prevest ty loga značek kosmetiky z CDR do pruhlednejch PNG treba? Nemam Corel )O;

Dalsi vec, v IE se mi ukazuje nad mapkou bublina, ze po kliknuti se ukaze vetsi mapka, ale ve FF jaksi ne, jak domluvit tomu aby to ve FF ukázalo, že lze na to kliknout? A tayk jsem si všiml, že s emi ta mapa větší nepreloadne, ale to snad někde vykoumám sám.

Díkes.
Venca V
Profil
cursor:pointer;_cursor:hand - to ti udělá nad obrázkem ručičku jako nad odkazem.
http://www.jakpsatweb.cz/javascript/preload-obrazku.html
KaZaN
Profil
Super, packa je už tam, preload asap, dík za radu navedení.
KaZaN
Profil
Tak snad jsem zvládl správně i ten preload.
Přidal jsem náznak patičky, zatím se nefunkčními linky... ... ale myslím, že tudy cesta vede, přijde mi to lepší. Souhlasíte?
Teď už jen předělat ten vršek (o:
Mám v plánu dát loga značek až do patičky nad ty linky.
Samozřejmě platí, že texty mizí z obrázků, ale budou texty opravdovými.
Do středního prostoru vymyslím nějaké meníčko.
Asi se zbavím zelenosti přechodu a zůstanu jen u nějaké neagresivní žluté.
KaZaN
Profil
Neporadil by prosim nekdo v cem delam chybu v paticce? Nedari se mi vycentrovat text v ramci paticky, v IE mi to sedí dole a ve Firefoxu nahoře )o: . Zvolil jsem nějakou nevhodnou metodu? O tom, že neumím dát do jednoho řádku text na střed a ještě do pravého rohu (c)2007 aniž bych to pozicoval absolutně pokus omyl ani nemluvě )o:
KaZaN
Profil
Patička je vyřešena, pomohl padding, díky Vencovi V. za natrknutí (o;
KaZaN
Profil
Ještě jsem vyplodil nějaké dvě variace, nejspíš to dopadne v duchu té druhé. Barvy nejsou sladěny a odkazy nejsou ještě ve formě, řeším spíše lepší rozložení.
aktuální stav na "ostro" http://www.studio-katka.cz/
variace s logem od Venca V. http://www.studio-katka.cz/index2.html
lehce přeskládaná původní varianta http://www.studio-katka.cz/index3.html

BTW ta patička mne furt v IE zlobí a necentruje vertikálně )o:

Díky za názory...
Toto téma je uzamčeno. Odpověď nelze zaslat.