CSS Frame Test

If CSS work on your browser, here's what will happen when you follow the links above:

  1. Named anchor on home page. You should remain on this page, but the page should redraw with the header Named anchor where CSS Frame Test is now.

  2. Second page. This should take you to another page, from which you can test links back to this page.

The links, and where they go, are illustrated in the following diagram.

[links and destinations]

Known problems in different CSS implementations:

  • Browser does not jump to named anchor. (K-meleon, Netscape 6)

  • The text below the navigation line is not scrollable.

  • The background color of the navigation line does not span the browser's client area. (Opera)

You may of course return to the essay.

What follows (until the heading "Named anchor") is filler. Don't try to read it, you'll either get eyestrain or be bored.

Fa i lsa sa fra me re pla ce me nt.Whi le e li mi na ti ngfra me si sa no ble i de a ,i t'sa go a ltha tha sno tye tbe e nre a che d.CSSi scu rre ntlya fa i lu re a sa re pla ce me ntfo rfra me s,du e to bro ke nCSSi mple me nta ti o nsi nre ce ntbro wse rs(A ma ya ,K-me le o n,Ne tsca pe ,O pe ra ).I E i sthe o ne bro wse rto ge ti tri ght.

To be spe ci fi c,trycre a ti nga ne le me ntwi tha fi xe dpo si ti o ntha ti nclu de sa li nkto a na me da ncho r.I E fo llo wsthe li nkre nde rsthe re su lti ngpa ge co rre ctly;do e syo u rbro wse r?

A ddi ti o na lly,I su spe cttha tCSSfa i lsa sa fra me re pla ce me ntfo ra no the rre a so n.Co nsi de ra si te wi tho ne na vi ga ti o nfra me a ndo ne co nte ntfra me .I fI u nde rsta ndCSSco rre ctly,the co nte ntso fthe na vi ga ti o nfra me mu stbe re pli ca te di ne a cho fthe co nte ntpa ge s.Tha tca nle a dto a ma i nte na nce ni ghtma re .The si tu a ti o nca nbe wo rse :co nsi de ra na vi ga ti o nfra me tha to ffe rsthre e a lte rna ti ve na vi ga ti o npa ge s,su cha sa ta ble o fco nte nts,a su bje cti nde x,a nda se a rchpa ge .Mu ste a chco nte ntpa ge ha ve thre e di ffe re ntve rsi o ns,o ne pe rna vi ga ti o npa ge ?Yo w!The he a da che o fe xpo ne nti a lpo te nti a l!

A gre a tpo we r.Wi thgre a tpo we rco me sgre a tre spo nsi bi li ty.Ho we ve r,li ke a nyde si gnto o l,CSSre qu i re spra cti ce a nde xpe ri e nce to u se we ll.I to ffe rsgre a tco ntro lo ve rpre se nta ti o n;ho we ve r,the mo re co ntro la u se rha so ve rpre se nta ti o n,the mo re wa ystha tu se rha sto ma ke u glya ndu nu sa ble do cu me nts.

Co nsi de rthe o the rwi se u se fu lCSSGu i de a tthe Ho u se o fStyle .I tsstyle she e ta ssi gnsthe sa me ba ckgro u ndco lo rto a ll<HE Mx/E Mgt;e le me nts.Thi si sa pro ble mfo rthe e le me ntslt;H5gt;a ndlt;H6gt;,u se dre spe cti ve lyfo ra pro pe rtya ndi tsa ttri bu te s.The o nlywa yto di sti ngu i shbe twe e nthe mi sto che ckthe le ve lo fi nde nta ti o na fru stra ti ngli mi ta ti o n.Thi si sthe ki ndo fpro ble mstyle she e tswe re su ppo se dto so lve ,no te xa ce rba te .I fa co mpa nytha tma ke si tsli vi ngfro mCSSma ke ssi mple CSSmi sta ke s,wha tho pe i sthe re fo ra ma te u rpro fi ci e ncy?

Ha rdto re tro fi t.I t'spo ssi ble to re tro fi ta si te wi thCSS,bu twhe nyo u ha ve a si te wi tha lmo stthre e hu ndre dHTMLfi le sco nta i ni ngo ve rE Me i ghtytho u sa nd/E Me le me nts,vi si o nso fCSSbe co me ni ghtma re so fe di ti nghe ll.

The be ne fi tso fCSSca nbe stbe re a li ze dwhe ni t'sa pa rto fa si te 'sde si gnfro mthe pla nni ngsta ge o n.Re tro fi tti nga si te ,o nthe o the rha nd,ca ni nvo lve mo re tha nsi mplype ppe ri ngpa ge swi thcla ss=qu o t;ho t-qu o te qu o t;a ttri bu te s.To u se CSSa sa fra me re pla ce me nt(a ssu mi ngbro wse rsre nde ri tco rre ctly)re qu i re sa ddi ngne wHTMLta gsto yo u rpa ge s.

Wa ste sti me .Ti me spe nttwi ddli ngstyle she e tsi sti me no tspe nti mpro vi ngsi te co nte nt.Ho wma nype o ple go to a si te ju stto lo o ka tthe pre ttyde si gn?A ndwha tpe rce nto ftho se who do wi llha ve a re a so nto re tu rn?Co nte ntgi ve sthe ma re a so n;de si gndo e sn't.

Named anchor

Your options here are the same as before, except you need an extra link to return to the top of the page.

This is more filler. Don't bother reading anything from here to the end of the page. To be spe ci fi c,trycre a ti nga ne le me ntwi tha fi xe dpo si ti o ntha ti nclu de sa li nkto a na me da ncho r.I E fo llo wsthe li nkre nde rsthe re su lti ngpa ge co rre ctly;do e syo u rbro wse r?

A ddi ti o na lly,I su spe cttha tCSSfa i lsa sa fra me re pla ce me ntfo ra no the rre a so n.Co nsi de ra si te wi tho ne na vi ga ti o nfra me a ndo ne co nte ntfra me .I fI u nde rsta ndCSSco rre ctly,the co nte ntso fthe na vi ga ti o nfra me mu stbe re pli ca te di ne a cho fthe co nte ntpa ge s.Tha tca nle a dto a ma i nte na nce ni ghtma re .The si tu a ti o nca nbe wo rse :co nsi de ra na vi ga ti o nfra me tha to ffe rsthre e a lte rna ti ve na vi ga ti o npa ge s,su cha sa ta ble o fco nte nts,a su bje cti nde x,a nda se a rchpa ge .Mu ste a chco nte ntpa ge ha ve thre e di ffe re ntve rsi o ns,o ne pe rna vi ga ti o npa ge ?Yo w!The he a da che o fe xpo ne nti a lpo te nti a l!


Last updated 24 January 2002
http://www.rdrop.com/~half/Creations/Writings/TechNotes/CSS.frame.test.a.html
All contents ©2002 Mark L. Irons