| Autor | Zpráva | ||
|---|---|---|---|
| Felix Profil * |
#1 · Zasláno: 27. 11. 2011, 21:01:05
Dobrý den.
Teprve se učím html a css. Nicméně vytvořil jsem si jednoduchou konstrukci webu bez rozsáhlého obsahu a narazil na pro mne zajímavý problém. Web je sice horizontálně centrován ale nikoli vertikálně. Při větším rozlišení monitoru či fullcreenu (bez toolbarů a lišt) se v prohlížeči stále a stále kotví na horní okraj stránky. Chtěl bych aby byl na středu. To co jsem sestrojil je k nahlédnutí na http://fexcorp.com Prosím o jakékoli návrhy i kritiku.Ps: Nechtěl jsem standardní web z pow..poi.. atd s klasickým menu. Skusil jsem toho hodně a stále hledám nějakou možnost. |
||
| Someone Profil |
#2 · Zasláno: 27. 11. 2011, 21:04:25
Pokud je výška webu pevně dána tak stačí
position: relative; top: 50%; margin-top: -výška webu |
||
| Medvídek Profil |
#3 · Zasláno: 27. 11. 2011, 21:09:32 · Upravil/a: Medvídek
Someone:
Což není 100% funkční řešení. Felix: Koukni sem: http://stylizedweb.com/examples/verticalaligndiv.html |
||
| Felix Profil * |
#4 · Zasláno: 27. 11. 2011, 21:38:57
Jé přesně tak jsem to myslel jestli to dobře chápu tak jsi uzavřel do dvou divu taky jsem to skoušel ale nějak to nevyšlo. Pokaždé se mi rozhašilo zarovnání odkazových obrázku a při změně velikosti okna se posouvali teď jsou statické jen je znovu napozicuji a uvidím. Díky moc.
|
||
| Felix Profil * |
#5 · Zasláno: 27. 11. 2011, 21:52:03
Tak ozkoušena 2há možnost a o výsledek se můžete podívat teď se to zarovnává ke spodní straně :)
|
||
| Felix Profil * |
#6 · Zasláno: 27. 11. 2011, 22:11:11
Pardon bylo to nahrané pod index2 už to tam je pod index.html. Nějak to stále nesedí. Má vize byla něco jako margin: 0px auto;
Jenže to zarovná pouze pravou a levou stranu na zbilý nevyužitý rozměr po 50% volného místa nejde to nějak zadat i pro top a bottom? |
||
| Felix Profil * |
#7 · Zasláno: 27. 11. 2011, 23:53:04
Tak jsem to prozatím vzdal ..:( hodil jsem tam původní akorát jsem ořízl obrázek nad pozadím. Mám ale ještě jednu prosbu.
používám <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> (standard) při zobrazení v "opera 11.52; IE 8" se vše zobrazuje jak má v IE<8 testováno na 6 pochopitelně to neběhá :) to teď neřeším ale v Mozzila Firefox je ikonka tlačítek posunuta asi o 1 px doprava dělá to jen tl. "frendly sites" a nějak jsem nepřišel na to proč jestli by někdo mohl kouknout zda tam mám někde chyby prosím. Či jestli to mohu nějak poupravit aby to šlo. předem děkuji za postřehy a nápady. |
||
| Trejpa Profil |
#8 · Zasláno: 28. 11. 2011, 14:23:54
Felix:
„Ahoj, máš zastaralý prohlížeč, koukej si ho hele aktualizovat. :)“ Svádět svou neschopnost na prohlížeč nebo návštěvníka není zrovna profesionální. „na 6 pochopitelně to neběhá“ Ale běhá, jen to zatím neumíš. Stačí přepnout všechna IE do standardního režimu (od verze 6) vhodně zvoleným !doctype, třeba <!DOCTYPE HTML>.
|
||
| Felix Profil * |
#9 · Zasláno: 28. 11. 2011, 21:11:09
IE jsem nikdy nepoužíval, kecám ano používal asi před 15ti lety.(doopravdy) Ano dal jsem tam tu větu čistě jen proto že optimalizaci jsem ještě nedělal, Kouknu se na ni jak si vyhradím kousek volného času. Já jsem jen ITčkař a weby se začínám učit pro svůj zájem rozšířit si obzory. Není to neschopnost jak píšeš pouze nedostatek znalostí.
Do teďka jsem žil v představě že i <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> je přepnutí všech prohlížečů do standardního módu, i když si odmyslím dtd pro validátor. Ale doopravdy se tímto začínám učit a rád si poslechnu jakoukoli kritiku připomínku, ale nejraději radu |
||
| Felix Profil * |
#10 · Zasláno: 28. 11. 2011, 21:13:02
Jen ještě k tomu "testováno na IE 6, pochopitelně to neběhá (Protože to nění dodělané je to jen hrubá kostra.)
|
||
| Felix Profil * |
#11 · Zasláno: 29. 11. 2011, 22:09:02
Medvídek: Děkuji ještě jenou. Pomalu přepisuji zdroj.k. a je to zdá se na dobré cestě
|
||
|
Časová prodleva: 3 dny
|
|||
| Felix Profil * |
#12 · Zasláno: 2. 12. 2011, 19:28:25
Tak zdroj mám hotový. Funguje to pod operou, IE8, IE6, chrome, safari, Bohužel u mozilli jsou tlačítka posunuta asi náhodou nevíte prosím proč?
|
||
| Felix Profil * |
#13 · Zasláno: 2. 12. 2011, 19:29:03
Trejpa: Ty "Hlášky" jsem odstranil
|
||
| Felix Profil * |
#14 · Zasláno: 2. 12. 2011, 20:45:00
Tak už je to všude stabilní a zdá se že správně zobrazené jen v opeře je to o 1 pixel posunuto nahoru. nevíte někdo jak definovat css jen pro operu? :)
|
||
| ng9 Profil |
#15 · Zasláno: 2. 12. 2011, 21:01:31 · Upravil/a: ng9
Co jsem se začal učit css tak jsem byl nešťastný proč se to vykreslovalo v různých prohlížečích různě, na vině byl špatně zvolený doctype. Tím se hodně vyřešilo, pak jsem se naučil resetovat na standartní hodnoty globálně v css a od té doby nemám problém s tím, že by to vypadalo jak nemá ... v každém css začínám následovně:
* {
font-family:'arial';
font-size:12px;
padding:0px;
margin:0px;
}
podle potřeby se tak dají vyresetovat mnohé věci tak, aby to bylo všude naprosto stejné. Od té doby žádné hacky pro konkrétní browsery nepotřebuji. Třeba ti to ulehčí začátky s css. |
||
| Davex Profil |
#16 · Zasláno: 2. 12. 2011, 22:51:23
ng9:
„pak jsem se naučil resetovat na standartní hodnoty globálně v css“ Hvězdičkový reset není to moc dobrý nápad, protože se rozbíjí formuláře. |
||
| ng9 Profil |
#17 · Zasláno: 2. 12. 2011, 23:22:41
Davex:
To není tak úplně pravda. Resetování marginu a paddingu se formulářů nedotkne a nerozhodí je. Vyresetují se na výchozí vzhled až např. resetováním borderu - což pokud nepotřebuji, nedělám. To co jsem poslal odladí nepříjemnosti jako o 1px posunuté prvky v určitých prohlížečích. |
||
| Felix Profil * |
Já mám css
* {
margin:0px auto;
padding:0;
} |
||
| Felix Profil * |
#19 · Zasláno: 2. 12. 2011, 23:56:24
Vymažu li "auto" tak se to opravdu rozhodí a zarovná ke kraji. Asi se spokojím že to všude jde a v opeře je to posunuté. Jen by mne zajímalo čím že to.
|
||
| Someone Profil |
#20 · Zasláno: 2. 12. 2011, 23:59:02
Nepročetl jsem všechny příspěvky, ale tak nástřelem bych zkusil:
margin: 0px auto 0px auto; |
||
| Chamurappi Profil |
#21 · Zasláno: 3. 12. 2011, 13:16:18
Reaguji na Medvídka:
„Což není 100% funkční řešení.“ Za předpokladu, že Someone (v #1) myslí „výškou webu“ půlku známé výšky webu a že mají všichni rodičové určenou výšku, v čem je háček? Reaguji na ng9: „To není tak úplně pravda.“ Je. „Resetování marginu a paddingu se formulářů nedotkne a nerozhodí je.“ Ukaž, jak srovnáš s vynulovaným marginem zarovnání zaškrtávátek s textem na řádku, aby sedělo ve všech prohlížečích.
Reaguji na Felixe: „Tuším že první chyba bude chybějící "px"“ Za nulou být nemusí. „co s tím "auto" mám jej vymazat?“ Asi jo. Vodorovně centrovat všechny elementy je trochu nesmysl. Reaguji na Someone (#20): Nějak jsem nepostřehl, kde se změnilo téma z vertikálního zarovnání na horizontální… |
||
| Felix Profil * |
#22 · Zasláno: 3. 12. 2011, 14:20:32
Zdrojový kó je k nahlednutí na webu je docela jednoduchý bez nějakých zdlouhavých obalů. Jediné co mě zatím nějakým způsobem trápí je že opera posune"tlačítka" o pixel nahoru. Asi to tak nechám v mozile a chrome to běhá v pořádku na testovaných IE také.
Pokud by někdo znal způsob který funguje pro čtení opery z css něco jako @opera... koukněte prosím do kódu a řekněte mi jak to upravit. Jinak poprosím o neuzamikání topicu. Připisoval bych sem průběžně nějaké "neřešitelné" drobnosti na které ještě zcela jistě narazím. Z jiného soudku co by jste mi na víše zmíněném webu vytkli? |
||
| Davex Profil |
#23 · Zasláno: 3. 12. 2011, 14:32:29
Felix:
„Připisoval bych sem průběžně nějaké "neřešitelné" drobnosti na které ještě zcela jistě narazím.“ Už teď je toto téma ve špatné kategorii, takže ho přesunu do kategorie CSS. V zájmu udržení přehlednosti doporučuji pro další problém, který nebude s tímto souviset, založit nové téma ve vhodné kategorii. „Z jiného soudku co by jste mi na víše zmíněném webu vytkli?“ Od toho tu je kategorie Názor na stránku. |
||
| Felix Profil * |
#24 · Zasláno: 3. 12. 2011, 17:00:36
Davex: jj díky
|
||
|
Časová prodleva: 12 let
|
|||
0