18 replies [Last post]
ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

I don't know if this is actually possible but I figured I'd ask to see.

I've created some tabs using CSS. They work well.

I wanted the tabs to overlap so what I did was give the tabs a -14 left margin. This caused each one to overlap the last one like I wanted. But I want the selected tab to sit ontop of the unselected tab that's overlapping it so it stands out and sits in the front more. Is there anyway to make that element sit over any other elements?

Thanks
Stewart

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Hi there, on the basis that you have shown no code or a link example best thing to suggest is that you read up on the stacking context and use of z-index to order the stacking context which should allow you to play around with z axis positioning of selected tabs with focus/hover classes and body id links for selected page links..

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Thanks that worked perfectly.

Just had to set a z-index of 0 to the linked tabs and a z-index of 1 to the non linked tab or selected tab. Thanks for your help Smile

Stewart

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

You think I could get your honest opinion on the tabs? I like them but I'm not sure their quite right. You can see them here. It's hosted locally for the moment because i don't want to upload anything till I'm satisfied with it. None of the links work.

Thanks

Stewart

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

You think I could get your honest opinion on the tabs? I like them but I'm not sure their quite right. You can see them here. It's hosted locally for the moment because i don't want to upload anything till I'm satisfied with it. None of the links work.

http://67.167.84.2/testout2.asp

Thanks

Stewart

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

They look good, not a bad effort at all and not the simplest thing to do,

i would have all the left edges underlapping until hovered or selected, the last two overlap at the moment which looks a bit odd and you need to loose the slight but perceptible height shift.

So just a little refinement, I might also tweak the font size up a tad.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

The hight shift was intentional but if you think they'd look better without it I can take it out. The way I have it atm is the selected tab sits ontop of the tabs to it's right except the selected tab. It sits ontop of everything unless another tab is hovered over. Let me throw it together as you suggested and see how it comes together.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Actually I may well have been wrong about the height shift thinking about it, maybe it needs defining a little bolder.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

You mean like more of a hight shift? I changed the font to a 8pt bold font and made it so the spanned one isn't raised by when you hover over one it is raised. Let me know what you think.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Getting the tabs unstyled at the moment.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Which browser you using? I'm testing it and their appearing styled in IE and Firefox. Now just discovered an odd issue. I was trying to center the table so I used:

div align="center"

Works great in firefox but in IE everything is centered both the table and text within it. Any idea what a simple workaround for this is?

Thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Get rid of the align center your using deprecated nasty attributes, style only through CSS align the table using margins (auto) I've not commented on the use of tables for layout but it's really not favoured, but remove all styling and don't use any deprecated code.

I'm viewing the page on both FF 1.5 and IE6 and there is no applied styling, but that may well be due to the fact that your selecting and applying styles based on the #tab ID/hook yet I see no use of that ID in the markup :?

You need to check and validate your markup as it looks as though you have some problems with your element structure missing closing tags?

For readability and visual error checking and code reading it would be an idea to check your editors settings you seem to have some odd tabs and spacing formatting which makes it rather hard to follow the markup.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Actually I'm guessing what may be happening is your not getting full source. I've validated the page and the css with w3c and there's no errors on either. I believe the problem is that since it's the IIS server that ships with winxp pro and limits itself to 10 people it may be bugging out. If you want I can restart it and you can try refreshing it.

As far as the spacing method it's not the editor it's IIS. The best suggestion I can make on it is to use HTML tidy or something on the source to clean it up but what appears to be happening is the server isn't properly reading in the included files.

In reality the page in edit time contains the tabs and the text and 3 server side includes. If I litterly opened the server side includes in notepad or UE or anything else and copied it directly into the right spot in the document it would have a 2 space per element formatting. But for some reason IIS when it's reading it in is screwing with the spaces. I apologize about that.

I'll remove the text-align: center for you but honestly I'm not sure how the tabs aren't working for you unless it's like I think and the servers just struggling with it's limit. I'll reset it and you can see what happens Smile

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Oh and in response to the use of tables for the layout atm I prefer it because CSS doesn't seem quite up to the challenge yet in my opinion. It can be done but it seems to involve a lot of hacks that are questionably handled by different browsers and can result in some odd effects. But because of the fact that none of the table code is actually on each individual page but all in SSI's, I can easily modify it if my opinion on that changes.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Well I don't know whats going on your end but I do know that the only hook I can see on a tab related element is the class .tabsback on the parent td of the ul going through all the tab related css rulesets and changing #tabs for .tabsback ul li a{} etc brings the tabs back into life !?

So you may want to examine what your script is generating now or set up a AMP server Smile.

They are three possible tag errors right after the ul element for the tabs closes, all highlighted as 'unexpected tags'


</DIV>
</td>
</tr>

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Yeah there's gotta be a server problem because it's validating fine on my side. I just reset it. Wasn't sure if you were around so I didn't bother but the url you can get it at is:

http://67.167.84.2/index.asp

I don't know what ampserver is but right now I'm just trying to get it working before I upload it to the real server.

BTW I removed the text-align for the tabs and used margins to fix the text align on them.

While your helping I've got 2 little issues I'm having. The main table I want to align center so I attempted to align it center with <div align="center">. Works fine in Firefox in IE everything in the entire document is centered including what's within the table.

Other issue is the table cell below the copyright displays fine in firefox with borders and all. But in IE the borders aren't displayed. I read somewhere that IE won't display borders on a table cell if it's empty. Is that true and if so is there anyway around it? Thanks for your continued help Smile

Stewart

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Smile A debate on Tables VS. CSS-P haven't had one of them in a while:

Quote:
CSS doesn't seem quite up to the challenge yet in my opinion.

Not a bit of it there are issues but nothing that outweighs the flexibility and power that CSS-P offers in the hands of someone wishing to put the time in to learn a new conceptual method of layouts.

Quote:
It can be done but it seems to involve a lot of hacks that are questionably handled by different browsers


It's an absolute myth that to get CSS to work requires loads of hacks again once one has put some time into learning one realises how to avoid hacks. Hacks really are a sign of an inexperienced coder - to a large extent.

Still I wasn't drawing issue on your use of tables which is surprising for me Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ceditmx
Offline
Regular
Last seen: 14 years 50 weeks ago
Joined: 2006-04-29
Posts: 11
Points: 0

CSS Tabs

Don't really want to debate about it. I would agree that total CSS would be nice but I'm not yet up to that challenge I'd say. In the mean time my planning in making it all SSI's instead of directly in each document was for the very reason that if I descide to update it to CSS and or make any other major modifications the entire site can be changed by editing the 3 files that each page is derived from. Thanks Smile

Stewart

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS Tabs

Ah well this has appeared now in the markup Smile

<!-- This line drags in the source from the start.asp file.
 It just basicly starts the document off.  Text, HTML, etc. -->													
<!-- This is the tabs.  Since they vary based on which document
													       their in I can't readily include them in a seperate include
													       file so I just left them in the document. -->
														<DIV id="tabs">

and the markup errors have gone!

I think I mentioned earlier if the table width is less than the div then center the table using margin:0 auto;

As for debating tables I don't do that anymore I care not a jot for converting people.

As for the border problem I'm not sure as I tend not to use tables in this way but you can try position relative but it's a guess.

Hugo. [/code]

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me