SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Using Css To Center Images

    ok i am completely stumped, everysince i went to the xhtml standards for my entire site, i've been having problems trying to keep it standards compliance, while at the same time i can't get my images to all be centered.

    if i try to add the center tag xhtml strict says it's not allowed and i am trying to use css to resolve the problem but i don't have the slightest clue on how to do so, so how do i go about centering a group images so they'll be in the center of the page instead of them all on the left side of the page.

    heres a copy of my css file to see if you guys can help out.

    HTML Code:
     body {
     background-color: #22437f;
     color: #000;
     font-size: 0.9em;
     font-family: sans-serif,helvetica;
     margin: 0;
     padding: 0;
    }
    {
     img align: center;
    }
    td {
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    color : #000000; 
    } 
    .text {
    color : #000000; 
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    text-decoration : none; 
    } 
    .textlight {
    color : #000000; 
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    text-decoration : none; 
    } 
    .header {
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    font-weight : bold; 
    color : #333333; 
    } 
    .header2 {
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    font-weight : bold; 
    color : #000000; 
    } 
    .header3 {
    font-family : arial, helvetica, sans-serif; 
    font-size : 8px; 
    color : #000000; 
    } 
    a:link {
    color : #666666; 
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    font-size : 10px; 
    text-decoration : none; 
    } 
    a:visited {
    color : #666666; 
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    font-size : 10px; 
    text-decoration : none; 
    } 
    a:active {
    color : #ffff00; 
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    font-size : 10px; 
    text-decoration : none; 
    } 
    a:hover {
    text-decoration : none; 
    font-family : arial, helvetica, sans-serif; 
    font-weight : bold; 
    font-size : 10px; 
    color : #6495ed; 
    }
    help me please
    i love php

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you explain in a bit more detail what you're trying to do - e.g. is this for a photo gallery style page, or a single image within some text, or what?

    If it is just a collection of images, you can center the whole lot by enclosing them in a DIV and centering that:
    Code:
    /* CSS */
    
    body {
    text-align: center;
    }
    
    #gallery {
    margin: 0 auto;
    width: 500px;
    }
    
    <!-- HTML -->
    
    <div id="gallery">
    <img src="1.gif" />
    <img src="2.gif" />
    <img src="3.gif" />
    <img src="4.gif" />
    </div>
    Obviously you'd want to apply some CSS to the images to get them to line up and look good too.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, and this:
    Code:
    {
     img align: center;
    }
    Makes absolutely no sense at all.

  4. #4
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Oh, and this:
    Code:
    {
    img align: center;
    }
    Makes absolutely no sense at all.
    as i recall i said i don't know how to make my images be in the center of the page so there.

    anyways perhaps the code will help you out a bit more as to what i am trying to accomplish!

    HTML Code:
      <table width="950" cellpadding="0" cellspacing="0" summary="">
       <tr>
    	<td colspan="2">
    	 <img src="images/mustang_01.jpg" width="418" height="51" alt="" /> 
    	</td>
    	<td colspan="2">
    	 <img src="images/mustang_02.jpg" width="532" height="51" alt="" /> 
    	</td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="51" alt="" /> 
    	</td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/mustang_03.jpg" width="247" height="147" alt="" /></td>
    	<td colspan="2" rowspan="2">
    	 <img src="images/mustang_04.jpg" width="418" height="202" alt="" /></td>
    	<td rowspan="3">
    	 <img src="images/mustang_05.jpg" width="285" height="271" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="147" alt="" /></td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/mustang_06.jpg" width="247" height="55" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="55" alt="" /></td>
       </tr>
       <tr>
    	<td colspan="2" rowspan="2">
    	 <img src="images/mustang_07.jpg" width="418" height="219" alt="" /></td>
    	<td rowspan="2">
    	 <img src="images/mustang_08.jpg" width="247" height="219" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="69" alt="" /></td>
       </tr>
       <tr>
    	<td rowspan="2">
    	 <img src="images/mustang_09.jpg" width="285" height="208" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="150" alt="" /></td>
       </tr>
       <tr>
    	<td colspan="2">
    	 <img src="images/mustang_10.jpg" width="418" height="58" alt="" /></td>
    	<td>
    	 <a href="coming-soon/"><img src="images/mustang_11.jpg" width="247" height="58" style="border:0;" alt="click here" /></a></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="58" alt="" /></td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="171" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="285" height="1" alt="" /></td>
    	<td>
    	</td>
       </tr>
      </table>
    i want to be able to put this in the center of the page now do you get what i am trying to say.
    i love php

  5. #5
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now how do i go about using css to center all of that?
    i love php

  6. #6
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nevermind i finally figured it out thanks for your help anyways it was greatly apprieciated .
    i love php

  7. #7
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You ditch all that table cr*p and layout your site using CSS...

  8. #8
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    You ditch all that table cr*p and layout your site using CSS...
    i am lost what do you mean.
    i love php

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2003
    Location
    California
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you use CSS for the site layout and drop tables altogether.
    Google Chat Boards - unofficial Google discussion forum

  10. #10
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gengar56
    you use CSS for the site layout and drop tables altogether.
    is there a tutorial or something that can help me do this or would be kind enough to show me an example on how to do this, with the code already provided, so i can learn it and drop the use of tables if this will help on the alignment woes.

    thanks
    i love php

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    now how do i go about using css to center all of that?
    If you mean centre the table then simply give your table an id and then use margin-left:auto and margin-right:auto to centre the whole table.

    You need to add text-align:center on a parent to centre it for ie5 and 5.5..
    Code:
    body {
     background-color: #22437f;
     color: #000;
     font-size: 0.9em;
     font-family: sans-serif,helvetica;
     margin: 0;
     padding: 0;
    text-align:center;/* center for ie5/5.5.*/
    }
    table#main{
     width:950px;
     margin-left:auto;/* centre for good browsers*/
     margin-right:auto;/* centre for good browsers*/
     text-align:left;
    }
    

    Code:
    <table id="main"  cellpadding="0" cellspacing="0" summary="">
    The faq sticky thread has a few pointers on how to centre things which you might find useful.


    is there a tutorial or something that can help me do this or would be kind enough to show me an example on how to do this, with the code already provided, so i can learn it and drop the use of tables if this will help on the alignment woes.
    We'd need to know how the table was to behave and what other content was going in it.

    If the table is just a holder for all those images then you could simply absolutely place the images where you want them.

    As I can't see the images I've no idea what your page is about or what you are trying to do with that patchwork of images. Do they go together some way to produce a picture? Or are they just separate images pushed up together?

    If you had a link to the live page then we could give you some pointers on how to convert it. At the moment all I could give you is a load of co-ordinates for abolutely placed elements .

    Paul

  12. #12
    Apache Expert i_like_php's Avatar
    Join Date
    Nov 2001
    Location
    Dallas, Texas
    Posts
    1,342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heres the code to the entire page, since the site isn't live as of yet but here it is....

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> 
    <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" lang="en" xml:lang="en">
    <head>
    <link rel="stylesheet" 
    	  type="text/css" 
    	  href="/includes/transitional.css" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <title>
       testing xhtml standards
      </title>
    </head>
    <body> 
    <div class="center">
      <table width="950" cellpadding="0" cellspacing="0" summary="">
       <tr>
    	<td colspan="2">
    	 <img src="images/corvette_01.jpg" width="418" height="51" alt="" /> 
    	</td>
    	<td colspan="2">
    	 <img src="images/corvette_02.jpg" width="532" height="51" alt="" /> 
    	</td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="51" alt="" /> 
    	</td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/corvette_03.jpg" width="247" height="147" alt="" /></td>
    	<td colspan="2" rowspan="2">
    	 <img src="images/corvette_04.jpg" width="418" height="202" alt="" /></td>
    	<td rowspan="3">
    	 <img src="images/corvette_05.jpg" width="285" height="271" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="147" alt="" /></td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/corvette_06.jpg" width="247" height="55" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="55" alt="" /></td>
       </tr>
       <tr>
    	<td colspan="2" rowspan="2">
    	 <img src="images/corvette_07.jpg" width="418" height="219" alt="" /></td>
    	<td rowspan="2">
    	 <img src="images/corvette_08.jpg" width="247" height="219" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="69" alt="" /></td>
       </tr>
       <tr>
    	<td rowspan="2">
    	 <img src="images/corvette_09.jpg" width="285" height="208" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="150" alt="" /></td>
       </tr>
       <tr>
    	<td colspan="2">
    	 <img src="images/corvette_10.jpg" width="418" height="58" alt="" /></td>
    	<td>
    	 <a href="coming-soon/"><img src="images/corvette_11.jpg" width="247" height="58" style="border:0;" alt="click here" /></a></td>
    	<td>
    	 <img src="images/spacer.gif" width="1" height="58" alt="" /></td>
       </tr>
       <tr>
    	<td>
    	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="171" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="247" height="1" alt="" /></td>
    	<td>
    	 <img src="images/spacer.gif" width="285" height="1" alt="" /></td>
    	<td>
    	</td>
       </tr>
      </table>
    </div>
     <center> 
      <a href="photos.php">my photos</a>
      <a href="main.php">main page</a> 
      <a href="phpbb2/">forum</a> <a href="carvideos.php">car vids</a> 
      <a href="author">authors page</a> <a href="version.php">version history</a>
    <br />
      <font face="century gothic" size="1" color="#000000"> 
    &copy; 1996-2004 corvette.com All rights reserved.&nbsp;
      <a href="privacy-policy/">[privacy policy]</a></font>
     </center>
    <p>
    	  <a href="[url="http://validator.w3.org/check?uri=referer"]http://validator.w3.org/check?uri=referer"><img[/url]
    		  src="/images/xhtml.gif"
    		  alt="Valid XHTML 1.0!" border="0" /></a>
    </p>
     </body> 
    </html>
    thanks for the other tips provided and i will have a look at the thread in question. since i can't explain how the table is used maybe the provided source code will be able to help you understand what i am talking about.
    i love php


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
  •