SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery middle column liquid lay-out: update but still some questions

    Okay, i got my gallery up and running. Not the way i liked it to be but it seems a liquid gallery is hard to find after some googling....

    But still i have some questions: my class .bigpix doesn't kick in. It's supposed to show the first big pic whithout the user having to hover on it. Specificity problem?

    Another question: the way the gallery is set up (fixed dimensions) means whenever i need to add an image i need to alter the width of the container and the position of the bigger image. Some suggestions to make this process simpler (if that's possible).

    page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    .bigpix doesn't show because all you do is set visibility. You need to set the styles you normally only set on hover
    Code:
    .bigpix {
    		visibility:visible;		position:absolute;
    	top:7.5em;
        padding: .125em;
    	border:2px solid #88A3C9;
    	left: 75px;
    	width: 400px!important; height: 300px!important;}
    The !important was on there because you need it to override "#thumbs a:hover img"

    If you want to find a more specific selector then ".bigpix" go for it. I was just too lazy.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may be able to adapt the methods in these demos/tutorials:
    Inline-block galleries
    Scrolling gallery
    Swapping images

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    ...
    Another question: the way the gallery is set up (fixed dimensions) means whenever i need to add an image i need to alter the width of the container and the position of the bigger image. Some suggestions to make this process simpler (if that's possible).
    You could make the gallery dynamic hight with a bottom padding to give the big image space and position the big images from bottom.
    Code:
    #galwrapper{
    	position:relative;
    	border-bottom:1px solid #010101;
    	border-left:1px solid #88A3C9;
    	border-top:1px solid #88A3C9;
    	border-right:1px solid #010101;
    	overflow: hidden;/* enclose float thumbs*/
    	margin: 10px auto;
    	width:550px; 
    /*	height: 432px;*//* auto */
    	padding-top:15px;
    	padding-bottom:382px; /* added */
    	}
    	
    #thumbs a:hover img { 
    	position:absolute;
    /*	top:7.5em;*//* auto */
    	bottom:50px; /* added */
        padding: .125em;
    	border:2px solid #88A3C9;
    	left: 75px;
    	width: 400px; height: 300px;
    	}
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    first off tnx for the help.
    Erik, your solution worked nicely :-)
    Gary, haven't had the time yet to look at the links.

    In the meantime, searching to yet trying to make everything hold in a liquid lay-out i came up with something satisfactory.

    how to get frustrated

    Alas, IE6 screws up as usually. To keep the bigger image contained in the CP on smaller viewports, the width is set in percentages. Opera plays nice but IE doesn't cope with it and also messes the position up. Em sized, the images don't get contained. Now, is it a fact that IE can't be brought in line? If so, i'll have to stick with the fixed solution.

    Ryan, if you would be so kind to take a look, the .bigpix class seems to be something missing: the idea is that the thumb still shows. Here's an example:
    class

    I looked at that css for the class but couldn't get it to work: to stupid, lazy... call it whatever you want lol...
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well I assume by hwat you meant about mine, is that the bigger image showed, but you want the smaller to appear also?

    Since you take the thumb and use that to create a bigger image I would sayy ou need an extra element and apply the code I posted above to an empty element like a <span> (and apply the background image there)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well I assume by hwat you meant about mine, is that the bigger image showed, but you want the smaller to appear also?

    Since you take the thumb and use that to create a bigger image I would sayy ou need an extra element and apply the code I posted above to an empty element like a <span> (and apply the background image there)
    Guess i'm having one of those days. I'm not sure if i follow you. I tried wrapping the image in an extra span but no go.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    No, since you are using the original small image to create the big one, you can't have both at once. You need to use a second image.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    Hi guys,

    Gary, haven't had the time yet to look at the links.
    What compelling reason do you have not to use a solution that fulfills your requirements, and has been wrapped up and tied with a bow? See those links I gave you. The answer is there.

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, first of all: sorry for the late reply but i'm swamped with other things and running behind.

    Ryan, now i see what you mean: a second image that makes sense. But as it turns out, instead of using a second image, i'll believe it's better to have the first image appear without a thumbnail. Makes sense to me since it will always be visible.

    Gary, i just now managed to glance at your links. I'll sure give it a go. If all is well, you will not here from me lol.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Boston
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Desperado,

    Hmm.
    We do get around, don't we...

    As ever,
    Salma
    Mexico City

  12. #12
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey david!!!

    What a nice surprise to see you around here!!
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Did you get it figured? Here is how I did it a while back...

    http://www.visibilityinherit.com/code/the-jamieruth.php

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Did you get it figured? Here is how I did it a while back...

    http://www.visibilityinherit.com/code/the-jamieruth.php
    Eric,

    i started out in the beginning with your example and everything worked well except i encountered the problem:

    to recapulate:

    the page is liquid: widths are in percentages. When you resize the viewport to a smaller size, the gallery covered up the right column and the bigger image got cutt of. So what i'm looking for is that the gallery sort of shrinkwraps and is still able to let the image on hover completely visible without cutting it off.

    I'm 90% there, using percentages as a width for the image. The main problem however is still IE6: the image on hover is completely distorted, the thumbs are completely out of place and i have a pageshift when hovering over the thumbnails.....

    how to get frustrated page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #15
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: atleast i managed to get the thumbs in place by removing a redundant position: relative on the maincontainer....
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  16. #16
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and removing overflow:visible on the #gallery for IE6 resolved the pageshift.

    Now i'm only puzzled as to what IE6 doesn't strech the width of the image on hover
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The page shift was probably do to the introduction of the vertical scrollbar. The ie6 problem is probably do to this... http://www.visibilityinherit.com/cod...ahover-bug.php

  18. #18
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi eric, tnx for the info. But i don't think it was that bug because your solution didn't cure it. I had to remove overflow:visible on the #gallery.

    In the meantime i almost managed to get things up and running: declaring an auto width on the image resolved the distortion. But ofcourse, that way it doesn't fit when resizing the gallery. I tried solving that with overflow but no luck ...

    page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  19. #19
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    On phone for the week, so I can't see your code, but I would attempt it this way. Sort of like Erik did it. But I would use fixed demensions on all the images. Wrap the gallery in a div, give it a min-width equal to the width of the large image (now a pixel demension), and give it a large enough bottom padding to contain the large image. And then wrap all the thumbs in another div (nested in the parent container), and give it position relative, width 100&#37;, and overflow hidden to contain the floated thumbs. Then float all the thumbs left. And finally, on hover, position the large image bottom:-50px; and left:50%; and give it a negative left margin equal to half of the large images width. That "should" do it...

    Of course doing it this way, you'd also have to give the whole page a min-width also. But, this method should ensure that your gallery looks good at every screen size.

  20. #20
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    On phone for the week, so I can't see your code, but I would attempt it this way. Sort of like Erik did it. But I would use fixed demensions on all the images. Wrap the gallery in a div, give it a min-width equal to the width of the large image (now a pixel demension), and give it a large enough bottom padding to contain the large image. And then wrap all the thumbs in another div (nested in the parent container), and give it position relative, width 100%, and overflow hidden to contain the floated thumbs. Then float all the thumbs left. And finally, on hover, position the large image bottom:-50px; and left:50%; and give it a negative left margin equal to half of the large images width. That "should" do it...

    Of course doing it this way, you'd also have to give the whole page a min-width also. But, this method should ensure that your gallery looks good at every screen size.
    Eric,

    implemented your method and at first i was a happy camper but i ran into heeps of problems sigh.

    First, the good news is that the images indeed look good :-)

    Second, the problems:

    - the #gallery of course doesn't shrink on smaller screen sizes, thus covering up the #rightcolumn. Probably due to the fixed min-width. Using a percentage for the min-width takes care of it but i'm not sure how and if that will work with the method i used for feeding IE min-width: i used Pauls' method.

    - even using percentages for min-width let's the bigger images flowing out of the div in IE6.

    - Only IE6 shows the border around the visible big image. Opera for instance doesn't show the border but shows it on hover.

    - IE6 suffers from a shift when hovering: i tried the visibility trick on a:hover but no go

    To recap: a bunch of problems and me going nuts.

    stupid gallery
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  21. #21
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    K, border problem is solved: conflicting styles.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  22. #22
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeez, can't believe i'm still at it 3 in the morning but it seemed i resolved the shifting bug. Apparently it's the percentage margin bug in IE6.

    Feeding ie6 an innercontainer with zoom:1 stopped the shifting. I'm to tired at the moment to test it fully but it seems that the shifting is resolved.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


Bookmarks

Posting Permissions

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