Dear All,
I am learning how to create my own tab.I have at this site http://183.78.169.54/ct/tab1.html two images. Now I would like to know how to first have text over this image and make it clickable. Secondly how to make the first button to be on top and rest to be bottom of each other.

You can create an element with the text in it, and use background-image (in css) to give it the image as background.
Perhaps I don't understand the second question, but if you use div 's, there will be a return between them. If you use span , there won't.

Dear Twiss,
For the first part any example code for reference? The second part is to make the images overlap of each other. Thank you.

As a start:

<html>
<head>
<style>
.class_button {
  background-image:url('your_image.jpg');
}
</style>
</head>
<body>
<div class="tab_buttons">
  <div class="tab_button">some text</div>
  <div class="tab_button">another tab button</div>
</div>
</body>
</html>

Add a width and height:

width:143px;
height:31px;

Dear Twiss,
Below is my latest code. The problem many of tabs are repeated on the its right. Is this correct when I use class_button because you declare as tab_button?

<html>
	<head>
		<style>
			.class_button 
			{  background-image:url('dark.png'); width=14px;height:31px;no-repeat;}
			</style>
	</head>
	<body>
		<div>  
			<div class="class_button">some text</div>  
			<div class="class_button">another tab button</div>
			</div>
	</body>
</html>

Well, class_button makes less sense IMHO - do you also prepend id's with id_? But no, it doesn't make a difference.
Search for the differences: width:143px; | width=14px; Also, 'no-repeat' does nothing on it's own - but you don't need it anyway, just remove it.

Dear Twiss,
I am confuse why your define as class_button but you refer as tab_button how that works can you explain? I have now put the height and widht as per your suggestion but the size is back to the previous small size.

Oh, you're right. That was a typo, of course, I didn't notice.

What do you mean with "the size is back to the previous small size"? The div gets the width and height you give it, am I missing something? Perhaps a link helps, http://183.78.169.54/ct/tab2.html is still the old version.

Dear Twiss,
I have updated the link ready. Can you notice on your right there are too many other tabs? How to remove them?

You didn't update your css.

Dear Twiss,
Which css do you mean? I don get you.

Read posts a bit more careful - I already gave you the answer:

<html>
<head>
<style>
.tab_button {
  background-image:url('dark.png');
  width:143px;
  height:31px;
}
</style>
</head>
<body>
<div>
  <div class="tab_button">some text</div>
  <div class="tab_button">another tab button</div>
</div>
</body>
</html>

Dear Twiss,
Sorry for over looking it. How can I make both of them on the same line and just slightly over lap each other. Thank you.

Give them display:inline-block or float:left and give them a negative margin-left.

Dear Twiss,
It works greatly only problem I want the first tab to be on the top and the second one to be bottom of the first one. The same goes for third one should be bottom of the second one when they are overlapping.

Use separate class for the current tab and set the highest 'z-index' property than the others. My example like below:

<html>
<head>
<style>
.tab_button {
  background-image:url('dark.png');
  float: left;
  position: relative;
  margin-right: -13px; /* depends on your image size */
  width:143px;
  height:31px;
  line-height; 31px; /* give the same values of height, the text will be properly align vertically */
  text-align: center;
  z-index: 1;
}
.current_tab {
   background: url('*.jpg') no-repeat 0 50%; /* the background-image for the cuurent tab */
   z-index: 2;
}
</style>
</head>
<body>
<div>
  <div class="tab_button current_tab">some text</div>
  <div class="tab_button">another tab button</div>
</div>
</body>
</html>

I add a little CSS base on @twiss codes. Good luck.

Dear Zero13,
Great it looks good with the margin-right negative. But one problem the second tab in over the first tab. I want the first tab to be over the second tab.

newbie14
The 'z-index' will determine which layer is over and which layer is underneath. The highest value is top of the other (i.e., 3 is over 2, 1 and 2 is over 1), negative has the same affect reversely. So, you can handle easily by specifying the proper value for each 'z-index' with individual class or inline-style.

<div class="tab_button" style="z-index:2;">some text</div>
<div class="tab_button" style="z-index:1;">another tab button</div>

In my example above, I set the class 'current_tab' and give the different background-image and higher value of z-index than the other tabs.

.current_tab {
background: url('*.jpg') no-repeat 0 50%; /* the background-image for the cuurent tab */
z-index: 2;
}

