www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 30

Thread: Centering Problem???

  1. #1
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84

    Centering Problem???

    this is the code I am using:
    Code:
    <table border=0 cellpadding=0 width="100%" >
       <tr>
        <td style='align:center'>
        <table>
        <tr>
        <td>
        <a href="index1.html" border=0><img src="pictures\Picture1.png"></a>
        <a href="index2.html" border=0><img src="pictures\Picture2.png"></a>
        <a href="index3.html" border=0><img src="pictures\Picture3.png"></a>
        <a href="index4.html" border=0><img src="pictures\Picture4.png"</a>
        <a href="index5.html" border=0><img src="pictures\Picture5.png"</a> 
        </td>
        </tr>
        </table>
        </td>
       </tr>
    </table>
    I am trying to groug the picture in the table then center the table so that the picture are always center to the page.

    Can some tell me what i am doing wrong. I have been playing with this off and on for 2 day, and it is getting to the point I am going nuts.

    Thanks in advance.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add align="center" to the inner table tag

  3. #3
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    ok, now I feel stupid.

    Thanks

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632
    Is there any reason for the nested table because looking at what you posted, I don't see why you need it.

  5. #5
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    Yes, because I want to accommodate different resolutions. So I grouped them then the group is moved to the center of page.

  6. #6
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    This code will do what you need, and not use nested tables. For it to work in IE, you need to specify a valid doctype. Then, you just need to change the width of the container div to fit you pictures...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    </head>
    <body>
    <div style="width: 200px; margin: auto;">
        <a href="index1.html" border=0><img src="pictures\Picture1.png"></a>
        <a href="index2.html" border=0><img src="pictures\Picture2.png"></a>
        <a href="index3.html" border=0><img src="pictures\Picture3.png"></a>
        <a href="index4.html" border=0><img src="pictures\Picture4.png"</a>
        <a href="index5.html" border=0><img src="pictures\Picture5.png"</a> 
    </div>
    </body>
    </html>

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  7. #7
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    You should include alt attribute for all your images. Including height and width is also a good idea.

    Important to use a proper doctype (see first line of Pyro's code) for this to work.

  8. #8
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    pyro

    Is there a way to insure that it stays at the bottom of the page.

    See this thread in the CSS forum to see the details.

  9. #9
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Originally posted by nkaisare
    You should include alt attribute for all your images.
    Didn't even look at that, but you are most definitly correct.

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  10. #10
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    I feel as though I have to defend myself. So here is a copy/past of the actual code. The other code was what I typed out for the tread.

    Code:
    <div style="width: 207px; margin: auto">
    <a href="website" border="0"><img src="pictures/violin.png" width="41" height="34" aline="top" border="0"></a>
    <a href="website" border="0"><img src="pictures/sax_sh.png" width="27" height="34" aline="top" border="0"></a>
    <a href="website" border="0"><img src="pictures/keyboard.png" width="42" height="34" aline="top" border="0"></a>
    <a href="website" border="0"><img src="pictures/guitar.png" width="54" height="34" aline="top" 	border="0"></a>
    <a href="website" border="0"><img src="pictures/bongo.png" width="43" height="34" aline="top" border="0"></a>
    </div>
    The div tags don't seem to work as well as the table, but the div tags can be expanded which is nice. Actual as it is now, the pictures are no longer align to each other, the last one is under the other four.

    And don't worry about the href association because they are not made yet, so I don't have them labeled yet. I plan to use this page that I am working on as a template to create them.

    Any suggestion as to what the problem could be.

    Thanks

  11. #11
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    Ok, my bad, I forgot about the doctype. It center it just like that, but the last image is style under the other four.

    ??? ???

  12. #12
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    Try increasing the width of the div slightly
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

  13. #13
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    you were right. I did try that before I post the last message. It is suppostto be 207, so I put it up to 210, then,215, then 220, but still nothing.

    I now put it to 230, and it worked, thanks.

  14. #14
    Join Date
    Aug 2003
    Location
    Here
    Posts
    84
    Anyone suggest how I can combine these two codes

    (you know what I was going to copy and past the code, as clean it up, but I would know where to start. So...)

    Please visit this thread and check out the code and the question.

    Then maybe you can explain how I can incorporate it into the code above.


    I tried:
    Code:
    <div id="d1" style="position: absolute; width: 230; bottom: 0px; text-align: bottom; margin: auto">
    <a href="website"...
    But as you can well guess it did not work.

    Just a little more assistance would be great.

    I do appreciate it immensely.

  15. #15
    Join Date
    Feb 2003
    Location
    Wales, UK
    Posts
    3,148
    can you give us the code for the the entire page? cut the contents if you like, but all the tags and css. It's hard to envisage exactly what you mean...

    Thanks
    In a world without walls and fences - who needs Windows and Gates?! - Unknown Author
    "And there's Bill Gates, the...most...famous...man in the...ah...Microsoft." -- A TV commentator for the 2000 Olympics.


    Web Design Faq? | W3C | Validator | Accessibility testing | Speed up your PC | Wura | Box Model Research

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles