Tab design

Question

newbie14 0 Posting Pro

14 Years Ago

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.

web-design

5 Contributors
30 Replies
212 Views
2 Weeks Discussion Span
Latest Post 13 Years Ago Latest Post by ko ko

All 30 Replies

ko ko 97 Practically a Master Poster

13 Years Ago

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.

ko ko 97 Practically a Master Poster

13 Years Ago

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.

ko ko 97 Practically a Master Poster

13 Years Ago

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.

ko ko 97 Practically a Master Poster

13 Years Ago

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.

ko ko 97 Practically a Master Poster

13 Years Ago

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.

Reply to this topic

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.

twiss 155 Veteran Poster · Answer 1 · 2011-06-07T21:30:08+00:00

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.

newbie14 0 Posting Pro · Answer 2 · 2011-06-07T21:36:07+00:00

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.

twiss 155 Veteran Poster · Answer 3 · 2011-06-07T21:48:00+00:00

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>

newbie14 0 Posting Pro · Answer 4 · 2011-06-07T22:04:20+00:00

Dear Twiss,
Here is my new link http://183.78.169.54/ct/tab2.html. The problem there are two many tabs.

twiss 155 Veteran Poster · Answer 5 · 2011-06-07T22:12:29+00:00

twiss 155 Veteran Poster

14 Years Ago

Add a width and height:

width:143px;
height:31px;

newbie14 0 Posting Pro · Answer 6 · 2011-06-07T22:26:06+00:00

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>

twiss 155 Veteran Poster · Answer 7 · 2011-06-07T22:32:42+00:00

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.

newbie14 0 Posting Pro · Answer 8 · 2011-06-07T22:47:53+00:00

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.

twiss 155 Veteran Poster · Answer 9 · 2011-06-08T18:40:38+00:00

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.

newbie14 0 Posting Pro · Answer 10 · 2011-06-10T03:02:20+00:00

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

twiss 155 Veteran Poster · Answer 11 · 2011-06-10T11:48:14+00:00

twiss 155 Veteran Poster

14 Years Ago

You didn't update your css.

newbie14 0 Posting Pro · Answer 12 · 2011-06-12T15:07:06+00:00

newbie14 0 Posting Pro

14 Years Ago

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

twiss 155 Veteran Poster · Answer 13 · 2011-06-12T17:06:11+00:00

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>

newbie14 0 Posting Pro · Answer 14 · 2011-06-12T22:13:44+00:00

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.

twiss 155 Veteran Poster · Answer 15 · 2011-06-12T23:03:36+00:00

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

newbie14 0 Posting Pro · Answer 16 · 2011-06-13T22:37:17+00:00

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.

newbie14 0 Posting Pro · Answer 17 · 2011-06-14T08:55:20+00:00

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 0 Posting Pro · Answer 18 · 2011-06-14T22:26:57+00:00

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.

newbie14 0 Posting Pro · Answer 19 · 2011-06-16T01:11:06+00:00

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.

newbie14 0 Posting Pro · Answer 20 · 2011-06-16T04:12:38+00:00

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

reckey 0 Newbie Poster · Answer 21 · 2011-06-16T16:45:03+00:00

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

newbie14 0 Posting Pro · Answer 22 · 2011-06-16T21:41:47+00:00

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

matricol -8 Junior Poster in Training · Answer 23 · 2011-06-22T18:31:18+00:00

matricol -8 Junior Poster in Training

13 Years Ago

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

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

newbie14 0 Posting Pro · Answer 24 · 2011-06-22T20:06:18+00:00

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

Tab design

Recommended Answers Collapse Answers

All 30 Replies

Recommended Answers