Hello, I’m new here, this is my first posting.
I desperately need help with my site! I’m trying to create something of a ‘liquid’ photo gallery site. example
I have a div that contains the main image of the photo gallery in the center, then the thumbnail images on the bottom. I want to have an imaged border around the div that auto expands with the size of the main image (portrait or landscape).
I figured the best way to achieve this is to have the main div contain empty divs with background images repeating (to create a border). The problem is that the side ‘borders’ don’t automatically scale to fit the parent div. I can’t put height 100% because that makes the image repeat zero times. If I put a px constraint, it doesn’t fit the div if the picture showing is a portrait instead of a landscape (or vise versa).
Could someone please help me?
Here is the coding for the area I’m talking about: (forgive me if this isn’t how it’s supposed to be posted!!)
HTML:
CSS: (way in need of help!)
.laceSideLeft {
background-image: url(../images/laceEdgeSide.png);
background-repeat: repeat-y;
width:50px;
height:650px;
float:left;
margin-left:-30px;
margin-top:-10px;
border:none;
}
.laceSideRight {
background-image: url(../images/laceEdgeSide.png);
background-repeat: repeat-y;
width:50px;
height:100%;
float:right;
margin-right:-25px;
margin-top:-10px;
border:none;
position:absolute;
}
.laceSideUpDown {
background-image: url(../images/laceEdge.png);
background-repeat: repeat-x;
width:100%;
height:50px;
border:none;
margin-top:-35px;
}
THANKS in advance, or, just thanks for reading all this!
