jQuery a problém s IE7 a nižšími

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod 4daPeace 2. 6. 2010 15:19

Dobrý den,

hned na začátek podotknu, že jsem lajk a samouk, co se týče tvorby webu. Pomocí Microsoft Expression Web 3 (MEW3) jsem si vytvořil webové stránky http://www.bednarikphoto.com. Jak vidíte, na úvodní straně je měnící se galerie vytvořená pomocí jQuery innerfade (staženo odtud: http://medienfreunde.com/lab/innerfade/). Měl jsem problém s vycentrováním tohoto jquery - nezabral mi žádný MEW3 příkaz, jako jediné funkční se nakonec ukázalo být otrocké mačkání mezerníku, které mi to posunulo cca do středu stránky. V Maxthon3, IE8, Chrome se web objeví správně. Když ho ovšem otevřu v IE7 a nižším (výborný program na testování kompatibility v IE je IETester), fotky jsou zobrazeny extrémně napravo.

Může mi někdo poradit, jak dosánout kýženého vycentrování ve všech jmenovaných prohlížečích? Děkuju.
4daPeace
Junior

Odeslat příspěvekod NefroniK 2. 6. 2010 15:33

V prvom rade by som ti doporucal - ked si samouk - studovat tvorenie webu priamym pisanim zdrojoveho kodu a nie nejake podivne programy ;-) Ta stranka ktoru si vytvoril (homepage) by ti zabrala asi tak 15 minut prace.

Ked zmazes tie pevne medzery tak ti to nefunguje len v IE <= 7 alebo aj v ostatnych prehliadacoch?
NefroniK
Junior

Odeslat příspěvekod 4daPeace 2. 6. 2010 16:01

Kdyz smazu ty pevne mezery, tak to nebude uprostred, ale zarovnano doleva. Vse vsech prohlizecich.
4daPeace
Junior

Odeslat příspěvekod K8 2. 6. 2010 16:32

a jak to dopadne, kdyz zmenis velikost okna? taky to pak nebude uprostred....
pevnymi mezerami jsi to vycentroval na stred jen pro tu jednu velikost okna
doporucuji se podivat na http://interval.cz/hotova-reseni/pro-css/ a neco z toho si vybrat
K8
Pokročilý

Odeslat příspěvekod 4daPeace 2. 6. 2010 17:43

OK, zkusil jsem tam implementovat s malými úpravami tohle http://interval.cz/clanky/horizontalni-zarovnani-stranky-o-pevne-sirce-na-stred/. Výsledek je lepší, nemění se ani při změně velikosti okna, ale není to střed:

Obrázek
4daPeace
Junior

Odeslat příspěvekod K8 2. 6. 2010 18:17

no pokud to ma fungovat pri ruzne velkem oknu, tak pak to nemuze byt zarovnani stanky s pevnou sirkou - ta se prave meni
K8
Pokročilý

Odeslat příspěvekod 4daPeace 2. 6. 2010 18:35

Takze jsem dal s plovouci sirkou, nastavil to na
Kód: Vybrat vše
body
{
margin: 0;
padding: 0;
}
#obal
{
margin: 0px 25%;
}


Totalne spatne se to zobrazuje akorat v IE5.5, ale to neni problem. Problem je, ze i v IE6, IE7 i Opere se to znatelne zobrazuje o neco nalevo, v kazdem o trochu jinak. Maxthon3 a Chrome jsou vyborne. Druhy problem je, ze pri zmene velikosta okna se to ted zase nedrzi na miste.
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 18:45

dej
Kód: Vybrat vše
#portfolio {width:500px;margin:0 auto 0 auto}


jinak tě ve webech čeká ještě dlouhá cesta ;-)

-- 2. 6. 2010 18:47 --
a používáš nestandardní fonty, mě se např. zobrazí menu v Times new roman
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 18:49

Diky, ale kde presne to mam dat? K tomu minulemu na misto #obal ?
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 18:54

do sekce
Kód: Vybrat vše
<style type="text/css">
jak tam máš style1, style2, style3.
Asi k tomu minulému, nevím co jsi měnil. Každopádně ul tag, konkrétně id portfolio nebyl nijak nastylovaný, tak se pak není čemu divit.
To co jsem postnul výše tomu tagu ul nastaví pevnou šířku jen o málo větší jak samotné obrázky, a nastaví mu margin zleva a zprava na auto, což způsobí zarovnání na střed.
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 19:05

Super! Funguje to! Jednoduche a elegantni reseni, dekuju. Minule doporucovane jsem smazal, vymazal ty moje spacebar mezery a vlozil mezi styly ten tvuj kod.

Bude ten nulovy margin fungovat i na automaticke zarovnani textu? Na odkazu nize je videt, jak to ted vypada, ten dolni text je trochu mimo...
http://www.bednarikphoto.com/test.html

