Iphone Display Layout in CSS

I am trying to create a webpage to display like the Iphone, having:

  • 4 images across
  • title of image centered below the image

Here is the live link

I can’t get the text to align properly under the image.

Right now for the :hover, I have the border changing color. I really want to create a rollover image that is faded, I just don’t know how to make it work. I tried using “background: transparent url (…)”, but I couldn’t get it to work. Any help is greatly appreciated! Thank you.

Hi. Use a ul/li setup. Display inline-block and text align center on the li. Nest a span in the li with display block.

You could do something like this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Iphone Display</title>
<style type="text/css" media="screen">
body, html {
    height: 100%;
}
body {
    text-align: center;
    background: #000;
    color: #fff;
}
#wrapper_display {
    width: 610px;
    min-height: 100%;/* do you really want this ?*/
    margin: 0 auto;
}
* html #wrapper_display {height:100%}
#tile {
    padding: 10px;
    width: 600px; /* set width to suit */
    border: 4px solid #fff;
    list-style:none;
    margin :0;/*text-align:left; if you want it left aligned*/
}
#tile li {
    margin: 0px 5px 10px 5px;
    width: 148px;
    border: 4px solid #000;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display:inline-block;
    vertical-align:bottom;
}
* html #tile li {display:inline}/* ie6 inline-block hack */
*+ html #tile li {display:inline}/* ie7 inline-block hack */
#tile li strong {
    display:block;
    text-align:center;
    padding:4px 0;
}
#tile li:hover {
    border: 4px solid #0099FF;
    cursor: pointer;
}
#tile li img {
    opacity:0.4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#tile li:hover img {
    opacity:1.0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
</style>
</head>
<body>
<div id="wrapper_display">
    <ul id="tile">
        <li><img alt="img1" src="http://rigstock.com/iphone/img1.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img2" src="http://rigstock.com/iphone/img2.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img3" src="http://rigstock.com/iphone/img3.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img4" src="http://rigstock.com/iphone/img4.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img5" src="http://rigstock.com/iphone/img5.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img6" src="http://rigstock.com/iphone/img6.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img7" src="http://rigstock.com/iphone/img7.jpg" ><strong>Caption here</strong></li>
        <li><img alt="img8" src="http://rigstock.com/iphone/img8.jpg" ><strong>Caption here</strong></li>
    </ul>
</div>
</body>
</html>

There won’t be any hover effect in IE6 though and ie8 and under won’t have round corners.

Paul,

Thank you very much for the coding help. I have a few questions about your code.

  • If I eliminate the border around the images, will there still be rendering problems with the “hover effect” in IE6 and IE8?
  • For “wrapper_display”, I got the “min-height: 100%” from another code. If I delete it, will this affect how the page is rendered in older browsers?

Once again, thank you for your help! :slight_smile:

IE8 and under don’t do border-radius so they won’t get the round borders at all. IE7 and 8 will get square borders on hover but IE6 will get neither because it doesn’t understand hover on anything but anchors.

If you wanted a hover effect in IE6 you would need to use an anchor around the image and then add the borders to the anchor (or the image) and change them via the hover on the anchor. Assuming the images are going to be links anyway then it shouldn’t be an issue.

For “wrapper_display”, I got the “min-height: 100%” from another code. If I delete it, will this affect how the page is rendered in older browsers?
Once again, thank you for your help! :slight_smile:

You don’t seem to be using the 100% height for anything useful so it is doing nothing with your code except making the element stretch to the bottom. If perhaps the wrapper was coloured then it would make a difference but as it stands you don;t need it.

However, if you want the min-height:100% effect then you do need to move the height:100% rule from the wrapper into its own IE6 only rule otherwise you will break all browsers except ie6 as they confine the height to 100% and it can never grow further than the viewport.

Paul,

Thank you once again for your help! I really appreciate it! :slight_smile: