SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Centering three images in line

    Hi,

    I need to horizontally align three images on a page. I want them to automatically keep the same distance to each other. Right now I have this HTML:
    Code:
    <table id="showcase">
    <tr>
    <td><image src="image1.jpg" /></td>
    <td><image src="image2.jpg" /></td>
    <td><image src="image3.jpg" /></td>
    </tr>
    </table>
    And this CSS:
    Code:
    #showcase {
    	width: 100%;
    }
    
    #showcase td {
    	text-align: center;
    }
    Which works great by the way! But is this the semantically correct way to do it?

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks more like a list to me than a table so I'd probably go for something like this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Showcase</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    * {
    	padding: 0;
    	margin: 0;	
    }
    li {
    	list-style-type: none;
    	float: left;
    	width: 33&#37;;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    <ul id="showcase">
    	<li><img src="http://www.sitepoint.com/forums/image.php?u=108397&amp;dateline=1148431175" alt=""></li>
    	<li><img src="http://www.sitepoint.com/forums/image.php?u=108397&amp;dateline=1148431175" alt=""></li>
    	<li><img src="http://www.sitepoint.com/forums/image.php?u=108397&amp;dateline=1148431175" alt=""></li>
    </ul>
    </body>
    </html>

  3. #3
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CSSWIZ,

    works like a charme, thanks for that! I also added this:
    Code:
    #showcase:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Is that how you would do it?

  4. #4
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That won't work in IE. Either floating the <ul> or making it overflow: auto in conjunction with width: 100&#37; (assuming there's no margins/padding) will work in IE and other browsers.

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah what Tyssen said. I'd probably go for:

    Code:
    #showcase {
      overflow: auto;
      width: 100&#37;;
    }

  6. #6
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a bunch! Working great! (as usual)


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
  •