EDIT: A jeste jsem si vsimul, ze u prvniho obrazku (kocka) je ten spodni text moc blizko, ale kdyz se zmeni, posune se text zpatky dolu?
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 19:27

text na stránce už vycentrovaný máš. Spíš nejsou vycentrované ty 450px široké obrázky vrámci toho 500px ulu portfolio. Takže do portfolio ještě přidej ; text-align: center.

"posune se text zpatky dolu" - proc? nic se samo posunovat nebude. Pokud ten spodni text chces vic dolu, tak misto te druhe nuly v #portfolio nastav treba 20px
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 20:12

Promin, to nebyla otazka, ten text se fakticky posune bliz obrazku kocky a u dalsich obrazku se vrati na puvodni misto (viz. ten odkaz na test.html)

Pridani toho
Kód: Vybrat vše
; text-align: center
neudelalo zadnou zmenu.
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 20:26

možná to tak dělá v ostatních prohlížečích, já se díval jen ve FF.
Potom tomu ulu stačí nastavit pevná výška, dej do #portfolio ještě
Kód: Vybrat vše
; height: 330px


a "; text-align: center" tam určitě nech, to zajišťuje přesné zarovnání obrázku na střed (možná to bylo v jiných prohlížečich "správně", ale to nebylo korektní chování)

btw. kde to tak dělá? koukám Opera, FF, IE8, ten spodní text se ani nehne i bez toho height...
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 21:14

EDIT: Asi je to 100% vyreseno k obrazu memu, zmenil jsem width z 500 na 450:

[code]#portfolio {width:450px;margin:0 auto 0 auto;text-align: center; height: 330px}[\code]

Muzes to zkontrolovat u tebe? (test.html)

EDIT2: Tak ne, v IE7 a IE6 se to zobrazi vyrazne (ale mene nez drive) doprava. Pro dnesek uz na to kaslu. Ve vsech jinych prohlizecich to je dokonale. Sakra prace. Dik za pomoc.
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 21:31

jj, chtěl jsem ti radit bez těch 450, protože 450 je myslím šířka čistého obrázku a ty okraje se můžou oříznout, ale koukám že ne, i když vnější objekt přesahují. Takže ok, v rámci možností.

ještě nezapomeň, že nepoužíváš písmo, kteří mají na pc i ostatní, takže se hodí do CSS dopsat a,a:link,a:hover,a:active { font-face: něco, něco2, Arial; }, kdy se písma pokusí prohlížeč vykreslit v pořadí něco, pokud v systému není, tak něco2, a pokud taky není, zvolí Arial, který ma každý
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 21:44

Jezis, diky. Muzes jenom zase upresnit, kde presne to patri? A jenom doplnkovy dotaz: Proc kdyz kliknu na 'O mne', tak se ten vrsek (logo, email, telefon, odkazy na galerie) lehounce posune (rozsiri?). Tu stranku 'O mne' jsem vytvarel z defaultni, veskery kod by tam mel byt stejny, jen krome jquery je obycejny text.
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 22:01

protože ti vpravo přibyde posuvník stránky...

--
kam presne? to je celkem fuk, treba jako dalsi radek za #portfolio

a jako dalsi radek dej
html { overflow-y: scroll; }
to by melo vynutit zobrazeny posuvnik i kdyz neni potreba
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod 4daPeace 2. 6. 2010 22:23

OK, zkusim a s tim posuvnikem me to nenapadlo... Kdyz to tam nemam, tak jak to vypada pro nekoho, kdo nema to me pismo? To se vubec nezobrazi text? Nebo rozsypany caj? Na pocitaci u pritelkyne (ktera ta doplnkova pisma nema naistalovana) se to zobrazuje totozne jako u me...tak nevim. Kdyz budes potrebovat neco vyfotit, tak se ozvi ;)
4daPeace
Junior

Odeslat příspěvekod babca 2. 6. 2010 23:08

Už jsem to psal ve 21:31, zvolí se další v pořadí. V případě, který jsem uváděl, to bude třeba Arial. Teď když tam nemáš nastavené vůbec nic, na na systémech Windows se zvolí Times New Roman, na linuxu může něco jiného teď nevím, nechce se mi kvůli tomu restartovat pc.
Jinak díky za nabídku :)
babčův HTPC pro rok 2011: AMD Zacate, spotřeba 16W@46°C při idle, just Google it
babca
Junior
Uživatelský avatar

Odeslat příspěvekod NefroniK 3. 6. 2010 09:22

Pre IE by bolo dobre obalit #portfolio dalsim divom a tomu dat 100% sirku a text-align: center.
NefroniK
Junior


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků