SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 43 of 43
  1. #26
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    PM sent. Haven't actually been able to test it in IE6 or IE7, but it _should_ probably work. But who knows for sure with those browsers, hehe. (And I feel kinda dirty about my solution )

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by CletusSpuckler View Post
    PM sent. Haven't actually been able to test it in IE6 or IE7, but it _should_ probably work. But who knows for sure with those browsers, hehe. (And I feel kinda dirty about my solution )
    Well done Johan that was the solution that we were looking for and works fine in IE6 and 7

    There may indeed be a cleaner solution that doesn't add extra mark-up and SgtLegend has an entry that works in IE8+ without extra mark up but fails in Opera.

    Well done to both of you and thanks for taking the time out to play

  3. #28
    SitePoint Addict Kokos's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, I can't figure out the solution but I have a question.
    The solution I provided (using background images) was obviously wrong for this assignment, but as a developer that does the backend as well as frontend programming I was wondering if there is a downside to the usage of background images compared to img tags.

    Basically I'm wondering if for my own projects if I run into this 'issue' if I should go for the (I guess) more complicated method or with the background images (maybe including img's for SEO's sake but hiding them from the user).

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

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Kokos View Post
    Hey Paul, I can't figure out the solution but I have a question.
    The solution I provided (using background images) was obviously wrong for this assignment, but as a developer that does the backend as well as frontend programming I was wondering if there is a downside to the usage of background images compared to img tags.

    Basically I'm wondering if for my own projects if I run into this 'issue' if I should go for the (I guess) more complicated method or with the background images (maybe including img's for SEO's sake but hiding them from the user).
    Hi,

    The answer is really the same for any image in your page. If the image is important to the content then it should be in the html. If the image is purely decoration then it should be in the background.

    Obviously for a gallery the content is the images themselves so they really should be in the html.

    However for ease of use if needed you could use an image replacement technique instead and supply text content to keep seo and screen readers happy and then use background images instead.

    There never is one answer as requirements, situations and practicality always differ.

  5. #30
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Was a good challenge but without adding those extra elements it was basically impossible, I did have fun and learned a lot so i do look forward to the next challenge as i am starting to get the hang of understanding these small riddles in the challenges

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Anyone else struggling?

    I'll throw some clues out if anyone has tried but failed. The quiz will stay open for a couple of days more yet to let any stragglers have a go.

    I have a solution for ie8+ (and opera) that doesn't require any extra mark up (IE6 and 7 need one extra element added though).

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Solution Time:

    Ok time to wrap this little quiz up. Thanks for all the entries they were all great.

    We had entries from the following:
    ahmedij, lungcollapse, zcorpan, bill_1983, SgtLegend and cletus_spuckler.

    The winner is ahmedij Well done.

    Most entries followed the same idea so well done to all.

    Solution

    The solution to the problem is too think big as I mentioned in an earlier clue. It is quite easy to horizontally and vertically center an element of unknown height within a fixed height container but as we didn't know the maximum height of the images how could we do this nicely?

    The secret was to insert a div and to give it a height and width bigger than any image you could ever expect. There are browsers limits with large numbers but for my example I assumed 10,000px would be enough for any image. If you have bigger images than that then give up and take up something else

    The div was placed inside a container with overflow:hidden so that it didn't stick out and then it was positioned so that it was central. We know the width and height of the parent so its just a matter of positioning the div upwards and to the left by the required amount.

    This leaves us with a container that can hold any size image (within reason) and then we use the old inline-block method of vertical centering as shown in the link above.

    Here was my first attempt using the methods mentioned above.

    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;
    	position:relative;
    	border:1px solid #000;
    	float:left;
    	margin:10px;
    	display:inline;
    }
    .gallery li div {
    	width:10000px;/* bigger than any image - can be any large number*/
    	height:10000px;/* bigger than any image - can be any large number*/
    	position:absolute;
    	top:-4900px;/* so that the 200px by 200px widnow is central within the 10000px div */
    	left:-4900px;
    	text-align:center;
    	white-space:nowrap;
    }
    .gallery li b {
    	display:inline-block;
    	vertical-align:middle;
    	width:1px;
    	height:10000px;
    	overflow:hidden;
    }
    .gallery li img {
    	display:inline;
    	vertical-align:middle;
    	border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <ul class="gallery">
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
    	</li>
    	<li>
    		<div><b></b><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></div>
    	</li>
    </ul>
    </body>
    </html>
    As you can see its pretty straight forward and will work right back to ie6 and possibly ie5.

    The downside is that extra mark up needs to be added to achieve the effect so I made another solution that works without extra mark up but needs an expression fix for ie7 and under.

    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">
    /* works in IE8+ - ie6 and 7 need the expression */
    .gallery {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    .gallery li {
    	width:200px;
    	height:200px;
    	overflow:hidden;
    	position:relative;
    	border:1px solid #000;
    	float:left;
    	margin:10px;
    	display:inline;
    	text-align:center;
    	white-space:nowrap;
    }
    .gallery li:after{
    	content:" ";
    	display:inline-block;
    	width:1px;
    	margin-right:-10000px;
    	position:relative;
    }
    .gallery li img {
    	display:inline;
    	vertical-align:middle;
    	border:1px solid #000;
    	margin-top:-9800px;
    	overflow:hidden;
    }
    .gallery li:before{
    	content:" ";
    	width:1px;
    	margin-left:-10000px;
    	vertical-align:middle;
    	position:relative;
    	display:inline-block;
    	height:10000px;
    	overflow:hidden;
    }
    
    
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
    .gallery li img {	
    	font-size:10px;
    	position:relative;
    	top:-5437px;
      display: block;
      left: 1000%;
      margin:0 0 0 -2000%;
    }
    .gallery li {
    	font-size:10000px;
    	vertical-align:middle;
    	 zoom:expression( runtimeStyle.zoom=1, insertAdjacentHTML('afterBegin', '<b></b>') );
    }
    </style>
    <![endif]-->
    
    
    </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>
    If you don't like the expression then adding one extra element would see it working in all browsers. I'll leave you to work out how the above works

    Most of the entries followed my first example and will follow shortly. Before I post the other entries there was one interesting entry from Simon (zcorpan) that only worked in opera but only required one line of css and no change to the html!!

    zcorpan Opera only
    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;
    }
    /* http://dev.opera.com/articles/view/css3-object-fit-object-position/*/
    .gallery li img { -o-object-fit:none; overflow:hidden; width:200px; height:200px }
    </style>
    </head>
    <body>
    <ul class="gallery">
    	<li><img src="http://www.sitepoint.com/forums/images/css-img1.gif" alt="test" width="200" height="200" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img2.gif" alt="test" width="110" height="110" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img3.gif" alt="test" width="300" height="200" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img4.gif" alt="test" width="900" height="1200" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img5.gif" alt="test" width="400" height="100" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img6.gif" alt="test" width="400" height="600" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img7.gif" alt="test" width="175" height="125" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img8.gif" alt="test" width="225" height="325" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img9.gif" alt="test" width="150" height="150" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img10.gif" alt="test" width="125" height="175" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img11.gif" alt="test" width="425" height="155" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img12.gif" alt="test" width="155" height="455" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img13.gif" alt="test" width="1550" height="1455" /></li>
    	<li><img src="http://www.sitepoint.com/forums/images/css-img14.gif" alt="test" width="130" height="190" /></li>
    </ul>
    </body>
    </html>
    Now wouldn't that be easy if all supported it?

    Here follow the other entries:

    ahmedij:
    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;
    	position:relative;
    }
    .gallery li div
    {
        height: 2000px;
    	width: 2000px;
        left: -900px;
    	top: -900px;
        line-height: 1995px;
        overflow: hidden;
        position: absolute;
        text-align: center;
    }
    .gallery li img {
    	border:1px solid #000;
    	vertical-align:middle;
    }
    </style>
    <!--[if lt IE 8]><style>
    .gallery li div span {
        display: inline-block;
        height: 100%;
    		vertical-align:middle;
    }
    </style><![endif]-->
    </head>
    <body>
    <ul class="gallery">
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div></li>
    	<li><div><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div></li>
    </ul>
    </body>
    </html>
    lungcollapse:
    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>Sitepoint: Test Your CSS Skills Number 40 - Dead Centre</title>
    
    <!--
    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.
    
    http://www.andrewleeart.com/crosslinks/sitepoint/sitepoint-css40.html
    -->
    <style type="text/css">
    /*
    this method works as long as the image does not exceed 10,0000px
    */
    .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:block;
    	position:relative;
    }
    .gallery div {
    	position:absolute;
    	height:10000px;
    	width:10000px;
    	top:-4900px;
    	left:-4900px;
    	line-height:0;
    }
    .gallery span {
    	display:table-cell;
    	height:10000px;
    	width:10000px;
    	vertical-align:middle;
    	text-align:center;
    	line-height:0;
    }
    </style>
    
    <!-- handle alignment in IE 6 and IE 7 -->
    <!--[if lt IE 8]>
    <style type="text/css">
    .gallery div {
    	position:absolute;
    	height:auto;
    	width:auto;
    	top:50%;
    	left:50%;
    }
    .gallery span {
    	display:block;
    	position:relative;
    	height:auto;
    	width:auto;
    	top:-50%;
    	left:-50%;
    	vertical-align:baseline;
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <ul class="gallery">
    
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img1.gif" alt="test" width="200" height="200" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img2.gif" alt="test" width="110" height="110" /></span>
    		</div>
    
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img3.gif" alt="test" width="300" height="200" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img4.gif" alt="test" width="900" height="1200" /></span>
    
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img5.gif" alt="test" width="400" height="100" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    
    			<span><img src="sitepoint-css40/css-img6.gif" alt="test" width="400" height="600" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img7.gif" alt="test" width="175" height="125" /></span>
    		</div>
    	</li>
    	<li>
    
    		<div>
    			<span><img src="sitepoint-css40/css-img8.gif" alt="test" width="225" height="325" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img9.gif" alt="test" width="150" height="150" /></span>
    		</div>
    	</li>
    
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img10.gif" alt="test" width="125" height="175" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img11.gif" alt="test" width="425" height="155" /></span>
    		</div>
    
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img12.gif" alt="test" width="155" height="455" /></span>
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img13.gif" alt="test" width="1550" height="1455" /></span>
    
    		</div>
    	</li>
    	<li>
    		<div>
    			<span><img src="sitepoint-css40/css-img14.gif" alt="test" width="130" height="190" /></span>
    		</div>
    	</li>
    </ul>
    </body>
    </html>

    bill_1983:
    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;
    	border:1px solid #000;
    	float:left;
    	margin:10px;
    	display: inline;
    }
    .container * {
    	vertical-align: middle;
    }
    /*\*//*/
    .container {
        display: block;
    }
    .container span {
        display: inline-block;
        height: 100%;
        width: 1px;
    }
    /**/
    .container1 {
    	width:200px;
    	height:200px;
    	overflow:hidden;
    	display:block;
    	position: relative;
    }
    .container {
    	height: 2000px;
    	width: 2000px;
    	overflow:hidden;
    	display: block;
    	vertical-align: middle;
    	text-align:center;
    	position: relative;
    	line-height:2000px;
    	left:-900px;
    	top:-902px;
    }
    </style>
    <!--[if lt IE 8]><style>
    .container span {
        display: inline-block;
        height: 100%;
    }
    </style><![endif]-->
    </head>
    <body>
    <ul class="gallery">
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></div>
    		</div>
    	</li>
    	<li>
    		<div class="container1">
    			<div class="container"><span></span><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></div>
    		</div>
    	</li>
    </ul>
    </body>
    </html>

    SgtLegend: - not working in opera and uses expression for <ie8
    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>Unknown image centering using CSS!</title>
    <style type="text/css">
    <!--
        .gallery {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .gallery li {
            border: 1px solid #000;
            float: left;
            height: 200px;
            margin: 10px;
            overflow: hidden;
            position: relative;
            text-align: center;
            width: 200px;
        }
        
        .gallery li img {
            *display: block;
            left: 1000%;
            margin-left: -2000%;
            margin-top: -1911.5%;
            *margin-top: expression(( 200 - this.height ) / 2);
            position: relative;
            top: 1000%;
            *top: 0;
            vertical-align: middle;
        }
        
        /* Opera hack */
        @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
            .gallery li img {
                left: 0;
                margin-left: 0;
                margin-top: 0;
                top: 0;
            }
        }
    -->
    </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>

    cletus_spuckler:
    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;
    	position: relative;
    }
    .gallery li img {
    	border:1px solid #000;
    	display: inline;
    	vertical-align: middle;
    }
    .gallery span {
    	display: block;
    	height: 2000px;
    	left: -900px;
    	position: absolute;
    	text-align: center;
    	top: -900px;
    	vertical-align: middle;
    	width: 2000px;
    }
    .gallery b {
    	display: inline-block;
    	height: 100%;
    	vertical-align: middle;
    	width: 0;
    }
    </style>
    </head>
    <body>
    <ul class="gallery">
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img1.gif" alt="test" width="200" height="200" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img2.gif" alt="test" width="110" height="110" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img3.gif" alt="test" width="300" height="200" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img4.gif" alt="test" width="900" height="1200" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img5.gif" alt="test" width="400" height="100" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img6.gif" alt="test" width="400" height="600" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img7.gif" alt="test" width="175" height="125" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img8.gif" alt="test" width="225" height="325" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img9.gif" alt="test" width="150" height="150" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img10.gif" alt="test" width="125" height="175" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img11.gif" alt="test" width="425" height="155" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img12.gif" alt="test" width="155" height="455" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img13.gif" alt="test" width="1550" height="1455" /></span></li>
    	<li><span><b></b><img src="http://www.pmob.co.uk/temp/images/css-img14.gif" alt="test" width="130" height="190" /></span></li>
    </ul>
    </body>
    </html>
    Once again thanks for your support of these quizzes and keep an eye out for the next one. I'll let you have a couple of weeks break first to recharge before the next one.

    (If I missed anyone please shout as my computer died and my original list went missing.)

  8. #33
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I see a very similar pattern occurring with those helper elements, this was fun nether the less

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    I see a very similar pattern occurring with those helper elements, this was fun nether the less
    Thanks Chris

    I'll let you have a break for a couple of weeks and then I'll set some more dastardly puzzles for you.

  10. #35
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Most of the entries followed my first example and will follow shortly. Before I post the other entries there was one interesting entry from Simon (zcorpan) that only worked in opera but only required one line of css and no change to the html!!

    zcorpan Opera only
    Code:
    ...
    /* http://dev.opera.com/articles/view/css3-object-fit-object-position/*/
    .gallery li img { -o-object-fit:none; overflow:hidden; width:200px; height:200px }
    ...
    Now wouldn't that be easy if all supported it?
    If you want to be able to use this cross-browser you should bug the other browser vendors to implement this already.
    Simon Pieters

  11. #36
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by zcorpan View Post
    If you want to be able to use this cross-browser you should bug the other browser vendors to implement this already.
    That would be like telling IE users to switch to Google Chrome, sure it may not be funny to IE users but it shares the same concept

  12. #37
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    That would be like telling IE users to switch to Google Chrome, sure it may not be funny to IE users but it shares the same concept
    I don't see how that's the same at all.
    Simon Pieters

  13. #38
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey, i would like to use that solution for a website
    But i wondered, what if i want other size for the div than 200x200 ? what changes excactly needed to be done?

    And how can i add a few lines of text below of each image?

    and last question what are the spans in ahmedij are needed for? because when i removed them nothing changed (in firefox at least)

  14. #39
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ulthane View Post
    Hey, i would like to use that solution for a website
    But i wondered, what if i want other size for the div than 200x200 ? what changes exactly needed to be done?
    It all depends on what size you make the inner div as you just drag it upwards and left until the viewable div is central.
    e.g. Here I said we'd start with an element that is 10000px x 10000px to cover any possible image size. The div in which the image is viewed is only 200px x 200px so we have to drag the big element upwards and to the left by 4900px so that the 200px window is now at the center.

    Code:
    .gallery li div {
    	width:10000px;/* bigger than any image - can be any large number*/
    	height:10000px;/* bigger than any image - can be any large number*/
    	position:absolute;
    	top:-4900px;/* so that the 200px by 200px window is central within the 10000px div */
    	left:-4900px;
    	text-align:center;
    	white-space:nowrap;
    }
    If the viewable window was only 100px x 100px then the negative margin in the above code would be 4950px. i.e. 4950 + 100 + 4950 = 10000. If the viewable div was 300x 300 then you would need to use 4850px. (4850 + 300 + 4850 = 10000)

    And how can i add a few lines of text below of each image?
    I don't think that would make much sense in the context of the above and the text would probably need to be underneath the 200px x 200px window. Otherwise it would look a little odd with the text at various heights.

    and last question what are the spans in ahmedij are needed for? because when i removed them nothing changed (in firefox at least)
    The spans were for IE7 and under as could be noticed from the conditional comments

  15. #40
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The spans were for IE7 and under as could be noticed from the conditional comments
    haha, sorry didn't notice that IF :P

    Thanks for your answer

  16. #41

  17. #42
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There's a chart at http://caniuse.com/object-fit indicating the current state of support for this one line version using CSS 3 code. Apparently it is at the candidate recommendation stage so presumably it isn't far off being released as a standard.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  18. #43
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by felgall View Post
    There's a chart at http://caniuse.com/object-fit indicating the current state of support for this one line version using CSS 3 code. Apparently it is at the candidate recommendation stage so presumably it isn't far off being released as a standard.
    They're just trying to spoil my quiz

    Thanks for the link Stephen.


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
  •