Forum Moderators: not2easy
I'm new to css and I'm trying to put together a very basic site that will resize according to the window size.
I'm trying to put an image gallery inside a div container, but with the thumbnails as inline elements within a paragraph. In this way, the pictures will wrap around the row edges and will also be centered.
As long as the images are not linked (eg to the full size images), everything works perfect, tested so far in IE 5,6 and Firefox 0.8. But if I link the thumbnails, the size shrinks "progressively", ie, the size of a linked image is only a fraction of the previous one. This odd behaviour appears only in Firefox 0.8
The paragraph containing the thumbnails is centered and contained within a div
The problem with floating div containers for pictures (one for each thumbnail assures they get proper size) is that they get left aligned and that will leave different margins to the left and right of the gallery, which does not look nice.
Any ideas are highly appreciated :)
As long as the images are not linked (eg to the full size images), everything works perfect, tested so far in IE 5,6 and Firefox 0.8. But if I link the thumbnails, the size shrinks "progressively", ie, the size of a linked image is only a fraction of the previous one.
Post the html and css code for the gallery div and everything in it. Without seeing code it's impossible to say, but it sounds like a nesting problem.
The problem with floating div containers for pictures (one for each thumbnail assures they get proper size) is that they get left aligned and that will leave different margins to the left and right of the gallery, which does not look nice.
First, you can just flaot the images themselves. A div container for each image is unnecessary.
Second, if you want to float the images (which is what I'd do), there are ways to control the margin and padding and width of the gallery container <div> to ensure an appealing and uniform appearance. the key is knowing the width of your thumbnails. If all the thumbnails are the same size, it's easiest. If not, it's still doable but requires a little more control.
This thread [webmasterworld.com] has some info on how this works, but here's a little code sample of one way to do it.
Say your thumbnails are all 100px wide and of the same height...
html:
<div id="gallery">
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />
<img src="4.gif" />
</div>
css:
#gallery {
float: left; /*only necessary if the gallery div has borders and/or backgrounds that you want visible behind or around the collection of images*/
width: 200px;
}
#gallery img {
float: left;
width: 100px;
}
thanks for the quick reply!
Well, I think I mixed things a bit.
The thumb size can be specified without the div, but when it comes to linking, problems appear in Firefox.
The CSS:
body {
margin-left:5%;
margin-right:5%;
margin-top:0px;
margin-bottom:0px;
padding:0;
border:0;
}
.content{
background-color:#CCCCCC;
padding-top:1%;
padding-bottom:1%;
}
img.thumbnail{
margin:0;
padding:10px;
width:15%;
border:0;
}
p.centered {text-align:center;}
And the html:
<div class="content">
<p class="centered">
<a href="pic_01.jpg"><img class="thumbnail" src="thumb01.jpg" alt=""/></a>
<a href="pic_02.jpg"><img class="thumbnail" src="thumb02.jpg" alt=""/></a>
<a href="pic_03.jpg"><img class="thumbnail" src="thumb03.jpg" alt=""/></a>
</p>
</div>
This will work ok in IE, but will show thumb02.jpg and thumb03.jpg with wrong size in Firefox 0.8 (size will be smaller than the preceding image, the first one is at full size)
However, if the images are not be linked, the sizes would be correct. Also, there would be no problem if the widths were fixed in pixels.
Thanks for the tips about the positioning, I'll give it a try and a second thought. However, I would be happy for the time being if the sizes would be right with this simple scheme.
Thanks and best regards!
I would say that whatever the problem is it's almost certainly being caused by your use of % to size and space your images.
<img class="thumbnail" src="thumb03.jpg" alt=""/>
