PNG issue in iWeb 08

Discussion in 'Web Design and Development' started by steviedee, Mar 3, 2010.

  1. steviedee macrumors newbie

    Joined:
    Oct 21, 2006
    #1
    Hi,

    I am currently trying to place CSS buttons behind PNG backgrounds in iWeb.
    The issue is with the alpha transparency in the PNGS. When the buttons are placed behind the PNG, they cannot be recognized, but CAN be seen.

    Is there anyway to make the buttons work behind PNGS?

    thanks, heres the site

    http://stevenewsite.embosseddesign.com/Product_Services.html

    Youll also notice here:
    http://stevenewsite.embosseddesign.com/Cell-Gallery.html

    the flash navigation dosnt work behind the png either.

    Also, i have some html rollovers in place which ARE working, but they are in front of the PNG. However, these are slow to load, so i am switching to CSS buttons. If you know a way to make the HTML rollovers load when the page loads (as opposed to when the mouse rolls over the button) that would be good to know too.

    Thanks!
    steve
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    Not, really, they're behind it, where you can't click. It's part of the point to stacking. I'm not really sure what I'm suppose to look at on the linked pages.

    As far as getting images to load on load, look into CSS sprites.
     
  3. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #3
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Well, here's one solution, though i don't know the best way to implement it in iWeb as I hate it, but most of it deals with adjusting the z-index of the various pieces, which determine the stack layering. I'm attahcing the resulting effect.

    1. Set the top Products tab to a z-index of 2, and also set all those little square buttons to 2 as well.
    2. The big png is already set at z-index of 1.
    3. For the bottom Products tab, set it to z-index of 0.
    4. Lastly, set the height of the top Products tab to 44px (currently 65). This will make seem like it's under the png.
    Again, not sure how to tell iWeb to change the z-index level, and I'm not at my Mac to look around.
     

    Attached Files:

    • mr2.png
      mr2.png
      File size:
      40 KB
      Views:
      62
  5. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #5
    thanks champ,
    will give it a whirl

    i vaguely remember reading something about this, so it could be the right method.

    I think in iWeb to change the z axis you "show layout"? sound familiar?
     
  6. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #6
    mm couldnt figure it out:(

    that method sounds good, but i'm not sure if iweb is capable of changing the z axis- a google search picked up nothing..

    hmm..
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    My searching turned up this lengthy write-up where it discusses moving items forward and backward. Here's a snippet that you can use to help find the spot on the page. There are pictures to go along with it. The article is using iWeb 08, so the controls may be located elsewhere.

    [​IMG]
     
  8. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #8
    cool, thats what ive been doing, i just didnt know it was called "z axis"


    "Lastly, set the height of the top Products tab to 44px (currently 65). This will make seem like it's under the png."

    would you mind expanding on this method, i still dont quite understand how the CSS button will appear to be under the big grey border PNG is it is set to be at the front..

    thanks alot
     
  9. designguy79 macrumors 6502

    Joined:
    Sep 24, 2009
    Location:
    Michigan
    #9
    It is actually "z-index"

    HTH,

    ~ Jeremy
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    It trims the height of the button, cropping off the bottom portion so it fits flush with the png. This will make it look just like the screen shot I provided. In that screen shot the Products tab is the front most item. So think of adjusting the height as cropping it, so you no longer see the curved border at the bottom of it.
     
  11. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #11
    awesome. Thats a nice work around, so thankyou.

    Theres still the issue of flash navigation not working under png transparency tho...

    I'd like to design the site, so the metal looking "embossed" graphic is always on top of underlying flash, so it appears as tho the metal part is "spitting out" information.

    http://stevenewsite.embosseddesign.com/Cell-Gallery.html

    this page shows the flash in that position, but the nav arrows wont work because they are under the png...

    thoughts? and once again, thanks.
     
  12. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #12
    My only thought is to place transparent link boxes on top of the flash and png that cover the area of the Flash buttons. Then have the links send a signal to the Flash to engage the covered up button. I don't do anything with Flash so I have no idea what's needed for that. The effect is similar to a image map.
     
  13. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #13
    hmm nice thought,unfortunately i dont have the skills to get it to work. i created the flash banners in "bannerzest" so the program took care of all the code!

    lastly, if you think i use this

    http://csssprites.com/

    and reupload my html png buttons, they will load faster?
    (the css method you provided is cool too, but i may have to make some more complicated shape buttons down the track)
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Use of CSS Sprites lessens the number of files that a browser needs to download, but generally there is the same amount of file size the download, but is slightly smaller (as in mere bytes), so would result in a sightly faster download. The more important benefit is that there's no additional load time for doing rollover effects (when sprite is used for buttons) because the image got loaded to show the first state of the button.

    The shape of your buttons doesn't matter with sprites so that won't be an issue. I've seen sites use a single image file to hold dozens on individual images on it for use on a page. The buttons has different sizes and shapes.
     
  15. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #15
    Hi

    could someone help me with this code:
    it is for a rounded button...

    i would like it to look and act like the tabs currently on this page:

    http://stevenewsite.embosseddesign.com/Products.html

    thanks

    <style type="text/css"><!--
    #roll a {
    width: 200px; /* sets the width of your buttons, remove this line if you want variable width */
    display: inline-block;
    text-decoration: none;
    }
    #roll ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #roll ul li {
    list-style-type: none;
    background: none;
    }
    #roll ul li a, #roll ul li a:visited { /* styles for the default button state */
    margin: 0 0 5px 0;
    padding: 0 15px 0 15px;
    line-height: 32px; /* this value must be at least twice the border-radius value */
    color: #AAA;
    background: #EAEAEA;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 16px;
    text-transform: lowercase; /* remove this line unless you want to use lowercase, uppercase or small-caps */
    letter-spacing: -.06em; /* should be set to 0 for most cases */
    -moz-border-radius: 16px;
    -khtml-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    }
    #roll ul li a:hover { /* styles for the rollover button state */
    color: #CCFFFF;
    background: #0099FF;
    }
    --></style>
    <div id="roll">
    <ul>
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    </ul>
    </div>
     
  16. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #16
    Make sure to use the code tag in your post when posting code. It makes it easier to read. Can you explain what isn't working in your CSS? Just saying you want it to do something doesn't help much.
     
  17. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #17
    thanks for replying angel,

    I'd like the code to do a couple of things.

    When normal: Show a shade of grey in the shape of a rounded tab style button. But cut off the base at the half way point so it looks like a tab, rather then a button.

    When hovered. Show a green colour, and have a specific font show a title vertically down the button.

    sorry if the code i provided cannot be altered to do this. i'm new to all of this :D:D

    thanks
    steve
     
  18. steviedee thread starter macrumors newbie

    Joined:
    Oct 21, 2006
    #18
    also, just one button, not 3 as seen in the code, sorry!
     
  19. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #19
    To just have the top have rounded corners, you can specify that with the border-radius CSS. This page shows the proper syntax for specifying the border-radius for specific corners only for each browser.

    Specifying styles only for hover states is easy, just use the hover selector like the code you show has, #roll ul li a:hover

    As far as the vertical text, on that page it's an image of text and not text itself. That text is part of the same image as the tab, so they took the easy approach.
     

Share This Page