Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    Member #
    17841
    I am new to the forums and found web design forums through a google search. I have a middle of the road knowledge base on html and css, and I have recently started using fireworks CS3 and Photoshop CS3 to do web mockups. I understand that I should slice the major sections and use them as background images where appropriate via CSS, but I dont get the whole TAB thing.

    Please see the attached PSD, I also have in PNG format but cant upload due to file size restrictions. I know I can use the inactive tabs as background images using UL and CSS, but what about the Active tab looking like it is attached to the frame of the page? I dont understand how to do that.

    Can someone help me figure this out PLEASE.

  2.  

  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Could you somehow please put an image instead of a psd file on here? Or give us a link to one? I don't have photoshop. Thanks.

  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Tabs are tricky. I really like how the jQuery Tabs were implemented. you should look into that. It uses only one image to create a "sliding doors" tab style.

    Here's the site: http://stilbuero.de/jquery/tabs/

    Here's the BG image: http://stilbuero.de/jquery/tabs/tab.png

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Probably the best thing you can do is to create your web page online and then
    give us a link, along with your question/problem.

    You're going to discover that any layout issues you bring-up will quickly involve
    rendering issues between browsers. We love to help out on this forum, but it
    requires us to view the site using IE6.0, IE7.0, FireFox, Safari, etc.

    That's the best way we can provide the correct answer to your question(s).

    If you don't have any websites online, you can get hosting so cheap now, you
    should just get an account for yourself (like a sandbox), where you can upload
    stuff and play around, experiment, try out different things. That would be the
    opportunity to give us a link, so we can see the same things that you do.

    Just my thoughts on utilizing this great forum. We so much want to help.


  6. #5
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    Member #
    17841
    Here is a jpeg. I understand the differences involved with IE, firefox, safari etc... I can work that out, I just dont know how to set up the initial code.

    thank you for all your replies!
    Attached Images Attached Images

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    Now that I see how your tabs are shown on your page, you might be able
    to make it much simpler to do.

    See my attached image.

    If you were to create 8 of those, all the same except for the "highlighted" tab,
    you could display that image in the same spot on each page, but change which
    image is displayed. You would use some PHP scripting to examine the URL and
    pick which of the 8 images to place on the tab bar.

    As far as creating links for the tabs, there are a couple of different ways, but that
    depends on how fancy you want to get with regards to mouse-over events.

    It would be a little harder if you wanted to do some color changes on mouse-overs.
    It could be done with CSS, or with Javascripting ... like we said before, without
    actually viewing a working web page, we're sort of in the dark here.
    Attached Images Attached Images


  8. #7
    Junior Member
    Join Date
    Dec 2008
    Posts
    3
    Member #
    17841
    Okay.. I understand what you are saying. I was thinking of just using the INACTIVE tabs as background images with hotspots, that is fairly easy to do, but wasnt sure how to do the active tab.

    I will give it a shot, and when I get a working example will let you know.


    Thanks for your help! This is a great forum!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com