...

View Full Version : Problem with Image Gallery



Begbie
05-30-2009, 08:15 PM
Hello to everyone,
I am having trouble to make picture gallery. It should look something like this:
----X-X-X---
-X-X-X-X-X-
----X-X-X---
where X would be an image with text beneath it and wich could be changed, for example like this:
----X-X-X---
-X-X-X-X-X-
-X-X-X-X-X-
So the main goal was to make three rows, that woud be separated one from another and centered inside of gallery container.
At the beginning I managed to do that using lists, but with text (description of the pics), it does not look the same because text goes in the same line as picture.
Now when I solved that problem (text beneath the picture) I made gallery wich is totaly usless :(
First of all, it does not work the same for Firfox and for IE, second it is not centered as I planed, and third
I don't know what to do any more because I tried so many different things that now I am totally confused.

Here is link to my gallery:

http://tinyurl.com/n7ma6g

Please, any help or direction to follow would be appreciated. Thanks in advance ;)

abduraooft
05-31-2009, 11:45 AM
I think you could achieve this by adding your image and text by making a structure shown at http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Begbie
05-31-2009, 10:16 PM
abduraooft Thanks a lot for the link, that was very helpful ;)

But now, I have another question (problem) and I hope that someone could help me. Acctually there are 2 questions :) :
1. Can somebody help me how to verticaly center the text under pictures, so that it looks like it is in one line.
I am having trouble to do that because my thumbnail images are not the same size.
2. Why is distance between end text [footer] (copyrigth .....) and main container so different in Firefox and in IE?

Here is the link:

http://tinyurl.com/mqcdya

Again thanks in advance ;)

Excavator
05-31-2009, 11:07 PM
1. Can somebody help me how to verticaly center the text under pictures, so that it looks like it is in one line.
I am having trouble to do that because my thumbnail images are not the same size.


You could add a transparent bottom border on the shorter thumbs. That would make them appear to be the same height and push the caption down to match the others.
Here is another thumbnail centering method without the ul - http://nopeople.com/CSS/thumbnail%20presentation/index.html

abduraooft
06-01-2009, 07:23 AM
Thanks a lot for the link, that was very helpful You don't have to add three separate divs to wrap your unordered lists (<ul>). Instead a single such div would be enough.

Also, there are some errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fstud4.tuwien.ac.at%2F%7Ee0327560%2FGallery2%2Fgallery.html&charset=%28detect+automatically%29&doctype=Inline&group=0
You can't use the same id for multiple elements in a document. Fix them all and post your updated link.

Begbie
06-01-2009, 03:09 PM
Hello,
Thanks for the validation advice, I totally forgot about that. But it doesn't helps a lot.
I made changes that you said (only one <div>), but now I'm facing problem with IE.
There, only the first line (row) has attributes as before. Everything else is
a mess (speaking of IE) and I still don't know how to aligne text so
that it looks like it is in the same line.

http://tinyurl.com/m3l6wo

Begbie
06-01-2009, 05:08 PM
I believe this is better version. Instead of 'id' I used 'class' and made 3 <dvi> tags.Now it looks the same in Firefox and IE.
Still I have problem with alignment of text beneath images.

http://tinyurl.com/kvtgtf

abduraooft
06-01-2009, 05:33 PM
Now try

#gallery {
background-color: #CCCCCC;
border: medium solid #666666;
width: 800px;
/*height:530px; */
padding-top: 2em;
margin-top: 1em;
margin-right: auto;
margin-bottom: 2em;
margin-left: auto;
position:relative;
}

Begbie
06-01-2009, 07:49 PM
Perhaps I expressed myself wrong, because what I ment to say is that I need to aligne text (name) of images ('image name') so that it looks like in one line (for whole row). With your advice I'm not getting any of it :( but thanks anyway ;) hope you could help me with something else ;)

Fisher
06-01-2009, 11:29 PM
You could apply a class to your image links, then add a height attribute to them. That way they're all the same height regardless of the image size.

Eg:

<div class="centeredImg">
<ul>
<li> <a href="#" class="thumbnail"><img src="thumb/th_A - 277 - Kicena djevojka.jpg" alt="Image name"/></a>
<p><a href="#">Image name</a></p>
</li>
<li> <a href="#" class="thumbnail"><img src="thumb/th_A - 286 - Dobri covjek.jpg" alt="Image name"/></a>
<p><a href="#">Image name</a></p>
</li>
<li> <a href="#" class="thumbnail"><img src="thumb/th_01 - To sam ja Nesim.jpg" alt="Image name"/></a>
<p><a href="#">Image name</a></p>
</li>
<li> <a href="#" class="thumbnail"><img src="thumb/th_A - 287 - Djevojka.jpg" alt="Image name"/></a>
<p><a href="#">Image name</a></p>
</li>
<li> <a href="#" class="thumbnail"><img src="thumb/th_A - 280 - Nebeski setac.jpg" alt="Image name"/></a>
<p><a href="#">Image name</a></p>
</li>
</ul>
</div>

CSS:

.centeredImg ul li a.thumbnail {
height:110px;
}
This might mess up IE (it does in IE6), so add a width attribute to the thumbnail class as well (110px maybe).

Excavator
06-02-2009, 03:11 PM
It would be much easier to paste each image onto a background that would make them all the same height but this could work too:

#gallery {
background-color: #CCCCCC;
margin: 1em auto 2em auto;
border: medium solid #666666;
width: 800px;
padding-top: 2em;
overflow: auto;
}
.small {margin: 0 0 4px 0;}
.large {margin: 0 0 8px 0;}
<div id="gallery">
<ul class="row1"> <!--first row -->
<li class="float">
<a href=""><img src="thumb/th_01%20-%20To%20sam%20ja%20Nesim.jpg" alt="Image name"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_04%20-%20Pripadnik%20Neba.jpg" alt="Image name"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20252%20-%20Kosmicko%20udvajanje%20II.jpg" alt="Image name"><p>Image name</p></a>
</li>
</ul>

<ul class="row2"><!-- second row -->
<li class="float">
<a href=""><img src="thumb/th_A%20-%20277%20-%20Kicena%20djevojka.jpg" alt="Image name"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20286%20-%20Dobri%20covjek.jpg" alt="Image name" class= "small"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_01%20-%20To%20sam%20ja%20Nesim.jpg" alt="Image name" class= "small"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20287%20-%20Djevojka.jpg" alt="Image name" class= "small"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20280%20-%20Nebeski%20setac.jpg" alt="Image name"><p>Image name</p></a>
</li>
</ul>

<ul class="row3"> <!--third row-->
<li class="float">
<a href=""><img src="thumb/th_A%20-%20281%20-%20Pripadnik%20neba%20I.jpg" alt="Image name"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20344%20-%20Sveti%20dolazak.jpg" alt="Image name" class= "large"><p>Image name</p></a>
</li>
<li class="float">
<a href=""><img src="thumb/th_A%20-%20282%20-%20Pripadnik%20neba%20II.jpg" alt="Image name"><p>Image name</p></a>
</li>
</ul>

Begbie
06-05-2009, 01:23 AM
Thanks Fisher, your advice was very helpful for solving my problem with text alignment. And of course thank you all. But... :)
Now, I know I am becoming little annoying, but I have a question: Is it possible to vertical aligne pictures (thumbs)?
Now when I made the same value height for all thumb images is it possible to vertical align them inside
one of the containers. With other words is it possible to apply 'vertical align' somewhere in code
(so that thumbs could be vertically aligned and not like now - aligned to top) because I am failing to do so. Again, thank you all ;)

http://tinyurl.com/qy85lf



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum