Style Sheet and Different Size Pictures

[bruceleibowitz]

I am using this particular style sheet on my pBase site. Here is an example:
http://www.pbase.com/bruceleibowitz/gallery/igm

All of the thumbnails size and position of the text caption is specified in the style sheet so each looks the same. But what if I want to add a picture taken in a vertical format, like I did on the above page? The thumbnail would have to be a different size. How can I do that on the css, for just one thumbnail on the page?

bruce

[dang]

The box size is controlled in this section of code:

Code: Select all

a.thumbnail, a.thumbnail:link, a.thumbnail:visited, a.thumbnail:active {
     border: rgb(0, 0, 0) 1px solid;
     margin-bottom: -10px;
     padding-top: 15px;
     display: block;
     color:white;
     background: rgb(41, 51, 61);
     width: 190px;
     height: 140px;

Change the height to 190 (or whatever you prefer). This will give you a square box that both formats fit.

To understand working with sheets, I highly suggest reading this thread: viewtopic.php?f=8&t=13408

[bruceleibowitz]

ok, yeah I see where that will make the vertical thumbnail look ok but if you look at it again, I changed it, now the square ones look like they have too much dead space. And I can't move the caption text up into that dead area because it'll be over the picture on the vertical one. The big problem I see is how to accommodate both vertical and normal format thumbs. Is there a way to specify one particular thumbnail to be a certain size?

[flemmingbo]

It's the same thumbnail class for both horizontal and vertical photos, so you end up with a compromise no matter what. You can have different thumbnail definitions for the two.

However you can make the thumbnail table cell (actually it will be the whole row of thumbs) change size depending on whether it's a horizontal or vertical image. You will loose your hover effect though, cos doing this means having no height size on either the a.thumbnail or td.thumbnail class. If you look at my galleries you will se this in effect, a table row of thumbs with a vertical image are higher than a row with only horizontal shots.

regards,

Flemming

[bruceleibowitz]

How can I make a different thumbnail class definition for vertical?

[dang]

Flemming wrote:

It's the same thumbnail class for both horizontal and vertical photos, so you end up with a compromise no matter what. You can have different thumbnail definitions for the two.

I wasn't aware of this. I'm thinking he meant to say "can't"...

Flemming wrote

However you can make the thumbnail table cell (actually it will be the whole row of thumbs) change size depending on whether it's a horizontal or vertical image. You will loose your hover effect though

You can view the coding with Firefox Web Developer on our sheets to see different ways. If you're not using Firefox, refer to the link I posted earlier.

[flemmingbo]

Flemming wrote:

It's the same thumbnail class for both horizontal and vertical photos, so you end up with a compromise no matter what. You can have different thumbnail definitions for the two.

I wasn't aware of this. I'm thinking he meant to say "can't"...

Yes a small typo Thank Dang. Indeed I meant "can't" - you can't have different thumbnail definitions for horizontal and vertical.