Looking for "DD Tab Menu" but with some changes..

[FrederikLive]

Hi All.
Im new here at DD!
I have used the DD Tab Menu before (http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm) and liked it very well, but now im in a situation that need some of that but with a few changes, Im not sure what to call it so ill just link an example..

http://www.leasy.dk/computer/baerbar/acer-lxpxe02086-baerbar-pc-med-173-skaerm.aspx

Its the yellow menu in the middle of the page. Does anybody know of a tutorial or something that could guide me further?

Regards.
Frederik

[Nile]

It seems that you want something more like: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

[FrederikLive]

True, but in my case I would need to use images as taps..

[Nile]

What do you mean "you would need to use images as taps"?

[FrederikLive]

Sorry. I meant that in this case there would be three background images.
1. For on
2. Hoover
3. For off

Im trying to work it out, but not quit sure how to.

[Nile]

Yes, okay. Well if you use the tab content script you can adjust the css and make the hover, active, link state work. http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.css

[FrederikLive]

The problem I have right now is that each button has an auto width of the text written. For these button I would need each to be 136px.

[Nile]

Now I'm confused. Can we start over with what you want? You want something like in the middle of the page on the website you linked to, correct?

[FrederikLive]

Yes, but with images as background. I have modified the code from DD Tab Menu 2:
(http://www.dynamicdrive.com/dynamicindex1/ddtabmenu2.htm)


#ddimagetabs {
height: 32px;
width: 100%;
}

.halfmoon{
margin-bottom: 4px;
}

.halfmoon ul{
padding: 13px 19px 12px 15px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.halfmoon li{
position:relative;
display: inline;
margin: 0;
width: 136px;
}

.halfmoon li a{
text-decoration: none;
padding: 13px 19px 12px 15px;
margin: 0;
margin-right: 3px; /*distance between each tab*/
font: bold 12px Verdana;
background: url(<% = strBackURL & ModPicture(1, "SpecsBtnOff.png", "", "") %>) no-repeat 0 0;
}

.halfmoon li a:visited{
color: black;
}

.halfmoon li a:hover {
background: url(<% = strBackURL & ModPicture(1, "SpecsBtnHalf.png", "", "") %>) no-repeat 0 0;
}

.halfmoon li a.current{
background: url(<% = strBackURL & ModPicture(1, "SpecsBtnOn.png", "", "") %>) no-repeat 0 0;
}

#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;

As you can see I'm trying to maintain a width of 136px.. Without luck. Maybe I'm all out of my way here? Just thought it would work with some tweaks..

[Nile]

If you wanted to use that with the tab content script you would have to adjust the code so it fits in.

[FrederikLive]

Thanks Nile!
I have made it work now, the only problem is like I said that the width of each button is automated after the characters in each link. I havent found a way to make them 136px..