How hard can this possibly be?

[gus]

I've been struggling with the sliding tabs menu for several days now. My query of last week got no replies, but I have a hard time believing that this can't be solved.

This sketch should make the desired positioning clear:



But at the moment, the sliding tabs menu hugs the far left of the screen regardless of efforts to align it as shown. If I modify the css for #slidetabsmenu to position:absolute, the menu reappears halfway across the page to the right.

I'd sure be grateful if someone could point me, and many thanks.

-g-

[5starrebel]

try putting the menu and everything else..in the same div as the content or in a new div and apply margin/positioning properties as needed

[gus]

Yes, I already have the whole shebang inside of this div:

#main {
margin-left: auto;
margin-right: auto;
height: 348px;
width: 100%;
position: relative;
}

... but that doesn't seem to do anything. Maybe it's the rules I've used? Here is the stock menu container as provided on this site:

#slidetabsmenu {
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid gray;
}

My html looks something like this:

<div id="main">
<div id="slidetabsmenu">
<ul>
<li id="current"><a href="index.html" title="Home"><span>Home</span></a></li>
<li><a href="about.html" title="About"><span>About</span></a></li>
<li><a href="gallery.html" title="Gallery"><span>Gallery</span></a></li>
<li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</div>
<br style="clear: left;" />
</div>

[BLiZZaRD]

Your html looking "something" like that could be the problem. What does it actually look like?

Also, I would suggest layered divs instead of nesting, for this purpose.

You can see a good example/tutorial here

I would suggest just making it a header though.... might be easiest (last link, look at 2 or 3 column options and check how the header was done )

[gus]

Thanks a million. Your link is a great one. I found everything I needed.

-g-