HELP NEEDED — (Better) Tabs with Round Out Borders

[paultnylund]

Original Article: https://css-tricks.com/better-tabs-with-round-out-borders/

How do I include content within a tab? I am a coding noob (sort of) and am confused by the method to embed content.

> Editor’s note: I added anchor links inside the tabs in the demo since I think it’s the most likely case that tabbed navigation like this have them. Most likely, they would have an href attribute that would link to the content they go with by id, and that behavior would be controlled by JavaScript. The fact that this tutorial doesn’t need the anchor links for the extra pseudo elements is further testament to it being better than my original.

I want to be able to toggle between different iframe objects. Feedback is _much_ appreciated!

Thank you,
Paul

[georgearnall]

Hi Paul,

I have written a [codepen](http://cdpn.io/dzBju “codepen”) showing how you could achieve this. I copied the styles from the post you mentioned to the pen so it looks the same.

You could improve this by making the tabs automatically add the necessary class names on page load, for now this is manual.

If you wanted to use iFrames then you can just put an iFrame inside of the content div.

[paultnylund]

Thank you so much!! I’ve been trying to figure out how to do this for days now! I’ll give your code a shot and get back to you with the results. :)

[paultnylund]

Woo!! It worked! YOU ARE AWESOME

[paultnylund]

…almost haha ;)
My body is now shifted approx. 40px to the right… Would you know why?
The body of my website is 100% wide, no padding.

[georgearnall]

Is there anyway you can show me, with a codepen or just give me a link to it hosted somewhere ?

Thanks

[Author]

Posts