Autor Zpráva
Zdeněk Košťál
Profil
Zdravím vás a prosím o pomoc s řešením zapeklitého problému - centrování bloku neznámé šířky na střed (ne, nebude to tak jednoduché, jak to zní).

Náhled: http://lab.zdenekkostal.cz/skycrapper/

Popis problému:
- mám blok .content - v něm bude veškerý obsah stránky, vlastně celý layout - tento blok má pevnou šířku
- můžu (a nemusím) mít reklamu neznámé šířky (resp. bude mít jednu ze dvou šířek - 120/240px), která má být vpravo od bloku .content - tento blok tam bude přidávat javascript (je to externí reklamní systém, callback moc nepřipadá v úvahu)
- oba tyto bloky musí být společně vycentrovány (tudíž jsou obsaženy v obalovém bloku, který má v tomto případě kvůli skycrapperu neznámou šířku) a v případě, že se nevlezou do viewportu musí být korektně zobrazeny posuvníky tak, aby reklama šla zobrazit

Zkoušel jsem:
Oba tyto bloky (content a skycrapper) jsem obalil a zkoušel jsem následující věci:
1) obalovému divu nastavit display: inline-block (s tím, že v IE6 budu simulovat přes hasLayout), což funguje správně až na to, že pokud je úzký viewport, skycrapper se hodí pod obsah, což by se inzerentům nelíbilo
2) vypozicoval jsem obalový div přes position: relative; left: 50%; (a float: left; aby respektoval šířku vnitřních bloků) a vnitřní obalový div zpět přes position: relative; left: -50%; - nicméně kvůli vypozicování je prakticky vždy zobrazen horizontální posuvník a toto řešení i tak trpí stejným neduhem jako řešení první

Co potřebuji:
- mít vedle sebe neustále content i skycrapper pozicované na střed tak, aby při menším viewportu ani jeden z bloků nelítal pryč
- korektně zobrazovat posuvníky (tzn. žádné posuvníky kvůli tomu, že nějaký div bude vypozicovaný pryč a přitom tam nebude žádný obsah)
- spolehlivé řešení - budu to nasazovat na velkém serveru a tam žádné pokusné řešení nepřipadají v úvahu - z toho důvodu mám strach i z inline-block
- hledám ideálně řešení jen pomocí CSS (pomocí javascriptu tam ani není co vymýšlet :) )

Nevím, zda je to vůbec technicky řešitelné, nicméně budu rád za každý nápad. Díky.
habendorf
Profil
Hezký problém :o)

Chvíli jsem si s tím hrál a za 10 minut ze mě vypadlo toto: http://pokusy.1-webdesign.cz/centrovany-skyscraper.html

Nemám teď moc čas, takže IE6 a IE7 budeš muset ještě poštelovat (při malém viewportu reklama přeskakuje). Osobně bych se vůbec nestyděl pro IE6 a IE7 dát podmíněný behavior.

BTW: skyscraper (píšeš to blbě všude, takže asi nejde o překlep)
Ludivitto
Profil
No, to je právě ono. Bez toho, aby to jelo v prohlížeči, který stále používá 30% uživatelů, je to sice pěkné řešení, ale k ničemu:(
habendorf
Profil
Ludivitto:

1) IE6 a IE7 30 %?
2) Řešení nabízím. „Osobně bych se vůbec nestyděl pro IE6 a IE7 dát podmíněný behavior.

Ovšem nikdo ti nebrání namísto pindání přiložit ruku k dílu, že ...
Zdeněk Košťál
Profil
habendorf:
Chytré řešení, díky :).

Díval jsem se v nativním IE6 a horizontální posuvník to nedělá, v IE7 (IETester) už ale ano... (To by šlo asi obejít přes inline-block s behaviorem.)

Když to tak vezmu, vychází mi:
Moderní prohlížeče + IE8: table
IE7: inline-block + behavior
IE6: inline-block (inline + hasLayout) + behavior / position + behavior

Uvidím, jestli a jak to tvé řešení zakomponuju do layoutu, nicméně je to vyřešeno opravdu hezky.

PS: Tím skyscraperem jsi mi právě vzal jedno slovíčko ze slovníku :).
Ludivitto
Profil
Nezakomponuješ:) Ty behavior blbosti bych na žádný větší projekt nikdy nepoužil. Spíše JS řešení, otázka pár řádků viz. naše ICQ komunikace:)
habendorf
Profil
Ludivitto:

Behavior nebo JS, vždyť to de facto jedno jest. Ty jsi na tom nějak zainteresovanej, že do toho pořád reješ? Pokud ano, můžeš v klidu použít tabulku a není co řešit.
Plaváček
Profil
habendorf:

Hele, to je hezké řešení... mám ale pocit, že kdysi kdesi něco podobného řešil Dero, jenže to nemůžu dohledat. Nemáš to někde v oblibených?

Zdeněk Košťál:

Pro IE 6 bych problém řešil prostě pevnou šířkou a fajrunt, zbytečné behaviors nemají valného smyslu. Možná, když nad tím tak dumám, bych totéž vyvrbil i pro IE 7 (přeci jenom už je trochu za zenitem). Ale je to jenom rada nikoliv doporučení.
Bubák
Profil
Podařilo se mi dohledat, http://dero.name/stuff/centrovani_bloku.html, ale nevím, zda to v tomto případě pomůže, tipnul bych si, že ne.
Plaváček
Profil
Bubák:

Ne, to nemám na mysli. Někde mi v paměti uvízlo, že podobná věc už se řešila a Dero našel fakt zajímavé řešení. Ale, hrome, už asi stárnu a mám čurbes v oblíbených položkách :)
Davex
Profil
Plaváček:
Vím co myslíš, hledám…, Asymetrický Skyscraper. Vztahuje se k tomu vlákno Skyscraper u centrovaného designu.

A když už jsme u těch zajímavých řešení, mohl bys prosím udělat nějaký přehled těch tvých? Na klient.plavacek.net se mi také nějak špatně hledá ;-)
Plaváček
Profil
Davex:

Dík moc, ukládám :)

když už jsme u těch zajímavých řešení, mohl by jsi prosím udělat nějaký přehled těch tvých?

Jak bude chvilka, nějaký přehled vyrobím.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0