/CSS/ Create scrollable page content
05/10/2007 | Filed under Develop > CSS
Craig Grannell shows you how to emulate iframes: discover how to place scrollable content within your page designs without moving away from current web standards
If you’ve been immersed in the world of web design for a while, you’ll know that it’s fluid in many ways. Design styles come and go, the market share of individual browsers peaks and troughs (or, in Netscape’s case, leads the market and then spontaneously combusts due to one particularly disastrous release), and software wows the market one minute, only to be rapidly replaced by the next big thing.
Under the hood, things are just as changeable: new technologies arrive, develop and evolve, while others are quickly put out to pasture. The technical term for the latter of those things, when it comes to web standards is “deprecated”, which essentially means “marked for removal from the standards.” In plain English, that’s “stop using this right now, because future support is in no way guaranteed. Otherwise, we’ll get terribly cross with you.”
A quick trawl through any hefty HTML tome you have handy will confirm that a surprising number of commonly used elements and attributes are on seriously borrowed time, including the stupefyingly popular “target” for anchors. If you’re using a transitional XHTML DOCTYPE, you can still get away with using the odd deprecated element, but designers and applications are increasingly moving towards XHTML Strict, making that final break away from presentation-oriented code within markup.
About the author:
Name: Graig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
If I were a kitchen implement, I’d be… a blender
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Adrian / 06/10/2007 / 12:06 / http://www.pctd.co.uk
Hey thanks!
Iframes have caused me problems in the past. With search bots not being able to read them? I heard that search can not read iframes. Does this apply to it or will search be able to read it?
Thanks
Adrian
PC Technicians Direct
www.pctd.co.uk
Jermayn Parker / 08/10/2007 / 03:26 / http://germworks.net/blog/
This is just what I was looking for, so thanks for providing it :)
Ashley / 10/10/2007 / 05:48
Hi
I am researching the design field wanted to get into learning web design. Where do I start? Which classes or books do you recommend so I can start learning XHTML Strict?
Thanks,
Ashley
design student
Zajdó Csaba / 11/10/2007 / 13:22 / http://www.webshopexperts.hu
I like this post very much, for those who need a clean solution for CSS scrollers. However i think most people will find the overflow: auto completely satisfying.
For those who need a real "flashy" solution, with all the web 2.0 features, I suggest the moo.fx framework, especially the Fx.Scroll component. Altough that needs some Javascript, it can make real differences to a simple CSS based scrolling solution.
TMaxim / 18/10/2007 / 11:00 / http://www.faberlica.com
I find very interesting book "CSS Mastery: Advanced Web Standards Solutions" by Andy Budd, Cameron Moll, Simon Collison
Adam / 07/11/2007 / 20:16 / http:www.cubixstudios.com
Im not keen on using Java script, i like to keep the code as clean as possible
Timur / 23/12/2007 / 18:16 / http://www.senkrecht-it.com
I also hated using iframes. Thanks a lot for your article!
Vernon ballantine / 08/02/2008 / 15:53 / http://www.site-webdesign.com
I like scrollable content, but why create an iframe when you just need to layer the content and scroll the content of the new layer, very simple and effective and the text can be read by search engines for SEO purposes ?
Peter Lorimer / 29/05/2008 / 18:34 / http://www.forgeserversolutions.co.uk
Yes overflow:auto; is cool but people who say you cannot use frames or iframes really mean they do not understand mark up.
1. I have a site with frames
2. A bot goes on it but only sees the placeholder (frameset)
3. Bots do not know the <FRAME> tag but they do know the <NOFRAMES> tag
4. Bots als follow links
5. If you have a frame then simply place links to their content pages inside the <NOFRAMES> tag and the bot will read and follow the links
6. Job done
Never use frames myself but this theory that they cannot be oprimised is complete rubbish so long as the frameset has NOFRAMES tags with linkage and even content. This is not cloaking because if you say Mosaic or some other older browser that does not support frames it will display the correct content.
Christian Krueger / 11/11/2008 / 21:22 / http://kruegers.net
I'm sorry for my bad English and hope, you understand my opinion for the use of iFrames in websites reflected from a seo consultant... ;-)
I always try to avoid the use of iFrames to give more readable and theme-relevant content for googlebots. This results in a higher keyword density and can influence the ranking of a website in the google search results.
It's a nice gadget for site visitors, but it's more important to get site visitors - and the easiest way is a top positioning in the search engine results.
When using scrollable page content, which contains relevant information about your site, your services or your product, always use a html or php element, which is readable for search engine robots (bots).
Chris, SEO from Germany
Claudia B. / 03/12/2008 / 10:25 / http://www.inszenio.de
Scrollable Content can be very dangerous for the results in the SERPs. It´s been considered as a spam in the eyes of Google. It´s like hiding links!
Michael (a mobile SEO from Germany) / 12/12/2008 / 01:03 / http://www.seosmart.com/mobile-seo.html
I would also like to use scrollable content on my website. Can anyone (or you, Craig) tell me, if this really nice way of how to display scrollable page content in iframes is search engine friendly?
I'm not really sure if google can read content in iframes and would be thankful for any tip...
Michael
Kinderbücher / 05/08/2009 / 14:41 / http://www.my-kinderbuch.de
Nice idea, but is that method really friendly for search-engines, especially google? I imagine that google see that content as hided spam words...
Webdesign / 12/02/2010 / 20:26 / http://www.designbits.de
Very useful, thanks so much!
