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.
newbie14
0
Posting Pro
Recommended Answers
Jump to PostYou 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 usediv's, there will be a return between them. If you usespan, there won't.
Jump to PostAs 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>
Jump to PostAdd a width and height:
width:143px; height:31px;
Jump to PostWell, 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.
Jump to PostOh, 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 …
All 30 Replies
twiss
155
Veteran Poster
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
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
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
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
Add a width and height:
width:143px;
height:31px;
newbie14
0
Posting Pro
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
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
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
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
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
You didn't update your css.
newbie14
0
Posting Pro
Dear Twiss,
Which css do you mean? I don get you.
twiss
155
Veteran Poster
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
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
Give them display:inline-block or float:left and give them a negative margin-left.
newbie14
0
Posting Pro
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.
ko ko
97
Practically a Master Poster
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.
newbie14
0
Posting Pro
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.
ko ko
97
Practically a Master Poster
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.
newbie14
0
Posting Pro
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.
ko ko
97
Practically a Master Poster
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.
newbie14
0
Posting Pro
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.
ko ko
97
Practically a Master Poster
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.
newbie14
0
Posting Pro
Dear Zeo13,
In this case what is the image name? "url('*.jpg')" ?No name right?
ko ko
97
Practically a Master Poster
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.
reckey
0
Newbie Poster
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
Dear Zero13,
Just to clear myself so '*' is equilvalent to background is it?
matricol
-8
Junior Poster in Training
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
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.