Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

PNG issue in iWeb 08

S

steviedee

macrumors newbie
Original poster
Oct 21, 2006
19
0
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
 
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.
 
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.
 

Attachments

  • mr2.png
    mr2.png
    40 KB · Views: 128
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?
 
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..
 
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.

linked article said:
But wait, it gets even better. Not only can we stack photos but we can select a photo and send it behind any other photo (or bring any photo forward in the stack). Select the photo whose position you want to change and click the appropriate Forward or Backward button. When working with a number of photos in a stack, each on its own layer, sometimes it might be necessary to send one photo forward and another one backward to achieve the desired effect. I have found that sometimes it is necessary to reselect a photo and reselect Forward or Backward to get the photo to change layers.
Click to expand...
73_iweb_stone.jpg
 
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
 
steviedee said:
"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..
Click to expand...

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.
 
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.
 
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.
 
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)
 
steviedee said:
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)
Click to expand...

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.
 
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>
 
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.
 
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
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back