Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Problem with Image Gallery

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I think you could achieve this by adding your image and text by making a structure shown at http://matthewjamestaylor.com/blog/b...rowser-support
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Begbie (06-01-2009)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Begbie View Post
    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%20...ion/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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=ht...Inline&group=0
    You can't use the same id for multiple elements in a document. Fix them all and post your updated link.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Now try
    Code:
    #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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #10
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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:
    Code:
    <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:
    Code:
    .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).

  • Users who have thanked Fisher for this post:

    Begbie (06-05-2009)

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    #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;}
    Code:
    		<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>
    Last edited by Excavator; 06-02-2009 at 03:14 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    26
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •