Autor Zpráva
stencek
Profil
Dobrý den,

s layoutem zvaným "Holy Grail" už jste se asi někteří setkali - jen pro úplnost uvedu hlavní zdroj. S jeho používáním mám však nemilý problém. A to sice při používání odkazů, které míří na záložku v obsahu. Myslím tím..

<a href="stranka.html#zalozka">Odkaz na záložku</a> .. 

Po kliknutí na takovýto odkaz se mi stránka špatně vyrenderuje (jak ve IE, tak ve FF..). Prohlédnout si tento bug můžete zde - Ukázková stránka. V pravém boxu jsou ony odkazy, o které mi jde.

Stejný problém řešil už Pony2u na stránce http://www.killersites.com, ale nikdo mu tam neodpověděl.

I am using the Holy Grail as put out by Alistapart.com. My problem is, that when I use anchor tags to reference with in the same page once the anchor scrolls down, the content above it goes away and I can’t scroll back up? Now if I anchor back to the top of the page it’s fine, but since there are several areas where I used anchors that would be kind of redundant! Can anyone offer any help?


Hledání a bádání mě dovedlo na tyto stránky:

http://www.satzansatz.de/cssd/onhavinglayout
http://www.positioniseverything.net/explorer/percentages.html#link
http://www.satzansatz.de/cssd/pseudocss.html#hoverjump
http://www.grauw.nl/articles/css-faq.php#incremental-rendering

Ale řešení jsem nerozlouskl..je tady někdo, kdo ví jak na to?
srigi
Profil
Sice nepomozem s riesenim, ale musim napisat, ze je zaujimave, ze Opera v9.62 tuto chybu nerobi.

Podla mna najmenej bolestive bude Holy grail opustit, vykaslat sa na poradie textu v HTML kode a pouzit obycajne floatovane divy. Najjedoduchsie riesenie je zvycajne to spravne.
habendorf
Profil
stencek

Proč to proboha řešíš grailem, když má stránka pevnou šířku? Zbytečně si zaděláváš na problémy.
stencek
Profil
Nejjednodušší by bylo nepoužívat to odkazování na záložky, protože na tom Holy Grailu trvám. Ale nemůžu to opomíjet pořád...proto se ptám tady profíků ;)
habendorf
Profil
protože na tom Holy Grailu trvám

Prozradíš jeden jediný rozumný důvod?
stencek
Profil
Proč to proboha řešíš grailem, když má stránka pevnou šířku? Zbytečně si zaděláváš na problémy.

Jde o obecné řešení..zkus abstrahovat od toho, že zrovna tahle stránka má fixní šířku.
srigi
Profil
habendorf
Prozradíš jeden jediný rozumný důvod?

Rozumny dovod je poradie HTML kodu, co je aj dovodom vzniku tohto paradigma.
habendorf
Profil
srigi

Rozumny dovod je poradie HTML kodu, co je aj dovodom vzniku tohto paradigma.
Děkuji za blbý důvod, žádal jsem ale rozumný. Pořadí kódu u pevného layoutu řešit grailem je totální nesmysl.
Plaváček
Profil
stencek

Příčinou tvých problémů je tato velmi nestandardní konstrukce

.column {
padding-bottom: 20010px;
margin-bottom: -20000px;

}

jejímž cílem je zajistit stejnou výšku postranních sloupců.

V tomto konkrétním případě bych opustil Holy Grail (stejného pořadí bloků v kódu dosáhneš i použitím bezpečného floatování) a stejnou výšku sloupců simuloval obrázkovým pozadím v nadřazeném elementu.

Pokud se týká obecného řešení problému se záložkami třeba u gumového layoutu, přiznám se, že žádné řešení neznám. I proto, že jsem se podobným problémovým konstrukcím vždy raději vyhýbal.

Možná něco napadne Dera, který studiem Holy Grailu strávil hodně času, když připravoval jeho popis do knihy CSS hotová řešení a jak ho znám, podobné kodérské perličky sbírá a užívá si je :)
stencek
Profil
Díky za odpovědi.
V tomto konkrétním příkladě je to jasné..ale opravdu by mě zajímalo řešení pro Holy Grail. Moje chyba, že jsem ukázkový web neudělal s "roztahovacím" layoutem, aby každý věděl, o co mi jde.
Dero
Profil
* html .column {  
  display: inline;  
  position: relative; 
}

#colswrap {
	display: table-cell;
}

... a z #bodywrap odstranit overflow: hidden;


Šlo by to ještě úsporněji (i na straně HTML), ale nemám dneska moc času.

Živá ukázka: http://dero.name/stuff/holygrail.bug/uvod.html (testováno ve FX 3.0.3, IE8 quirk, IE6 quirk)
stencek
Profil
Díky Dero..díky!

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