Border Line

[yhtang]

Dear Sir,

I have currently taken some photos with my Olympus Pen-ft and after I scan and when I upload it to my style sheet, it seems the size of the photos cannot fit into the style sheets i.e. broderline is not enough

http://www.pbase.com/yhtang/city_life_&page=all

Could anybody advise that what are the problems and how can I adjust the border line to fit this case??

Thanks,
Ice (Pbase-user)

[dang]

Okay, I see you mean the background boarder box. It's controlled in this section:

Currently, it's set to a width of 744 pixels, so you need to increase it to make more room. The code should be like this:

Code: Select all

}
.thumbnails{
   border: rgb(0, 0, 0) 1px solid;
   padding: 4px 4px 4px 4px;
   margin: 4px 0px 0px 0px;
   margin-left: -370px;
   width: 800px;
   background: rgb(52, 52, 52);
   position: relative;
   left: 50%;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-topleft: 10px;

Note though, this is going to require people using low screen resolutions to scroll to view all of it.

[yhtang]

Okay, I see you mean the background boarder box. It's controlled in this section:

Currently, it's set to a width of 744 pixels, so you need to increase it to make more room. The code should be like this:

Code: Select all

}
.thumbnails{
   border: rgb(0, 0, 0) 1px solid;
   padding: 4px 4px 4px 4px;
   margin: 4px 0px 0px 0px;
   margin-left: -370px;
   width: 800px;
   background: rgb(52, 52, 52);
   position: relative;
   left: 50%;
   -moz-border-radius-bottomright: 10px;
   -moz-border-radius-topleft: 10px;

Note though, this is going to require people using low screen resolutions to scroll to view all of it.

Thanks Dang,

Do you mean the viewers required to scroll down the bar and to prevent the problem occurred, the trade-off is the lower my photo resolutions?

Pls kindly advise.

Rds,
Ice

[dang]

Sorry, not what I mean.
If the box becomes too large, people using lower screen resolutions will need to scroll back & forth. To set screen resolution, you close all windows, and click on the blank screen. A menu pops up, and you click the "settings" tab. There, you have the option to set your viewing resolution. The smaller the size, the less screen there is because images, and browser size increases. Anytime you're making pages, you want to check them with various resolutions to be sure they'll fit.

So instead of making your boarder box 800 pixels wide, you may need to decrease the boarder size around the images to fit into a smaller box to keep the proportions correct to avoid low resolution users from having to scroll.

Another option might be to have less space between the thumbnails, which is set via your gallery edit page instead of in the css. This information can be found in the help section here: http://www.pbase.com/help/edit_gallery

And simply states:

What does the gallery table width control?
The table width setting controls what percent of the browser window to fill. 100% is the default.
Set it to 0% to push the thumbnails closer together.
*Greater than 100% is not recommended.

What is cell spacing?
This controls the minimum pixels between thumbnails. The default is 20.

What is cell padding?
Cell padding controls the number of pixels of space around thumbnails. The default is 20.

You should be able to play with the above settings so your thumbnails would fit within the current box.

Hope this helps explain it clearly enough to understand. If not, post again.