I’m hoping I can get some help, I’m trying to get dynamic tabs as seen here for [URL=“http://www.thecreativesheep.ca/page8_adjust/images/sidebar_posts.png”]this I’ve been informed that it can be as simple as replacing the images.
That is where I’m a little confused and not confident enough to tackle solo, I’m hoping someone could help ?
I got it 
Now all there is left to do for the side bar is the graphic I suppose, update soon to follow…
That’s a cool image. Follow these steps http://www.visibilityinherit.com/code/jquery-fading-tabs.php and simply place the links were they go and the tabs (the content) in the stone.
Thanx. I will over look that page and update !
So the class=tabs-container you replace the color with the graphic background image ? What about the non-active tabs what do you do for them ? I can’t get the style=#tabnav li to position down so that the text can (link) fit within the tabs, I’m also having problems getting style=tabone p to position into the tabs which once completed I’m assuming is the same procedure to position the other content for the tabs?
Update: How do I get the content I want in each tab ? And why when I test it does the page just move to the bottom ?
I’ve also fixed one of my issues but I still can’t get the text Popular/Active Posts/Recent to position so they are on top of the other words that you see.
Hi,
You didn’t give us a link to the page you were testing on.
The tabs need to be separated from your background image so that you have the on and off states in one image for each tab and then swap the background position (as shown in the demo). This will take quite a bit of graphic work to get it to all match up though because of the shadows and overlays etc.
Then you will need to add a class on each list and use a unique image for each tab assuming that you are not going to use browser text. If you are using browser text then you can just use the method in the demo I put up.
The link is in message #5 where the words say link
I have a ID for each list and I have text in place, but it won’t position correctly take a look at the page you’ll see what I’ve done. I understand that I’ll have to cut the tabs out of the image, do you mean place the active and non-active tab in one image?
Hi, if you are going to use an image replacement technique, then ok. If not, then it’s a bit awkward because the text isn’t the same width/height as the image text, and …yeah lol.
If you just want the text on top for image replacement, then on “#tabwrap” give that a 1px top padding to avoid margin collapse, and then on “#tabnav” give it…oh lets say 17px top margin?
It’s sorta … awkward to place the text considering how hte image is sliced.
Uhh I don’t have any style named #tabwrap or #tabnav and when I create a style called #tabwrap and applying padding-top: 1px it doesn’t solve the problem.
What do you mean…
It’s sorta … awkward to place the text considering how hte image is sliced
I know you don’t have a style for those elements. You gave those elements in the HTML an ID though ;).
True the padding-top:1px doesn’t do crap by itself…you need the top margin set on the other element.
Reread my post. This is the CSS you should have
#tabnav{margin-top:17px;}
#tabwrap{padding-top:1px;}
Alright that worked. I hope Paul can give me the heads up regarding the images.
That text that we just positioned that will work in conjunction with the jQuery tab system or in the end I’ll have to change the text that me and Ryan fixed ?
I’m not sure what you’re asking. You’d have to see the documentation to see how the Jquery tabs are even supposed to be set up :). Some have you set up the HTML differently I’d assume.
Some have you set up the HTML differently I’d assume.
???
I’ve given you the whole working code in post #6. You just need to create the images properly. Look at my images they are double images that swap states. You just need to make these properly and make then fit.
I can’t do more than that
What confuses me is this code because referencing the jQuery tabs that I was going by which you can see in the link I posted…somewhere I don’t see that code in that example ?
html ul.tabs li.active, html ul.tabs li.active a:hover {
background:url(images/tab.png)
Just to recap the tabs active/non-active have to be together in one single graphic, just so I know and don’t do it and find out I’m wrong What about the text that Ryan and I worked on is that alright where it is ?
Hi,
I assumed you would be making graphics for the tabs because the text is too small for browser text.
You don’t seem to have added any of the JS to make the tabs work. Where is the jquery js and what’s going on here:
<!--[if lt IE 7]>
<script type="text/javascript" src="js/iehover.js"></script>
[B]// fxSpeed can be slow, normal, or fast
$(function() {$('#tabwrap').tabs({ fxFade: true, fxSpeed: 'slow' }); });[/B]
<![endif]-->
The code in bold looks like it was part of the tab function but why is it inside the IE conditional comment and why isn’t it contained within a script element anyway?
I gave you a working example of the tabs specifically for this reason that you would have all the code and all the files that you need to make this work. All you had to was create the graphics:)
I suggest that when you make the tabs that you revise them slightly so that they don’t overlap otherwise it will be very awkward.
To recap you will need 3 sets of tabs that will look something like this except that yours will be done properly with the correct transparency and contain the text on them for each tab.
Oh my mistake for putting it in a conditional statement !
I was right, in regards to the point that I had to put the on/off switch in one graphic, but is there something wrong with my current setup which was taken from that jQuery example site ? Or can I use what I currently have and just place the tab images where they should be, and I should remove the browser text that is one thing I wanted to know
I’d need to see the page with the JS in place and in working order to see if it will work with the approach you have taken. The routine I used in my example handles the current tab automatically which is why I chose it because I don’t like messing around with js.
You can always hide the anchor text off-screen if you are to be using images or use an image replacement technique instead.
