tabbed content experiment…
…the final version ‑ upgraded
My “mission” was to find the most practical way to build and make even seriously oversized multi‐tab flipbooks work. Not that they have to be oversized – this is just a bonus that comes with the chosen method.
In essence: I was not entirely happy with tab line‐up
method used for the original tabbed content experiment.
It required very precise size
and position
values, and
even when given precise values it tended to vary +/- 1px in line‐up on
screens with varying font-size
because of various browsers'
“tip‐over points” for recalculating and mapping a mix of
px
, em
and %
into actual screen pixels.
Varying screen resolution then also affected the line‐up.
I wanted a more stable and robust solution for multi‐tab flipbooks, so the original positioning method literally got turned on its head. The resulting method was found to work best no matter the number of tabs and tab‐lines, so this is the method I am gonna rely on in future designs.
NOTE: Have observed total rendering chaos for tabs in IE10 on win7. Have yet to study what causes that browser to fail. IE11 on win10 is doing OK.
4 flipbook demos…
a five tab flipbook
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSS
only (no script).- not using
target
= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.
flipbook
You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who
believe web pages need that sort of thing. Personally I don't care much for
effects, so all I have in these demos is a quick opacity
transition
.
For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.
pictures
citrus reflections
An image that is given no class
, following directly after
first‑child
headline, is styled to have that very same
headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old
“tabbed content” variant of mine that also uses INPUT
for in‐page user‐interfacing.
Such an “overlay‐on‐images” is nothing special –
only involves z‑index
and negative margin‑top
in this case. Easy to remove or change into something completely different.
tailored
tailor individual tabs
Horizontal position and width of individual tabs, are tweaked in this demo. It is easy to tweak individual tabs and overall line‐up, no matter how many tabs and tab‐lines the line‐up consists of.
It is of course not necessary to fill a line with tabs, or limit number to five pr. line. It will work just fine no matter the number of tabs, as long as they are styled in percentages to stay within tab‐line width.
Tab‐tailoring can be taken too far, as it is easy to position
tabs so they visually do not follow source‐code (HTML
) order.
I always follow source‐code order visually for content, and advice
everyone to do the same – especially when including “show/hide”
solutions.
finally
This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
…next follows…
a ten tab flipbook
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSS
only (no script).- not using
target
= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.
flipbook
You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who
believe web pages need that sort of thing. Personally I don't care much for
effects, so all I have in these demos is a quick opacity
transition
.
For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.
picture
citrus reflections
An image that is given no class
, following directly after
first‑child
headline, is styled to have that very same
headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old
“tabbed content” variant of mine that also uses INPUT
for in‐page user‐interfacing.
Such an “overlay‐on‐images” is nothing special –
only involves z‑index
and negative margin‑top
in this case. Easy to remove or change into something completely different.
example
reduced number of tabs
Reducing number of tabs and containers in HTML without modifying line‐up
in CSS, will for this “two‐liner” result in the
following…
…which in my opinion makes perfect use of space – at least in my
design.
expand
expanding all tabs
Opening entire flipbooks in one go by :target
‐addressing
“#flipbook” – an element containing the actual flipbooks, does
in my demos show hints of tabs…
…because that is how I like it here.
With flipbooks in expanded form, a tab counter
is included to
make it easier to keep track of tabs down the page.
I chose to attach the “#flipbook” ID
to
the section
container all demos are nested inside, and the regular
sitewide :target
styling then also kicks in along with the specific
one, showing blue background on first headline in the section
that
is being targeted.
line-up 1
line-up check v/h2
Otherwise nothing to see here.
line-up 2
line-up check v/h3
Otherwise nothing to see here.
line-up 3
line-up check v/h4
Otherwise nothing to see here.
line-up 4
line-up check v/h5
Otherwise nothing to see here.
finally
This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
…wherafter naturally comes…
a fifteen tab flipbook
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSS
only (no script).- not using
target
= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
More tabs‐lines can of course be added, using the same technique – see below. And leaving out tabs doesn't change how it works.
flipbook
You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who
believe web pages need that sort of thing. Personally I don't care much for
effects, so all I have in these demos is a quick opacity
transition
.
For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.
pictures
citrus reflections
An image that is given no class
, following directly after
first‑child
headline, is styled to have that very same
headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old
“tabbed content” variant of mine that also uses INPUT
for in‐page user‐interfacing.
Such an “overlay‐on‐images” is nothing special –
only involves z‑index
and negative margin‑top
in this case. Easy to remove or change into something completely different.
pictures
citrus reflections
Unlike what is shown in previous tab, this image has a class
attribute, and although that class
attribute is empty the image
gets very basic display:block
and margin
styling to
stay centered in its own space. That this very image is also shrinked by
max‑width: 98%
, doesn't affect alignment.
A meaningful class
for alignment on an image, will of course
make it act as defined in sitewide stylesheets.
sheet 5
space filler 5
Nothing to see here.
sheet 6
space filler 6
Nothing to see here.
sheet 7
space filler 7
Nothing to see here.
sheet 8
space filler 8
Nothing to see here.
sheet 9
space filler 9
Nothing to see here.
sheet 10
space filler 10
Nothing to see here.
sheet 11
space filler 11
Nothing to see here.
sheet 12
space filler 12
Nothing to see here.
sheet 13
space filler 13
Nothing to see here.
sheet 14
space filler 14
Nothing to see here.
finally
This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 501px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
…and lastly we add…
a twenty tab flipbook
overview
features…
- content‐blocks hold any type and mix of content.
- flexible content‐block size = vertically expandable beyond min-height.
- responsive (with the page).
HTML/CSS
only (no script).- not using
target
= does not mess up page addresses with in‐page links. - hidden in clear view = no “invisible” content positioned outside browser window.
Again, more tabs‐lines, and more tabs pr. line, can of course be added, using the same technique. And leaving out tabs doesn't change how it works.
flipbook
You may call it what you like, as this tabbed flipbook is of course well suited to split up and present any content, being it text, images, videos, menus, or a mixture of all. Its use is, as for most things web, only limited by our imagination and taste.
It can easily be styled with transitions and effects, to satisfy those who
believe web pages need that sort of thing. Personally I don't care much for
effects, so all I have in these demos is a quick opacity
transition
.
For this demo I have kept everything simple, as it is more a proof of concept than anything. Not much chance that the concept will end up in the garbage bin, but it does need time to grow into something useful.
pictures
citrus reflections
An image that is given no class
, following directly after
first‑child
headline, is styled to have that very same
headline layered in front, as an image title. This is an idea borrowed from sketchbook, which is an old
“tabbed content” variant of mine that also uses INPUT
for in‐page user‐interfacing.
Such an “overlay‐on‐images” is nothing special –
only involves z‑index
and negative margin‑top
in this case. Easy to remove or change into something completely different.
sheet 4
space filler 4
Nothing to see here.
sheet 5
space filler 5
Nothing to see here.
sheet 6
space filler 6
Nothing to see here.
sheet 7
space filler 7
Nothing to see here.
sheet 8
space filler 8
Nothing to see here.
sheet 9
space filler 9
Nothing to see here.
sheet 10
space filler 10
Nothing to see here.
sheet 11
space filler 11
Nothing to see here.
sheet 12
space filler 12
Nothing to see here.
sheet 13
space filler 13
Nothing to see here.
sheet 14
space filler 14
Nothing to see here.
sheet 15
space filler 15
Nothing to see here.
sheet 16
space filler 16
Nothing to see here.
sheet 17
space filler 17
Nothing to see here.
sheet 18
space filler 18
Nothing to see here.
sheet 19
space filler 19
Nothing to see here.
finally
This page‐design itself is responsive, and the tabbed flipbook with its content naturally follows suit and adjusts to a wide range of browser‐windows.
Horizontally tabbed interfaces like this are not very suitable for really small screens, as those tabs will end up being compacted too much. Thus, this demo expands fully open on narrow screens – break-point at 503px.
I have a preference for “quiet and simple” web designs, down to the smallest details. Consequently, for me it is natural to implement “clever” solutions in such a way that they do not immediately call for attention and/or disturb the average visitor.
I could of course have continued adding tab-lines, but the above should do as demonstrations of the concept.
one more down the drain
Yes, it works just fine, but now I am lost for ideas what to use it for. My imagination must have short‐circuited – hopefully it is a temporary condition.
Philippe Wittenbergh has helped making my “tabbed content” solutions more AT friendly.
(30.sep.2016) This “tabbed” experiment still works fine 2 1/2 year after it
was originally launched. Minor revisions made on styles (margin
s / padding
s mostly) to make it go with
latest sitewide design upgrade, and the tab-spread method is also simplified.
No changes made to source-code.
Still haven't come up with any great ideas for use, but that is a minor problem.
sincerely
Hageland 22.jan.2014
23.jan.2014 - styled for moving two-line tabs.
24.jan.2014 - testing ways to make tabs stand out.
25.jan.2014 - testing shortened tab-line variations.
29.jan.2014 - optimized selector chains.
30.jan.2014 - testing with three and four tab lines.
01.feb.2014 - testing with reversed tab-positioning.
02.feb.2014 - landed on the final, very flexible, version.
03.feb.2014 - updating diary.
05.feb.2014 - updating diary.
06.feb.2014 - updating diary.
30.sep.2016 - minor revision.
01.oct.2016 - upgraded tabs-CSS to go with sitewide upgrade.
11.oct.2020 - minor text revision.
last rev: 11.oct.2020