Difficulties with customizing Craig Buclker´s tab control

Ron_Wolpa · October 26, 2013, 2:00am

Having difficulties with "How to Create a CSS3-Only Tab Control Using the :target Selector by Craig Buckler
http://www.sitepoint.com/css3-tabs-using-target-selector/

I am attempting to implant the tab control on a site and have had a hard time with the following:

1- I wished as the tabs are clicked no horizontal movement : as the tab is clicked the page jumps up or down to put text in evidence. Is there a way to prevent it happens ?
2- As tab 2 is clicked tab 3 opens as well appearing partially the text of tab 3.
is there a way to correct it ?
I will post bellow my development link : http://gruberadv.com.br/tabs_post.php

Thank you for your attention.

PaulOB · October 26, 2013, 10:27am

HI,

If you set right:0 to article.tabs section then the tab content will be full width.


article.tabs section{right:0}

Craig’s example also exhibits this problem but is masked because the content stretches the element full width. If there’s not enough content the tab content stops short.

Unfortunately the scroll to the top of the page can’t be fixed as a browser will scroll the target to the top of the page by default. The problem with Craig’s example is that he is dragging the three tabs upwards with a negative top position which means that when you select a tab the documents scrolls to the content and because the tabs are top:-1.8em then they disappear above the viewport. (See someone else’s comments at the end of that article who has the same problem.)

These tabs are really done best with a little bit of JS but you could make the tabs stay visible by changing the construction of those tabs. If the three tabs were not dragged above the content but instead the content below the tabs was styled (instead of the section) then the tabs would not scroll beyond the top of the viewport when selected. The whole section would scroll to the top of course but at least the tabs will then be static at the top of the screen and not keep jumping in subsequent clicks.

I’m out today but I’ll try and run up a demo tomorrow of how to style it so that at least the three tabs don’t disappear off screen each time they are clicked.

(I avoided this issue in a recent CSS quiz using a fixed positioned element like this but that is a special case and no good for you.)

PaulOB · October 26, 2013, 10:37am

Ok,

