Hi Enrique, It's looking good. Have you tried applying the jquery tabs plugin or any similar tabbing script to make them function? Bearing in mind that the idea behind tabs is to use javascript to apply the css structure, so that people without script can see the content.
All the best, Dan. On Jan 16, 2008 9:45 AM, Enrique Meléndez Estrada <[EMAIL PROTECTED]> wrote: > > Yes, it is working. > > This is TABS layout, not TABS behaviour. It miss the proper > jquery-javascript events and actions. this is a demo which shows that it > is possible to display the HTML elements on screen as TABS layout > without changing the DOM structure. > > El 15/01/2008 19:14, Olivier Percebois-Garve escribió: > > Hi > > > > I Just had a quick look in Opera 9.25 and it is not working... > > > > Olivier > > > > Enrique Meléndez Estrada wrote: > >> > >> Looking at "official" TABs plugin, I realized that the HTML structure > >> is not very "natural". It uses a list (UL) of tab headers follow by > >> tab bodies (DIV). Normally, what you get from your favorite CMS is > >> something more like : a header (div, h,...), its body (div), another > >> header (div, h, ...), its body (div), etc... > >> > >> > >> My challenge was, using this last "natural" HTML structure, try to > >> layout it in a TABs way. I think I've got it: > >> > >> http://www.ita.es/jquery/tabs_only_css.htm > >> > >> , where practically I have used the same HTML for all 8 TABS > >> combinations. The result is compatible with IE6, IE7, FF and Opera. > >> But there are some limitations to take into account when implementing > >> as a Jquery plugin (as I wish, ;-): > >> > >> * > >> Only versions topRight, topLeft, leftTop and rightTop are100% > >> automatic (CSS doesn't depend on TABs number, height and width). > >> * > >> Versions leftBottom, rightBottom, bottomLeft and bottomRight > >> depends on TABS number, and the height and/or width applied > >> (This is very "jquerysh-able") > >> * > >> I used QUIRK format (see doctype in HTML) for IE: the same CSS > >> for IE6 and IE7, but in STRICT format it would only work in IE7 > >> (I don't control IE6 by now) > >> * Body TABs height is fixed (100px) and scroll appears where > >> content doesn't fit. In case of non-liquid TABs, with fixed > >> width, it could be possible to automatically calculate height > >> for no-scroll body via jquery-script with 3 modes: > >> * > >> 1. > >> height fixed: like now in the example. > >> 2. > >> height max: fixed to maximum no-scroll body TAB height. > >> 3. > >> height auto: calculating each no-scroll body TAB height. > >> > >> With all this, next steps would be: to search a little more for IE6 > >> STRICT mode compatibility, and to create a Jquery plugin (with CSS > >> dinamically generated?) > >> > >> Any suggestions, help, critics, comments, are very welcome. > >> -- > >> Enrique Meléndez Estrada (2367) > >> Servicios Informáticos > >> Organización y Servicios Internos > >> Instituto Tecnológico de Aragón > > > > > -- > Enrique Meléndez Estrada (2367) > Servicios Informáticos > Organización y Servicios Internos > Instituto Tecnológico de Aragón > > -- Daniel Eastwell Portfolio and articles: http://www.thoughtballoon.co.uk Blog: http://www.thoughtballoon.co.uk/blog
