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

U

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....
badsig.jpg

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
 
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
 
ubikdesign said:
My main concern is why the image is splitting up when the html code is pasted?
Click to expand...

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!
 
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>
 
You must log in or register to reply here.
Back
Top