It is easily maintain than inline-style. Hope this help.

Dear Zero13,
What does this both codes do background: url('*.jpg')
and no-repeat 0 50%; /* the background-image for the cuurent tab */ . I am now playing around I have one problem is that when I do a negative margin-right then sometime my words of the other tab is overwrriten by one previous tab which have higher z-index.

background: url('*.jpg')
and no-repeat 0 50%; /* the background-image for the cuurent tab */

That for current opened tab background for showing user which tab is currently opening. If you don't want it, never mind.
Remove 'text-align: center' from my old example. Put the 'padding-left' and take the enough space for the text.

.tab_button {
	padding-left: 15px;
}

Hope this help.

Dear Zero13,
I know that is for background image what I need is to understand the syntax like why is url('*.jpg') and what is no-repeat 0 50%; What does the 50% represent? I tried to use the padding-left: 15px; but the problem comes on the second tab is like some half image appears there.

The "url('*.jpg')" means the path of your image, which the star '*' refers to the image name. 'no-repeat' says do not repeat the background-image. '0 50%' is the position of background-image, coordinate point (x, y), which points to 0 at x and 50% at y. This is not familiar with you, you can use 'left center'. Here is short list below:

background-position: [left top] | [left center] | [left bottom] | [right top] | [right center] | [right bottom] | [center top] | [center center] | [center bottom];

equivalent to:

background-position: [0 0] | [0 50%] | [0 100%] | [100% 0] | [100% 50%] | [100% 100%] | [50% 0] | [50% 50%] [50% 100%];

If you want advance, w3school will teach you, and my example below:

<!DOCTYPE html PUBLIC "-//W3C DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}
body {
	color: #252525;
	font: normal 0.9em/1.4em Arial, Tahoma, Sans-serif;
}
#wrapper {
	margin: 2em auto;
	width: 770px;
}
#tab {
	
}
#tab-buttons {
	height: 31px;
}
#tab-content {
	background: #f0f0f0;
	border: 1px solid #c0c0c0;
	padding: 1em 1em 0;
}
#tab-content p {
	margin-bottom: 1em;
}
.tab_button {
	background-image:url('dark.png');
	float: left;
	position: relative;
	margin-right: -19px; /* depends on your image size */
	width: 143px;
	height: 31px;
	line-height: 31px; /* give the same values of height, the text will be properly align vertically */
}
.tab1 {
	z-index: 5;
}
.tab2 {
	z-index: 4;
}
.tab3 {
	z-index: 3;
}
.tab4 {
	z-index: 2;
}
.tab5 {
	z-index: 1;
}
.current_tab {
	color: #8d8d8d;
	z-index: 10;
}
.tab_button span {
	cursor: pointer;
	font-weight: bold;
	font-size: 90%;
	display: block;
	line-height: 31px;
	padding-left: 2.3em;
}
-->
</style>
</head>
<body>
	<div id="wrapper">
		<div id="tab">
			<div id="tab-buttons">
				<div class="tab_button tab1"><span>Tab 1</span></div>
				<div class="tab_button tab2"><span>Tab 2</span></div>
				<div class="tab_button tab3"><span>Tab 3</span></div>
				<div class="tab_button tab4"><span>Tab 4</span></div>
				<div class="tab_button tab5 current_tab"><span>Tab 5</span></div>
			</div>
			<div id="tab-content">
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>
		</div>
	</div>
</body>
</html>

I hope that you'll enjoy it.

Dear Zeo13,
In this case what is the image name? "url('*.jpg')" ?No name right?

No. I represent your image name as '*'. If your image name is 'background.jpg', the star '*' would has 'background'. It is nothing, not syntax nor value, just variable refers to your image name.

Hallo,


This is Reckey.

Hey there and thanks for visiting C2.0. This blog discusses all facets of web design. In particular, we take a slant on the ever-growing Sydney Web Design segment. We have a list of previous articles, Web tools, which we are going to beef up pretty soon, as well as the best variety of Photoshop tutorials and more. Stick around, and make sure you sign up to the RSS feed to stay in touch!:S

Dear Zero13,
Just to clear myself so '*' is equilvalent to background is it?

if you give * it will take all of the elements in the page

commented: Read the thread first, this is not what he meant. -2

Dear Matricol,
All elements here means any image will accepted is it? Then how it will the exact image?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.