It only took a few minutes but this is the idea.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 tabs</title>
<style>
body {
	font-family: "Segoe UI", arial, helvetica, freesans, sans-serif;
	font-size: 90%;
	color: #333;
	background-color: #e5eaff;
	margin: 10px;
	z-index: 0;
}
h1 {
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
}
h2 {
	font-size: 1.3em;
	font-weight: normal;
	margin: 2em 0 0 0;
}
p { margin: 0.6em 0; }
p.tabnav {
	font-size: 1.1em;
	text-transform: uppercase;
	text-align: right;
}
p.tabnav a {
	text-decoration: none;
	color: #999;
}
article.tabs {
	position: relative;
	display: block;
	width: 40em;
	height: 15em;
	margin: 2em auto;
}
article.tabs section {
	position: absolute;
	display: block;
	top:0;
	left: 0;
	right:0;
	z-index: 0;
}
.tab-container {
	position: absolute;
	display: block;
	top: 1.8em;
	left: 0;
	right:0;
	height: 12em;
	padding: 10px 20px;
	background-color: #ddd;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
	z-index: 0;
}
article.tabs section:first-child { z-index: 1; }
article.tabs section h2 {
	position: absolute;
	font-size: 1em;
	font-weight: normal;
	width: 120px;
	height: 1.8em;
	top:0;
	left: 10px;
	padding: 0;
	margin: 0;
	color: #999;
	background-color: #ddd;
	border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 { left: 132px; }
article.tabs section:nth-child(3) h2 { left: 254px; }
article.tabs section h2 a {
	display: block;
	width: 100%;
	line-height: 1.8em;
	text-align: center;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}
article.tabs section, article.tabs section h2 {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
article.tabs section:target, article.tabs section:target h2 {
	color: #333;
	background-color: #fff;
	z-index: 2;
}
</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<article class="tabs">
		<section id="tab1">
				<h2><a href="#tab1">Tab 1</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 1.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p>
						<p class="tabnav"><a href="#tab2">next &#10151;</a></p>
				</div>
		</section>
		<section id="tab2">
				<h2><a href="#tab2">Tab 2</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 2.</p>
						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p>
						<p class="tabnav"><a href="#tab3">next &#10151;</a></p>
				</div>
		</section>
		<section id="tab3">
				<h2><a href="#tab3">Tab 3</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 3.</p>
						<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p>
						<p class="tabnav"><a href="#tab1">next &#10151;</a></p>
				</div>
		</section>
</article>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
</body>
</html>

Edit:

Just noticed the white background is missing - I’ll fix that later as I am out of the door now

Ron_Wolpa · October 26, 2013, 5:26pm

As a matter of fact I tried a couple of js scripts without much success.
This is the reason I made up my mind to seek for a sheer based on css tab control.
Your “fixed positioned in a fluid layout” may not be suitable for this case but I think it is very interesting and may be of some use in a next project. The hard is to customize already existing codes.
I gave a try on your css , it has not worked inside my code yet.
So many thanks for posting replies.

PaulOB · October 27, 2013, 11:08am

Hi,

You need to place your tab code with the tab code below or as seen in this link (refresh).


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 tabs</title>
<style>
body {
	font-family: "Segoe UI", arial, helvetica, freesans, sans-serif;
	font-size: 90%;
	color: #333;
	background-color: #e5eaff;
	margin: 10px;
	z-index: 0;
}
h1 {
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
}
h2 {
	font-size: 1.3em;
	font-weight: normal;
	margin: 2em 0 0 0;
}
p { margin: 0.6em 0; }
p.tabnav {
	font-size: 1.1em;
	text-transform: uppercase;
	text-align: right;
}
p.tabnav a {
	text-decoration: none;
	color: #999;
}
article.tabs {
	position: relative;
	display: block;
	width: 40em;
	height: 15em;
	margin: 2em auto;
}
article.tabs section {
	position: relative;
	display: block;
	z-index: 0;
}
.tab-container {
	position: absolute;
	display: block;
	top: 1.8em;
	left: 0;
	right:0;
	height: 12em;
	padding: 10px 20px;
	background-color: #ddd;
	border-radius: 5px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.1);
	z-index: 0;
}
article.tabs section:first-child { z-index: 1; }
article.tabs section h2 {
	position: absolute;
	font-size: 1em;
	font-weight: normal;
	width: 120px;
	height: 1.8em;
	top:0;
	left: 10px;
	padding: 0;
	margin: 0;
	color: #999;
	background-color: #ddd;
	border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2 { left: 132px; }
article.tabs section:nth-child(3) h2 { left: 254px; }
article.tabs section h2 a {
	display: block;
	width: 100%;
	line-height: 1.8em;
	text-align: center;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}
article.tabs section, article.tabs section h2 {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
article.tabs section:target .tab-container, article.tabs section:target h2 {
	color: #333;
	background-color: #fff;
	z-index: 2;
}
article.tabs section:target { z-index:2 }
</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<article class="tabs">
		<section id="tab1">
				<h2><a href="#tab1">Tab 1</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 1.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra, nunc tellus sagittis nunc, et tempus dui lorem a ipsum.</p>
						<p class="tabnav"><a href="#tab2">next &#10151;</a></p>
				</div>
		</section>
		<section id="tab2">
				<h2><a href="#tab2">Tab 2</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 2.</p>
						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo. Quisque tortor neque, vulputate quis ultricies ut, rhoncus mollis metus.</p>
						<p class="tabnav"><a href="#tab3">next &#10151;</a></p>
				</div>
		</section>
		<section id="tab3">
				<h2><a href="#tab3">Tab 3</a></h2>
				<div class="tab-container">
						<p>This content appears on tab 3.</p>
						<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu. Integer urna neque, rutrum at pretium eu.</p>
						<p class="tabnav"><a href="#tab1">next &#10151;</a></p>
				</div>
		</section>
</article>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
<p>scroll test</p>
</body>
</html>

Just to clarify what this will do is that although it won’t stop the scroll to the top of the page when a tab is fist clicked it will ensure that that the actual tab buttons will not disappear off the top of the page as in Craig’s (and your your) example. The tab panel will still scroll to the top of the page but the tab buttons will be at the top and not disappear and will work well. Just try my demo out to see what I mean (I have corrected the background colour now).

I should also re-iterate that there is no way to stop the panel moving when first clicked because that’s what fragment identifiers do (in-page links) and it is a feature of the browser that will scroll them to the top of the screen (assuming that there is content enough to scroll on the page).

The best you can hope for is the method used in my demo.

Ron_Wolpa · October 28, 2013, 4:34pm

I don´t really mind the scroll , the only problem now is to customize the css and to have the same font type / size (using font-family on h2) to match the already existing layout (http://gruberadv.com.br/).
I am employing your code from p { margin: 0.6em 0; } on.
Thank you for your support.

PaulOB · October 28, 2013, 4:52pm

Hi you should be able to change the font styles and colours as required easily enough. Just don’t change the important dimensions etc.

I notice you are missing this rule which will make the background turn white on each tab content as required.


article.tabs section:target { z-index:2 }

Ron_Wolpa · October 28, 2013, 10:49pm

Paul_O_B:

Hi you should be able to change the font styles and colours as required easily enough. Just don’t change the important dimensions etc.

I notice you are missing this rule which will make the background turn white on each tab content as required.
article.tabs section:target { z-index:2 }

You´re absolutely right , I had not noticed as I was about to leave home but made up my mind to give it a quick try just before.
Now it has been corrected. I noticed the text was sticking together between lines so I added line-height:22px; in the .tab-container {.
It looks like it solved this problem and no need for more js.
Thank you very much for your support.