jQuery & CSS Tabs

Developing a 1MB+ site online with a dialup connection clearly presents practical difficulties. Have you considered cutting your coat according to the cloth: designing with your own technological limitations in mind? Achieving results with limited resources is an indicator of good design skills, it just takes a change of approach: to consider “weaknesses” as strengths.

Alternatively, you could weigh the cost in time inflicted upon you by dialup against that required to earn sufficient funds to pay for broadband. Maybe your personal circumstances prevent this, I don’t know. I do know that for the kind of stuff you’re doing, dialup is a millstone in a straitjacket. :frowning:

I have thought about this but I want to proceed forward to what I have in progress already, I just would like to know how I can get those tabs to position whether it’s a work around I could do or hopefully someone could help.

“how to tabs to position”

Funny. This reminds me of my wife. I’ll be in the shower (or other like background noise) and she’ll say “areyougoingtoyourmothers?”. I’ll say “what I couldn’t understand you?”. She’ll repeat it in the exact same tone and loudness “areyougoingtoyourmothers?”. I’ll Say “what?” again. This cycle will repeat until I finally tell her; “I did not understand you for a reason! Simply repeating it in the same language and tone will produce the same results!” Either change the wording of the question or, in her case, pronunciate each word more clearly! In her case, a simple “are - you - going - to - your - mothers?” would enable me to here her loud and clear. Unfortunately, with marriage, these type of scenarios never seem to get fixed; only repeated. But this is NOT a marriage.

It’s just a long engagement.

Design suggestion: Before getting down to styling the tabs, make both the background and tabs bigger. Maybe 120%. Currently the text is way too small and the background provides little room for content. The visible square edges of the background need cleaning up too.

I asked earlier whether you’d factored in how content overflow will be handled. If you plan a fixed height and scroll (not a good idea IMO) then you need to consider the space that scroll bars will occupy.

Funny. This reminds me of my wife. I’ll be in the shower (or other like background noise) and she’ll say “areyougoingtoyourmothers?”. I’ll say “what I couldn’t understand you?”. She’ll repeat it in the exact same tone and loudness “areyougoingtoyourmothers?”. I’ll Say “what?” again. This cycle will repeat until I finally tell her; “I did not understand you for a reason! Simply repeating it in the same language and tone will produce the same results!” Either change the wording of the question or, in her case, pronunciate each word more clearly! In her case, a simple “are - you - going - to - your - mothers?” would enable me to here her loud and clear. Unfortunately, with marriage, these type of scenarios never seem to get fixed; only repeated. But this is NOT a marriage.

I get your point, but I don’t see the relation between you and your wife and the whole marriage circle. Besides if you can’t hear your wife when she is talking to you while she is in the shower and the physical distance between you too is great, then maybe you should go closer to the bathroom or in the bathroom when she is talking therefore you would understand her that possible solves that marriage problem and I’m not even a marriage councilor :slight_smile:

Design suggestion: Before getting down to styling the tabs, make both the background and tabs bigger. Maybe 120%. Currently the text is way too small and the background provides little room for content. The visible square edges of the background need cleaning up too.

For the time being I just want to get the tabs positioned, from that point I will over view on the tabs text size, I’m not pouring cold water on your suggestion you possible are right but I want to see how it works before hand. The square edges are already accounted for, I did see them before you pointed it out :slight_smile:

I asked earlier whether you’d factored in how content overflow will be handled. If you plan a fixed height and scroll (not a good idea IMO) then you need to consider the space that scroll bars will occupy.

There will be no scroll, it will work as there won’t be a lot of content going into that area.

Every individual learns differently and at a different pace. What may seem simple to you might prove difficult to comprehend for someone else.

LOL - no I’M in the shower and SHE is talking. If it was reverse, I would be sure to go close to the shower and say it loud and slow. Marriage problems/disagreements (at least mine) tend to repeat themselves over and over again and never resolving. As this is not a marriage, I was simply saying this topic/phrase shouldn’t be repeating, it should be fixing.

Every individual learns differently and at a different pace. What may seem simple to you might prove difficult to comprehend for someone else.

Your right, and I’m sorry SiberianHuskey. :slight_smile: Although, to be clear, my comment had nothing to do with a learning curve. I was merely trying to get across (in a funny way) that simply repeating the same thing over and over again is not likely to bear favorable results.

See, I was actually trying to just be helpful - LOL. Don’t mind me - I’m just grumpy. I’ve been hitting the weights super hard lately and taking all my supplements (legal ones).

SiberianHuskey, why don’t you take my link that I posted in like post #2 (it works!) >> copy the code >> and paste it onto a page on “your” computer. Bam! Now you have a working copy (AKA tabs to position). Now simply marry your code to mine. Little by little. This is how I do it. If I have a tuff thing to code, I usually get up to like test6.php by the time I’m done. test1.php being your copy and paste. test2.php being your first attempt at marrying my code with yours. Keep going until you have perfected it. Then simply add it to your real page. This is how it is done!

For info: I’ve PM’d the OP some valid code with working tabs, which can be honed further here if he wishes.

Ok - thanks for letting us know and thanks for stepping in as I’ve been busy this week :slight_smile:

SiberianHuskey, why don’t you take my link that I posted in like post #2 (it works!) >> copy the code >> and paste it onto a page on “your” computer. Bam! Now you have a working copy (AKA tabs to position). Now simply marry your code to mine. Little by little. This is how I do it. If I have a tuff thing to code, I usually get up to like test6.php by the time I’m done. test1.php being your copy and paste. test2.php being your first attempt at marrying my code with yours. Keep going until you have perfected it. Then simply add it to your real page. This is how it is done!

This is a technique I could have done, but now that I’m this far along I might as well finish to the end of the road, but I will take it into consideration for next time :slight_smile:

I’ve also got the PM’s but the code is not visible being seen.

The code in question is available for scrutiny.

It wasn’t as straight forward as first intended ? I reviewed some of Victors code and I noticed he has to be a <div> in relation to each tab where the content would be after each tab was selected. You can view the page with the fixes mentioned by Victor as the same location as it was previously, although the tabs are little to far apart, I will fix that and could someone show me a screen shot of what it looks like on their browser or via only BrowserCam ?

I think there is one thing missing, but I’m not sure :slight_smile:

No extra divs have been added, though I believe one closing tag was needed to in order to validate (which also fixed rendering problems for webkit browsers).

The formatting of the markup has changed and comments been added to clarify the purpose of closing divs so this may have given the impression of greater change. The main difference is that the bg_sidebar div is no longer needed.

CSS pertaining to the sidebar has been grouped together for easier manipulation.

…the tabs are little to far apart…

If you want the tabs to butt together, set #tabnav li to width:63px; and then center them above the background, if you wish, by adding some margin-left to ul#tabnav e.g. margin:5px 0 0 12px;