1

I was looking to integrate a Section with tabs into my page and found a good Tutorial to do this in pure CSS3 here http://t3n.de/news/css3-dynamische-tabs-ohne-365861/

With a working example: http://jsfiddle.net/6wcfH/

The basic structure of the HTML looks something like this:

<article class="infobox">
<section id="allgemeines">
    <h2><a href="#allgemeines">Allgemeines</a></h2>
    <p>Hier stehen ganz allgemeine Informationen.</p>
</section>
<section id="funktionen">
    <h2><a href="#funktionen">Funktionen</a></h2>
    <p>Hier stehen Informationen zu den Funktionen</p>
</section>
<section id="preise">
    <h2><a href="#preise">Preise</a></h2>
    <p>Hier stehen Informationen zu den Preisen.</p>
</section>

I just copied the code and changed the positioning of the entire thing to fit my page.

Now the links in the h2s get displayed as the tabs and clicking on them displays the according section.

My problem: right now this will jump in a way so that the h2 element will be displayed outside the field of vision (above). I am looking for a way to offset it so that I will jump to a position slightly higher.

So far I found ways to achieve this inserting spans into headlines and move the span higher and jump to that. I can however not apply that tactic since I want to jump to a section within the article and not some inline Element.

What would be a way to achieve an offset for a block, absolute-positioned Element without useing JavaScript but pure CSS?

H_end-rik
  • 551
  • 1
  • 6
  • 19
  • You may think about to use target on the Tabs. You ad a entry in the Browser-history with every click you doing on a tab. That can be annoying for Users. There is at least one more way to do it in CSS-only ;) – Sven Jan 21 '14 at 09:44

3 Answers3

5

Pure CSS Solution:

Here is my Fiddle

EDIT: I changed your child to nth-of-type. That is not necessary to the solution!

I added a way to prevent the page from jumping. See HTML:

<span class="targetFix" id="allgemeines"></span>

And the CSS:

.targetFix {
    position: fixed;
    top: 0;
    left: 0;
}
Sven
  • 252
  • 1
  • 8
2

Pure CSS solution:
I have developed similar tabs with radio buttons long back. clicking on radio buttons does not get jumping effect.

Find my example on codepen



cons: It requires more mockup

Navaneeth
  • 2,555
  • 1
  • 18
  • 38
  • Nice one, that was what i was thinking of while writing my comment. But i don't understand why you are using the span instead of the label itself? – Sven Jan 21 '14 at 12:03
  • Did but just because to tell him some other way to do it, won't be the answer for he's question on that target issue. ;) – Sven Jan 21 '14 at 12:07
0

I'm not sure if there is CSS only solution for that, but you can add JS (or jQuery) code to disable the page jumping to the linked ID:

jQuery example:

$( "#target" ).click(function( event ) {
    event.preventDefault();
});

Reference: http://api.jquery.com/event.preventdefault/

JS example:

Here are some proposals: javascript:void(0) or onclick="return false" for <a> - which is better?

Community
  • 1
  • 1
Minister
  • 1,198
  • 2
  • 10
  • 18
  • Thanks for the input, would love to figure out a pure CSS way though. I am also considering using jQuery-plugins if this should not work out such as https://github.com/ginader/Accessible-Tabs. – H_end-rik Jan 21 '14 at 08:57
  • If the above code (your code) works fine with your requirements and by adding the jQuery code above (or alternative JS solution) and that fixes the only problem you have, then I'd better stay with that code. If you need more options - better use a plugin, but it's not easy to select the one that will work for all your projects (usually you may need to test a few plugins). And final note: it's always easier and faster to fix your code (change style for example) :-) – Minister Jan 21 '14 at 09:02