After much Googling (and a little Binging) I’m about to give up on finding a suitable Tab code for my website. There are loads of code for tabs that display info in a given space when you click or just mouse-over them. I’m trying to find one that doesn’t need a tab for the default text.
I’d like my site to have some defualt text on the “home” page and then 3 tabs that when moused-over display other text in the same space as the default text.
Here’s the page I’m working on:
http://andybrownmedia.com/ATTICSALT/Designs/SCRATCH/index.html
The words “eliminate this” is what I want to eliminate. but because the tabs scripts I find seem to always use the unordered list in order to work, I can’t just delete that part from from the code and keep the default text too. I have experimented with some messy solutions such as hiding it with “visibility: collapse;” but that isn’t at all EI compatible and it still leaves spacing issues regardless.
Any ideas?
I found it. It was in a javascript line on the HTML page saying to initialize tab 1.
Hi. I’m starting on this right now. but one last question. 
In order for NONE of the tabs to be active when the page loads (so the defualt text shows), is that just CSS coding or something I would need Javascript to control?
Thanks for this! I’m gonna try this out tonight and post again if I have any problems.
So just to be clear. basically I’m floating my default text and the text that goes with each tab (“News” “Arts” and “Theater” in the same spot, and when I activate a tab (by mousing-over) its corresponding text covers up my default text (I’ll have a background image that will do the covering). Is that right?
Thanks again!
Cheers!
-BrooklynArtist10
P.S. And I’ll do this sans-Javascript.
Hi. Thanks for your responses!
The problem I’m running into is that even leaving that space blank doesn’t get rid of it. the way I have it coded is that when you mouse-over one of the “tabs” the text color AND background colors change. Since I have padding added so that the background extends around the text, just removing the word still leaves the background.
I tried, believe me, I have tried lots of things to minimize that first <li> so that it just isn’t visible, but nothing works.
That’s why I’m hoping to find a new CSS code (or javascript) that doesn’t require that the first tab (or <li>) BE the default. Ideally, what I want to happen is that when you see this page…
http://andybrownmedia.com/ATTICSALT/Designs/SCRATCH/index.html
you see text “Welcome to Attic Salt Theatre Company. We specialize…” and all you would see above that are the words “NEWS” “ARTS IN EDUCATION” and “FAMILY THEATER”. the red box with the words “eliminate this” would not be there. But it seems I cant have the “Welcome to Attic Salt Theatre Company. We specialize…” default text without having something in that tab space ( the <li> space).
Thanks for your suggestions though!
If you want the spaces there without the text, just put in some non-breaking spaces by using
<a href="index.html" rel="sc1"> </a>
I’ve seen CSS versions of this (tabbed menu), but my brain is fried because I’m sick (or that’s just a convenient excuse)… the few I found weren’t very user friendly but I know they’re there. Maybe google around for “css tabbed menus” though that phrase means many things. You’re ok to use a version where clicking on a tab brings the user down to the part of the page where the belonging text is, and use Javascript to make it more like you were originally aiming for (related text takes up the current space under the menu bar).
But for now, with your current setup, you should be able to just have some not-menu item floated left, taking up space so that the actual menu items are still where you want them, while the first item is ignored by Javascript since it’s not part of the menu.
I’ve also seen a version done using CSS3’s :target pseudo-class, but since IE doesn’t support it, thats’ out for any actual working website… unless you do like I mentioned for the “before javascript” version which works for everyone, then use :target to show users of better browsers the same effect you’re going for (prolly by using absolute positioning, which here would prolly be ok).
Have some other element next to the ul with the default text.
let’s say for the lawlz I use a p.
<p title=“you are here”>Home</p>
<ul id=“menu”>
<li><a href=“foo”>next item</a></li>
<li><a href=“foo”>next item</a></li>
<li><a href=“foo”>next item</a></li>
</ul>
Float the p left, give it the same height, width, colours etc of your tab defaults. Float the ul next. People won’t see the difference.
Don’t let a tool like Javascript tell you what to do. It exists to be your slave.
*edit ah, I had to turn on Javascript to see that you actually have content in there. : (
nbsp??
Why not CSS?
I’m not even sure why Javascript is doing any of this anyway… what am I missing?
And, unordered lists can haz text without anchors.
<ul id="menu">
<li>Delete This?</li><-- remove text? add a width on the li instead
<li><a href="#foo">Item 2</a></li>
<li><a href="#bar">Item 3 </a></li>
<li><a href="#baz">Item 4 </a></li>
</ul>
?
Or I’m misunderstanding what you want??