1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Urgent help needed with HTML template

Discussion in 'HTML & JavaScript' started by kingc, Mar 13, 2014.

  1. kingc

    kingc Junior Member

    Joined:
    Dec 10, 2012
    Messages:
    112
    Likes Received:
    44
    Location:
    Your basement
    Hi guys, I could really do with some help. I'm currently trying to list an ebay item and am using an auction template I bought. Every things fine apart from the fact I cannot center the image in the product gallery section. I have very limited knowledge of html and have spent the last two hours trying various different combinations of code to no avail. If anyone could help me I'd be very grateful as its really stressing me out.

    Below is the full html code for the template. Underneath that is the specific part of the code where I am trying to center my image. I have left the center code included so you can see if I have made any obvious mistakes.

    Code:
    <html>
    <head>
        <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#e8e8e8">
            <tr>
                <td>
                    <div id="EBdescription">
                        <meta http-equiv="X-UA-Compatible" content="IE=9">
                        <meta charset="utf-8"/>
                        <style type="text/css">
                            body {
                                margin: 0;
                                padding: 0;
                                font: 12px Arial, sans-serif;
                                color: #333333;
                            }
                            .header {
                                width: 100%;
                                height: 115px;
                                background-image: url([URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/top.png[/URL]);
                                background-repeat: no-repeat;
                                background-position: center;
                                background-color: #616161;
                            }
                            .content {
                                width: 1020px;
                                background: #ffffff;
                                margin: auto;
                                padding-bottom: 20px;
                            }
                            .top {
                                width: 1020px;
                                height: 53px;
                                background: #ffffff url([URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/big_blue.png[/URL]);
                                background-repeat: no-repeat;
                                background-position: center;
                                margin: auto;
                                margin-top: -28px;
                            }
                            .title {
                                font: 18px Arial, sans-serif;
                                color: #ffffff;
                                text-align: center;
                                padding-top: 15px;
                                font-weight: bold;
                            }
                            .small {
                                width: 918px;
                                height: 30px;
                                background-image: url([URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/small_blue.png[/URL]);
                                background-repeat: no-repeat;
                                background-position: center;
                                margin: auto;
                                padding-top: 20px;
                                font: 14px Arial, sans-serif;
                                color: #ffffff;
                                text-align: center;
                                padding-bottom: 5px;
                                font-weight: bold;
                            }
                            .end {
                                width: 918px;
                                height: 15px;
                                margin: auto;
                                padding-top: 10px;
                                font: 10px Arial, sans-serif;
                                color: #666666;
                                text-align: center;
                                padding-bottom: 5px;
                                margin-bottom: 20px;
                            }
                            .end a {
                                color: #666666;
                                text-decoration: none;
                            }
                            .end a:hover {
                                color: #333333;
                            }
                            .field {
                                width: 918px;
                                background: #ffffff;
                                margin: auto;
                                font: 12px Arial, sans-serif;
                                color: #333333;
                            }
                            .shadow {
                                width: 1020px;
                                height: 9px;
                                background: url([URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/shadow.png[/URL]);
                                background-repeat: no-repeat;
                                background-position: center;
                                margin: auto;
                            }
                            .empty {
                                width: 750px;
                                padding-bottom: 20px;
                                margin: auto;
                                padding-top: 20px;
                                padding-left: 50px;
                            }
                            .artikelbilder {
                                position: relative;
                                width: 700px;
                                border: none;
                                float: left;
                                background-repeat: no-repeat;
                                background-position: top center;
                                margin-bottom: 20px;
                            }
                            .thumbnail img {
                                border: 5px solid #ffffff;
                                margin-top: 410px;
                            }
                            .thumbnail:link {
                                text-decoration: none;
                            }
                            .thumbnail:hover {
                                background-color: transparent;
                                text-decoration: none;
                            }
                            .thumbnail span {
                                position: absolute;
                                left: -1000px;
                                border: none;
                                visibility: hidden;
                                text-decoration: none;
                            }
                            .thumbnail span img {
                                padding: 0px;
                                border: none;
                            }
                            .thumbnail:hover span {
                                visibility: visible;
                                top: -410px;
                                left: 85px;
                                z-index: 50;
                            }
                            .image-wrap {
                                text-align: center;
                            }
                            .image-wrap img {
                                margin: 0 auto;
                                text-align: center;
                            }
                        </style>
    </head>
    <body oncontextmenu="return false">
    <div class="header"></div>
    <div class="content">
        <div class="top">
            <div class="title">Your listing title here</div>
        </div>
        <p>&nbsp;</p>
        <div class="small">Product Gallery</div>
        <div class="field">
            <div class="empty">
                <div class="image-wrap">
                    [COLOR=#008000]<center>[/COLOR]<img src="[URL]http://i1081.photobucket.com/albums/j354/kingc123/Infographicone.jpg[/URL]" width="470" height="320">[COLOR=#008000]</center>[/COLOR] alt=""/>
                </div>
            </div>
        </div>
        <div class="small">Item Description</div>
        <div class="field">
            <p align="center">Item description text here </p>
        </div>
        <div class="small">Payment Terms</div>
        <div class="field">
            <p align="center">Payment terms text here</p>
        </div>
        <div class="small">Shipping Terms</div>
        <div class="field">
            <p align="center">Shipping terms text here</p>
            <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="center" valign="middle"><img
                            src="[URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/versand_ups.jpg[/URL]" width="85"
                            height="50"></td>
                    <td align="center" valign="middle"><img
                            src="[URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/versand_dhl.jpg[/URL]" width="85"
                            height="50"></td>
                    <td align="center" valign="middle"><img
                            src="[URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/versand_fedex.jpg[/URL]" width="85"
                            height="50"></td>
                    <td align="center" valign="middle"><img
                            src="[URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/versand_gls.jpg[/URL]" width="85"
                            height="50"></td>
                    <td align="center" valign="middle"><img
                            src="[URL]http://www.gfdesign.nazwa.pl/ebay_templates/simple_com/versand_dpd.jpg[/URL]" width="85"
                            height="50"></td>
                </tr>
            </table>
        </div>
        <div class="small">Other Terms</div>
        <div class="field">
            <p align="center">Other terms text here </p>
        </div>
    </div>
    <div class="shadow">
    </div>
    <div class="end">
        <p>Copyrights © 2013 by <a href="[URL]http://stores.ebay.com/LOGO-DESIGN-SHOP?_trksid=p4340.l2563"><strong>GF[/URL]
            DESIGN</strong></a>. All rights reserved.</p>
    </div>
    </td></tr></table><span id="closeHtml"></span>
    </body>
    </html>
    
    

    Code:
    <div class="small">Product Gallery</div>
        <div class="field">
            <div class="empty">
                <div class="image-wrap">
                    [COLOR=#008000]<center>[/COLOR]<img src="[URL]http://i1081.photobucket.com/albums/j354/kingc123/Infographicone.jpg[/URL]" width="470" height="320">[COLOR=#008000]</center>[/COLOR] alt=""/>
                </div>
            </div>
        </div>
    
     
  2. MrBlue

    MrBlue Senior Member

    Joined:
    Dec 18, 2009
    Messages:
    950
    Likes Received:
    662
    Occupation:
    Web/Bot Developer
    The center tag has been deprecated.

    Use CSS instead:

    Code:
    .center { margin: auto; text-align: center; }
    
    Code:
        <div class="field">
            <div class="empty">
                <div class="image-wrap">
                    <div class="center"><img src="http://i1081.photobucket.com/albums/...graphicone.jpg" width="470" height="320"></div>
                </div>
            </div>
        </div>
    
     
    • Thanks Thanks x 1
  3. pxoxrxn

    pxoxrxn Supreme Member

    Joined:
    Dec 21, 2011
    Messages:
    1,397
    Likes Received:
    2,066
    Put !important on it aswell.
     
    • Thanks Thanks x 1
  4. kingc

    kingc Junior Member

    Joined:
    Dec 10, 2012
    Messages:
    112
    Likes Received:
    44
    Location:
    Your basement
    Thanks guys, tried it the way you suggested and it worked a treat!