1) I would like the width of tabs are either set individually (not all equally spaced) or have a width according to the text they have, so as for instance the years 2007-2012 have a smaller width while the first tab is wider, therefore all text is visible.

When the tab is hovered, the botom-border goes away (but only part of it goes away). Can't figure out the problem.

I would like that when a tab is clicked, the background colour changes (even if mouse is not over) so as to show which tab is being read. I tried with a:selected but without success.

These are the main problems; hope I can find your kind help for a solution

Thanks

Stepen

ronpat
—
2013-08-25T21:02:15Z —
#2

You can try this. There is a slight jog when the longer words are hovered because you change the font style to italic. You might consider a different font that does not change character width or word spacing when italicized.

I was unable to understand whether the presence or absence of the bottom border was the problem, so that remains unchanged (the border goes away).

Well, first things first. Don't needlessly inconvenience your users, the copyright protection script you're running does that in spades since it will block copy and past, bookmarking, etc all because you're trying to protect html source that anyone that knows what they're doing can access anyway. You're basically just making people go through an extra step or throw up their hands and say why even bother or how ridiculous.

Remove the width, one is fixing the width of the text/link area in each tab the other is fixing the width of the tabs themselves. The default width setting for the inner area of each tab is auto in that case and it manually adjusts based on length of text like you want. If you need upper or lower limits just use min-width or max-width. This will also fix your bottom border issue becuase what you're seeing is the overlapping borders from the other tab elements.

Your margin-left, in the red, will cause spacing in your tabs once you remove the width, it's not doing anything for you otherwise and for the effect you want should probably be removed. If what you were trying to do is align the tabs with the table replacing it with left:24px should do that, because you're using positioning top, left, right, or bottom can adjust it's position offset.

:selected applies to form elements, what you are looking for is most likely :active, make sure you place it below :hover in your style sheet.

and seriously, no one is going to steal your site's look and feel.

SteveMif
—
2013-08-25T23:10:00Z —
#4

Hi Belsnickie and RonPat, thanks to you, things have improved a lot. I also did more tweaking to have a smoother tab.

Everything is working well now except:

1) The selected tab (the one the user is reading) changes colour when clicked on (via the active link) but then it goes to the original colour after clcicking and hoverout. I want that the colour remains, like this example but using different tabs:http://www.maltawildplants.com/

2) A minor thing and probably impossible, but the top border of the contents area is missing at the part where there is no tabs. Could it be included?

I removed the right click deactivation script. It was meant for other webpages on the same style.

ralphm
—
2013-08-26T00:52:56Z —
#5

The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it. Perhaps @Pullo can help with that.

ronpat
—
2013-08-26T01:36:25Z —
#6

ralph_m said:

The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it. Perhaps @Pullo can help with that.

Seems to me that the styles of the anchors ought to be handled entire with CSS. So far, I can see no advantage to having JavaScript control these styles other than highlighting the current tab. If JavaScript is overriding the CSS, then that's a different story.

I should be able to offer a CSS solution within a few minutes... maybe... if needless JavaScript doesn't interfere.

This is probably because he's using old old outdated table formatting, etc.

ronpat
—
2013-08-26T03:35:01Z —
#9

Belsnickle said:

This is probably because he's using old old outdated table formatting, etc.

I disagree. Outdated, old table code can and should be essentially error free. Unfortunately, these days, many new coders underestimate the value of writing good HTML code, then wonder why their equally squirrely CSS doesn't work. :sigh: It's a learning curve.

Belsnickle
—
2013-08-26T03:37:36Z —
#10

The problem is though that depending on your validator settings it will flag is as invalid code even if it's functionally not an issue. Particularly if you have it set to HTML 5 or HTML. It also has a tendency to flag valid encoding as invalid depending on the HTML setting it's validating as and on what looks to be a largely html3 codding conventions site I'd imagine you'd get more than a fair bit of those.

Keep in mind I haven't actually looked at it in the validator yet.

Edit: in his case there's a bit of that, like absmiddles and margin's on those elements but most of it is typos and invalid chars and such so yeah, plenty of TLC needed

ronpat
—
2013-08-26T04:37:47Z —
#11

The validators are tools. They flag as invalid the things that they have been programmed to flag. Part of the learning curve is learning how to use the tools that make your code better. One can write perfectly valid code that totally fails to render as desired. One can also write pages that are marginally invalid that render just fine.. New technologies sometimes use techniques that validators do not recognize. Nevertheless, one cannot lose by validating his code. Squeaky clean valid code is not necessarily a sign of success; but understanding exactly why the code is not valid is very important to writing stable, durable, cross-browser compatible code. The validators are just tools to help a coder reach that goal.

Old table code can be perfectly valid and stable.

With a bad doctype, though, all bets are off :eek:

This poster's code is a learning lab of errors. Good stuff.

Pullo
—
2013-08-26T06:16:45Z —
#12

Hey Ralph,

ralph_m said:

The script that controls this isn' set up properly. It's meant to set a class of "active" on the tab that's currently showing. If it wre doing that, you would set a style for the pab with a class of "active". The script is far from doing that, though, so needs a JS person to fix it.

This bit of JS is setting a class of "selected" on the link that is currently selected:

This is probably because he's using old old outdated table formatting, etc.

I know, I have created this website in 2006-7 and I am not a coder by profession. When I started to make my first html website in 1999 (I remember the prog was called hotdog) , the way at that time was table design and I kept that mentality all over this time. I know coders say it is outdated/old, but it is easy and works most of the time. Is there a link discussing the disadvantages of table-design. Nevertheless, I thought about the possibility of nested tables might be a problem here and I have tried the tabs & content out of any table and still it did not work.

SteveMif
—
2013-08-26T06:40:14Z —
#14

Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area. Some suggested it can be done via java-script, some said it can be solved via css. (probably it's both!)

ralphm
—
2013-08-26T06:46:55Z —
#15

Pullo said:

This bit of JS is setting a class of "selected" on the link that is currently selected ...

Thanks Pullo. Blimey, that's not happening in my browser. There are no classes on any tab when it's selected.

ronpat
—
2013-08-26T07:01:53Z —
#16

ralph_m said:

Thanks Pullo. Blimey, that's not happening in my browser. There are no classes on any tab when it's selected.

Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area.

Oh dear. Sorry about that!I'll sort that out now. Hang fire!

ronpat
—
2013-08-26T07:13:39Z —
#18

SteveMif said:

Hi Pullo, thanks for your time. I see that you are optimizing the code for www.maltawildplants.com (MWP) which at present I am happy about as it does the job, but the code in question is that on www.MaltaNatureTours.com/comments.php (MNT) where I wish to have the selected tab to stand out by being coloured differently or the same as the content area. Some suggested it can be done via java-script, some said it can be solved via css. (probably it's both!)

Yes, it's both. The CSS that I posted in #7 should fix the top border on #Content_Area and allow the bottom of the active tab to flow through to #Content_Area. You will need to write a similar JavaScript for the comments page and set a CSS class for .selected and describe it.

I am soon off to the library, but have enough time to reply RonPat about the border.

The content area css at #7 did not work well for me. Apparently the Clear:both was essential. Anyway, your code generated a grey line border below the tabs which was permanent. I want that the colour of the tab and the content area background be the same and merge as one body. Since I am not good to explain in words, here I attach an image example. However the bottom pic lacks the grey border were there are no tabs. I think the border has to stay (the way you suggested) but the selected tab (at the moment working on hoover) has to get 2pix larger so as to overlay and cover the top border of the content area.

The image below was taken with the mouse over the tab. I want to stay like that when selected (Just to remove any doubts of what I wish to achieve)