1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to center floating thumbnails?

Discussion in 'CSS' started by classifieds, Apr 21, 2006.

0
  1. #1
    Aarrrgggghhhhh. . . I’m pulling my hair out trying to get css to place centered floating thumbnails in a div container.

    Does any one have ideas on how to do it without using a table?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#container {position: relative;}
#container .thumbnail {float:left; width:120px; padding:5px; margin-top:10px}
#container img {width:70px; height:70px;}
#container .result {width:70px; height:70px;border:1px #999000 solid; }
#container p {font-size:8.5px; text-align:center}
}
-->
</style>
</head>
<body>
<div id="container" align="center">
  <div class="thumbnail" align="center">
    <div class="result" > <img src="files/image1.gif" /> <br />
      <p><a href="page1.html">Image1</a></p>
    </div>
  </div>
  <div class="thumbnail" align="center">
    <div class="result" > <img src="files/image2.gif" /> <br />
      <p><a href="page2.html">Image2</a></p>
    </div>
  </div>
  <div class="thumbnail" align="center">
    <div class="result" > <img src="files/image3.gif" /> <br />
      <p><a href="page3.html">Image3</a></p>
    </div>
  </div>
</div>
<div style="clear:both"></div>
</body>
</html>
    Code (markup):
     
    classifieds, Apr 21, 2006 IP