Help with some silly "trouble" with a design.

[chorcho]

I made a wonderfull photo gallery and I had some trouble. The pics enlarge on mouse over, but, the problem is that in resolutions like 800X600 or 1024X768 the enlarged images "hide" behind the flash menu... for better understanding, have a quick look please.

http://www.christianvidal.com.ar/galecvq.htm

I also attached a screenshot of the problem...

Any solutions? Any thoughts?

Thanks very much!!!

Chorcho

[Airshow]

Chorcho,

I can think of two solutions. Unfortunately I'm sure that neither is what you want to hear!

1. Use a regular JPG, GIF or PNG in place of the .swf. You can achieve very similar mouseover effects with an image map and dhtml mouseover handlers. GIFs and PNGs can be animated, though I'm not sure about the extent to which PNGs are supported by the common browsers. I would choose GIF.

2. Expand the .swf to include the thumbnails and their large versions. That way you would have full control of the layering but you would have to throw away what you have already achieved.

Airshow

[chorcho]

Chorcho,

I can think of two solutions. Unfortunately I'm sure that neither is what you want to hear!

1. Use a regular JPG, GIF or PNG in place of the .swf. You can achieve very similar mouseover effects with an image map and dhtml mouseover handlers. GIFs and PNGs can be animated, though I'm not sure about the extent to which PNGs are supported by the common browsers. I would choose GIF.

2. Expand the .swf to include the thumbnails and their large versions. That way you would have full control of the layering but you would have to throw away what you have already achieved.

Airshow

Hey! Hi Airshow!, thanks very much for the quick response and the advise...I really thought it was a simple problem...now I see that it isn't. I was thinking I'd rather go with an html without the flash menu at all, with a back button an nothing else... I think it'll be cooler than "replacing the menu". It isn't really needed in the galeries...

Thanks very much anyways!!

Chorcho

[almostbob]

Your layout problems may be cause by the tables used for positioning, tables are not meant for layout
remove the tables and position the elements with css
the css that does the positioning can set the z-index of the element, to an arbitrarily high number (1000), and cause it to remain on top of all other elements

[Airshow]

In that case you could create a JPG version of the guitare and use it as a background image with the Back button on top.

Not too tricky but please ask if you need help with it.

Airshow

[chorcho]

Hi almostbob! How are you?! Hey thanks for the help, really appreciated...I simply don't know how to do that, cause I'm not a designer...I'm just a friend helping another...but i'm very interested in design.

I read something about the z-index, but i couldn't do it...anyways It's very interesting what you're telling, I'll try to learn it for future web projects! I always use tables for positioning, not css.

I thought that I could someway make the flash go back...

Thanks again , greetings, chorcho

[chorcho]

In that case you could create a JPG version of the guitare and use it as a background image with the Back button on top.

Not too tricky but please ask if you need help with it.

Airshow

Hey! thanks very much for the suggestions Airshow. That could be good. You've been very helpful.

Greetings!
Chorcho

[Airshow]

Chorcho,

Wait a mo', I've just found something on the web .....

There's an indication that swfs can be forced into the DOM as per regular html elements such that they will obey css z-index. Default behaviour is to sit on top of everything else regardless of z-index.

Try inserting these special attributes into your object/embed tags:

<object .....>
.....
<param name="wmode" value="transparent">
.....
</object>
<embed ..... wmode="transparent" .....>

I've not tested but where I found this several folks reported success. (As with everything, some reported failure). Suggest you test in a variety of browsers.

Airshow

[Airshow]

Another thing ..... you will most probably have to do the css positioning thing as per a-Bob's post. By all means try it in a table first - it may just work.

Css positioning is a bit tricky if you haven't done it before but not beyond the whit of most people. Please ask and I'll point you in the right direction.

Airshow

[almostbob]

Im pretty sure the point at which the images go behind, is the edge of the table cell<td>
example of css to lyout columns

<style type='text/css'>
.left { text-align:right;
float:left;
width:25%;
font-size:100%;
margin:0;
margin-right:10px; }
.right { float:right;
width:10%;
font-size:85%;
margin:0;
margin-left:10px; }
.center { margin:0;
font-size:100%;
z-index:1000; }</style>

<div class='left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. Proin lobortis purus sit amet lacus laoreet imperdiet. Suspendisse at nulla rutrum quam volutpat convallis. Morbi non orci neque, quis vulputate neque.</div>
<div class='right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. </div>
<div class='center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. Proin lobortis purus sit amet lacus laoreet imperdiet. Suspendisse at nulla rutrum quam volutpat convallis. Morbi non orci neque, quis vulputate neque. Vestibulum tellus massa, vestibulum vitae pulvinar vel, interdum vitae nunc. Mauris tristique malesuada diam id bibendum. Sed vehicula aliquet quam vitae porta. </div>

If you put the flash in a div with class='center' it should inherit the z-index of the center class and float above other elements

[chorcho]

Chorcho,

Wait a mo', I've just found something on the web .....

There's an indication that swfs can be forced into the DOM as per regular html elements such that they will obey css z-index. Default behaviour is to sit on top of everything else regardless of z-index.

Try inserting these special attributes into your object/embed tags:

<object .....>
.....
<param name="wmode" value="transparent">
.....
</object>
<embed ..... wmode="transparent" .....>

I've not tested but where I found this several folks reported success. (As with everything, some reported failure). Suggest you test in a variety of browsers.

Airshow

GENIUS!!!! This worked awesome! Tested on Windows Explorer and Mozilla Firefox, and in both worked!

Check it out if you want to...

http://www.christianvidal.com.ar/galecvq.htm

Thanks very very much! Again you've been extremely helpful!!

Greetings from Argentina...

Chorcho

[chorcho]

Im pretty sure the point at which the images go behind, is the edge of the table cell<td>
example of css to lyout columns

<style type='text/css'>
.left { text-align:right;
float:left;
width:25%;
font-size:100%;
margin:0;
margin-right:10px; }
.right { float:right;
width:10%;
font-size:85%;
margin:0;
margin-left:10px; }
.center { margin:0;
font-size:100%;
z-index:1000; }</style>

<div class='left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. Proin lobortis purus sit amet lacus laoreet imperdiet. Suspendisse at nulla rutrum quam volutpat convallis. Morbi non orci neque, quis vulputate neque.</div>
<div class='right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. </div>
<div class='center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla, turpis ut viverra aliquet, nibh metus facilisis purus, ut ultrices est diam quis neque. Proin lobortis purus sit amet lacus laoreet imperdiet. Suspendisse at nulla rutrum quam volutpat convallis. Morbi non orci neque, quis vulputate neque. Vestibulum tellus massa, vestibulum vitae pulvinar vel, interdum vitae nunc. Mauris tristique malesuada diam id bibendum. Sed vehicula aliquet quam vitae porta. </div>

If you put the flash in a div with class='center' it should inherit the z-index of the center class and float above other elements

Hi Bob! hey, I'm glad to tell that Airshow solution worked really fine.

But, I'll try to learn what you told me, cause I think It's a very good lesson, so thanks very very much too!!! I'll bothering you again trying to learn this...

Greetings from Argentina...

Chorcho

[Airshow]

Chorcho,

I though that was a long-shot but it worked!!!! It looks good in Opera 9.01 too.

Aha, Argentina. Cool :cool: but hopefully not too cool at this time of year.

Best wishes.

Airshow