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

A little bit of html help needed.....

Discussion in 'Website Coding & Programming Forum:' started by ubikdesign, Feb 12, 2011.

  1. ubikdesign

    ubikdesign New Member

    Hi all, am still a bit of an amateur when it comes to html coding, so a little help would be much appreciated on this niggly problem...
    I have created a custom forum signature, to be uploaded to a forum i regularly use. The artwork has been created in photoshop, then sliced, saved as html and images, and opened in dreamweaver, to give me the following code.....


    <html>
    <head>
    <title>sigtest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (sigtest.jpg) -->
    <table id="Table_01" width="800" height="200" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="4">
    <a href="http://www.ubikdesign.co.uk"><img src="http://connekted.co.uk/sig1.jpg" alt="" width="800" height="106" border="0"></a></td>
    </tr>
    <tr>
    <td>
    <a href="http://www.ubikdesign.co.uk"><img src="http://connekted.co.uk/sig2.jpg" alt="" width="535" height="94" border="0"></a></td>
    <td>
    <img src="http://connekted.co.uk/sig3.jpg" width="89" height="94" alt=""></td>
    <td>
    <img src="http://connekted.co.uk/sig4.jpg" width="78" height="94" alt=""></td>
    <td>
    <a href="http://www.twitter.com/ubikdesign"><img src="http://connekted.co.uk/sig5.jpg" alt="" width="98" height="94" border="0"></a></td>
    </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>




    However, when i paste this into the source text box that is installed on the forum, i get an image that looks like this....
    [​IMG]
    As you can see from the image, it seems to distort and separate from where the image has been sliced. Any help on how to get it looking right would be very appreciated!

    Thanks
    G
     
  2. phoenix1331

    phoenix1331 New Member

    Why are you slicing it up to use as a sig, why not keep it as a complete image.......
     
  3. ubikdesign

    ubikdesign New Member

    ive sliced it so that each individual slice will act as links, ie twitter...email....weblink etc. I could create individual buttons, but thought it would just be simpler to create a full sig image, slice up and upload that way. My main concern is why the image is splitting up when the html code is pasted?

    cheers
    G
     
  4. Corrosive

    Corrosive Moderator Staff Member

    This is the inherent problem with using tables and slices to layout anything. If you need your sig to be posted easily then look at using div tags and inline CSS styles instead. Photoshop is not designed to generate good HTML code, and it shows!
     
  5. MatJohnson

    MatJohnson New Member

    Yep, make it as div's and li's. If you are struggling, send it over and I will give you the code back
     
  6. byronc

    byronc Member

    try this



    <html>
    <head>
    <title>sigtest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">



    <!-- ImageReady Slices (sigtest.jpg) -->
    <div style="width:800px; height:200px" >

    <div>
    <td colspan="4">
    <a href="http://www.ubikdesign.co.uk"><img src="http://connekted.co.uk/sig1.jpg" alt="" width="800" height="106" border="0"></a></td>
    </div>

    <div>

    <div style="float:left">
    <a href="http://www.ubikdesign.co.uk"><img src="http://connekted.co.uk/sig2.jpg" alt="" width="535" height="94" border="0"></a></td>
    </div>

    <div style="float:left">
    <img src="http://connekted.co.uk/sig3.jpg" width="89" height="94" alt="">
    </div>

    <div style="float:left">
    <img src="http://connekted.co.uk/sig4.jpg" width="78" height="94" alt="">
    </div>

    <div style="float:left">
    <a href="http://www.twitter.com/ubikdesign"><img src="http://connekted.co.uk/sig5.jpg" alt="" width="98" height="94" border="0"></a>
    </div>

    </div>

    </div>
    <!-- End ImageReady Slices -->
    </body>
    </html>
     

Share This Page