I commed you on your patience, luftikus. I apologize for the wait. I'm nearing the end of another website, and have been working hard to get it up and running before I head back west.
I put some thought into your question and here's what I came up with:
Tom's Unofficial Guide to Styling Photo Archives
First, we go ahead and create some div boxes that will act as the "frames" for our pictures. For the sake of ease, I have included the CSS styling within the HTML page (If you view the page source (right click), you'll see what I mean). Using "p1" through "p5" as identifiers for individual frames, I made all the boxes 150 by 150 px. Without CSS styling, these five boxes would rest on top of each other in the upper left corner of the page. But, by positioning each frame absolutely, we can move it anywhere we want on the page. In this example, I simply styled the boxes to be grey with a white border. I then arranged them to show this approach's flexibility:
Example #1
Just for fun, I played around with the boxes' colors. Check it out:
Example #2
Of course, it's entirely possible that your desired arrangement will look nothing like this. For dealing with actual photos, I spread the boxes out in an attempt to avoid overlap (unless you want it ;)) :
Example #3
Pretty cool...but we still haven't covered the real issue.....PHOTOS!!
I took a couple old pictures out of iPhoto and resized them to 216 by 162 px. You can leave them whatever size you would like, but remember that we are dealing with an 150px square window.
**On a side note, if you are using a Mac, I like to use Image Shackle to resize my photos....it's a really useful widget to have in your Dashboard...
Next, I assigned one of the pictures to each of the "frames" using the "background-image" attribute.
The necessary syntax is:
-
#p...
-
{
-
background-image: url(whatever.jpg);
-
background-repeat: no-repeat;
-
overflow: hidden;
-
}
-
The "background-repeat" ensures that the photo won't be printed more than once in the frame. More importantly, the "overflow:hidden" attribute makes sure that any part of the photo exceeding the frame will stay out of sight.
To choose what part of the picture is shown in the frame, use the "background-position" attribute.
The syntax, again:
-
background-position: xxpx AApx;
-
Where "xx" is the number of pixels shifted right and "AA" is the number of pixels shifted down. To make these shifts occur in the other direction, place a negative "-" sign in front of the pixel value.
When all is said (and sort of) done, we get something like this:
Example #4
Excuse the silly photos, if you will.
Using this model, you are free to arrange the photos anyway you would like. You have control over the frame's size, location, and content. =)
Finally, to make each frame link to the full photo, simply add an anchor <a> to each div.
For example:
-
<div id="p1">
-
<a class="link" href="whateverpathyouwouldlike..">picture1</a>
-
</div>
-
Next, style the anchor:
-
a.link
-
{
-
display: block;
-
height: 0px;
-
width: 150px;
-
padding-top: 150px;
-
overflow: hidden;
-
}
-
You could style these links individually, but I used a class for the links in my example....
In doing this, you are making a linked "mask" over the entire picture. Make sure the "padding-top" attribute is set to the full height of your frame. This way, the actual text of the link is pushed below the frame and hidden by the "overflow" rule.
In the end, you should get something like this:
Example #5
Notice that the original, linked photos are Larger than those displayed in our frames...
And that, my friend, is all I have to say about that....unless you have questions, of course...
Enjoy, and let me know if you get something working...
Tom
97
