SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 43
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)

    CSS - Test Your CSS Skills Number 40 - Dead Centre

    CSS - Test Your CSS Skills Number 40 - Dead Centre: Quiz now ended - Solution in post #32

    Important:
    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    This quiz is taken from a real life situation and although the solution should probably have been catered for with the back-end code we are going to do it using CSS only.

    The task is this:

    You have an image gallery that displays random images from your database in img tags in your html. The images are all various sizes and you have no control over what size the image will be.

    The design calls for the images to be shown in a 200px x 200px square regardless of the size of the image however the image should not be resized.

    At present the client is simply hiding the overflow but this display is ugly and the effect can be seen in the attachment called "dead-centre-not". As you can see the small images hug the top left corner while large images show just blue sky background (note that the blue background is also part of the image so imagine perhaps its the sky).

    What the task requires is that all images be centred horizontally and vertically within the 200px x 200px square which means that small images will be centred nicely and very large images will just show the centre portion of the image which in most cases is likely to be the important part of the image rather than just a flash of sky at the top. You cannot change the size of the image either by html or css so the solution must work for an image at the size the image is.

    You can see from the second attachment "dead-centre-ok" how dramatically our display has been improved now that everything is centred.

    The important part to remember with this task is that you don't know the size of the image so that means you can't shift each one by the required amount of pixels to make it centre. You must find a technique that automatically centres the images no matter what size they are (within reason).

    No scripting allowed but the result must work from IE6+.

    Remember we are looking for an automatic way so you can't simply set up classes and place the image as a background image of the div because then you would need to know the image name in advance.

    Here is some starting code but you are allowed to change the css and html as required (within the restrictions already mentioned) as long as you keep the display to 200px x 200px.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .gallery {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .gallery li {
    	width:200px;
    	height:200px;
    	overflow:hidden;
    	border:1px solid #000;
    	float:left;
    	margin:10px;
    	display:inline;
    }
    .gallery li img {
    	border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <ul class="gallery">
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
    	<li><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></li>
    </ul>
    </body>
    </html>
    You can link to my images for testing purposes.

    Rules

    Images must be centred horizontally and vertically within the 200px x 200px square as per my screenshot.

    The image tags must remain in the html and you can't simply type background images into the list element instead (although the effect would be the same as we are looking for).

    You cannot change the size of the image either by html or css so the solution must work for an image at the size the image is.

    Must work in IE6+ and modern Safari, Chrome, Firefox and Opera etc.

    Must work automatically and not reliant on the sizes of the images.

    Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).

    No scripts of any kind.

    You can use whatever CSS and html you like apart from restrictions already mentioned.

    To Recap:

    You must use the image tags in the html and the images must not be resized to fit (either by css or html) and you cannot use background images because you don't know what the image names are through css only.

    I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won't necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

    Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:
    Attached Images Attached Images
    Last edited by Paul O'B; Oct 30, 2012 at 02:36.

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, this should be fun.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I've had a couple of entries already but they changed the size of the image with a css rule like this:

    Code:
     .gallery li img {
        border:1px solid #000;
        max-width: 200px;
        max-height: 200px;
    
        }
    That's not allowed as that would change the aspect ratio and size of the image and the image must always be the same size it was but just centred in the square box.

  4. #4
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I didn't realize you weren't supposed to post the answer. Looking at previous quizzes people are PM'ing, so PM'd.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks for your entry Kokos but you missed the point about not using background image because you don't actually know what the image names are beforehand so you can't use background images.

    Good try though and keep working at it.

    Yes and please PM the answers rather than position in the thread in case the answer is given away and spoils it for others.

  6. #6
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see the difference, if you are capable of creating the HTML for image tags you should be able to do the same for background images. But I understand that it changes the assignment drastically, will be keeping an eye on this because I can't figure it out and am very curious.

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  7. #7
    SitePoint Member ahmedij's Avatar
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Paul..
    I am new here. Please check PM

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Ahmedji thanks for your entry and yes that is pretty close but is not working in IE6 and 7 at the moment but I'm sure you can fix it (and welcome to Sitepoint by the way )

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Kokos View Post
    I don't see the difference, if you are capable of creating the HTML for image tags you should be able to do the same for background images. But I understand that it changes the assignment drastically, will be keeping an eye on this because I can't figure it out and am very curious.
    Hi,

    Imagine the page is already built and being used and the images are already placed into the page after they are taken from a database. The page is already coded with php and mysql and it is the serverside scripting that determines the images to place in the page.

    The task is to find a css/html only solution and avoid employing a php sql programmer to make the changes in the back-end and swapping the image tags to background images instead. I mentioned in the first line of the task that a back-end solution would be relatively easy but this is a CSS quiz and we are looking to see what CSS can do.

    You don't know what the images names are or what size they are because they are random and plucked differently from the database each time.

    I hope that clarifies the task (You may think this is a bit convoluted but it was actually a real scenario.)

  10. #10
    SitePoint Member ahmedij's Avatar
    Join Date
    Aug 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope we are good now

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ahmedij View Post
    I hope we are good now
    Hi ahmedij,

    Yes that's the solution I was looking for

    Well done, congratulations for doing it so quickly and thanks for participating.

    Anyone else getting close yet?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Anyone else had a try yet or is anyone stuck?

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    damn no time, I'll have to post it as soon as I get it ready in my bathroom breaks haha

  14. #14
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Same here; haven't found the time for it yet

  15. #15
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Haven't had a chance to get it a try yet, I'm hoping to give it a whirl tomorrow or Sunday
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Thanks all - there is no rush I won't start handing out clues until next week anyway.

    I've been busy myself and its a holiday here in the uk on Monday so I'll probably be dragged out somewhere

  17. #17
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe I'll take another look at it tomorrow when I've got some free time

    Taking over the web one pixel at a time.
    Currently working @ CodeCreators

  18. #18
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Chicago, IL USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is my first go at the CSS challenge. I have to admit, this was a tough one. It had me pulling my hair out. I am curious to see what solutions others have come up with.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi lungcollapse and welcome to Sitepoint (the username frightens me though at my age)

    Well done you have a correct solution so for a first post you have done very well. You may want to look at some of the old quizzes if you have spare time but don't look at the answers first

    Many thanks for taking part.

  20. #20
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This is quite a tricky one, I'm at the point where i can get all but that one massive 1500px image centered, plus i broke my attempt in IE 6 and 7 with perfect success
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    This is quite a tricky one, I'm at the point where i can get all but that one massive 1500px image centered, plus i broke my attempt in IE 6 and 7 with perfect success
    You just have to think big

  22. #22
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Chicago, IL USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I will definitely have a look through the earlier tests.

  23. #23
    Non-Member
    Join Date
    Jun 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I find a new way to get the result, just 1 px bug, I think it's the border:1px solid #000; problems. because firefox, ie or other browser have not the same solution.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Bill 1983 well done and don't worry about the 1px bug as we can live with that You have a correct solution and is the method used by all so far.

    Well done

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,796
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I also have a solution from Simon (zcorpan) that is very neat but unfortunately only works in Opera (surprise surprise) but thanks anyway


Tags for this Thread

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
  •