If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I am trying to figure out if there is any way of getting the width and the height to be equal percentages, instead of pixel amounts, so that when a browser resizes, they remain the same proportions, but get smaller.

Something like:

Code:

width: 25%;
height: width;

The width is the governing dimension, and that works, but the height cannot be the same percentage, because then it won't be a square (it actually doesn't work at all with the height, never mind the varying dimension). It works if I put the width as a percentage and leave the height in pixel amounts, but that's not what I want.

I found a different way of doing it that works to shrink the images as the browser resizes - putting them in a list that adjusts in size - but I can't yet figure out how, in this styling, to put text behind the images that shows up on hover (image rollover).

I also don't understand why the list automatically creates 7px space between the rows, which I had to subtract.

If I tell it to not display the image on hover, then the image does disappear, but all the other images shift around to fill the hole left by the image that is not showing now.
Where in the code to put the text or some kind of text box so it appears?

I got the text to be on top of the image, and the image to disappear on hover (opacity).
But I can't get the text not to show up on top of the image in the first place.
I tried using the z-index to put it lower than the image z-index, and I also tried to change the text opacity on hover (having it set to 0 on "not hover"), but neither worked.