Help - Search - Members - Calendar
Full Version: Codein A Sliced Template
Zymic Webmaster Forums > Web Design & Development > Graphic Design > 2D Graphics (Photoshop, Illustrator, etc)
Brandon
I have Sliced a template and i have it coded it in html but when i link the buttons the page goes messged up and everything goes eveywhere els can someone help me with this

My Code is

CODE
<html>
<head>
<title>Sony</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
    background-color: #777777;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
-->
</style></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Sony.psd) -->
<div align="center">
<table id="Table_01" width="801" height="821" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="13">
            <img src="images/Sony_01.jpg" width="800" height="183" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="183" alt=""></td>
    </tr>
    <tr>
        <td colspan="4">
            <img src="images/Sony_02.jpg" width="237" height="2" alt=""></td>
        <td rowspan="2">
            <img src="images/Sony_03.jpg" width="79" height="22" alt=""></td>
        <td rowspan="4">
            <img src="images/Sony_04.jpg" width="14" height="172" alt=""></td>
        <td colspan="2" rowspan="3">
            <img src="images/Sony_05.jpg" width="133" height="25" alt=""></td>
        <td rowspan="6">
            <img src="images/Sony_06.jpg" width="16" height="637" alt=""></td>
        <td rowspan="3">
            <img src="images/Sony_07.jpg" width="64" height="25" alt=""></td>
        <td rowspan="6">
            <img src="images/Sony_08.jpg" width="11" height="637" alt=""></td>
        <td rowspan="3">
            <img src="images/Sony_09.jpg" width="48" height="25" alt=""></td>
        <td rowspan="6">
            <img src="images/Sony_10.jpg" width="198" height="637" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="2" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/Sony_11.jpg" width="170" height="635" alt=""></td>
        <td colspan="2">
          <img src="images/Sony_12.jpg" width="58" height="20" alt=""></td>
        <td rowspan="3">
            <img src="images/Sony_13.jpg" width="9" height="170" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/Sony_14.jpg" width="58" height="150" alt=""></td>
        <td rowspan="2">
            <img src="images/Sony_15.jpg" width="79" height="150" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="3" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="images/Sony_16.jpg" width="133" height="147" alt=""></td>
        <td rowspan="3">
            <img src="images/Sony_17.jpg" width="64" height="612" alt=""></td>
        <td rowspan="3">
            <img src="images/Sony_18.jpg" width="48" height="612" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="147" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/Sony_19.jpg" width="32" height="465" alt=""></td>
        <td colspan="5">
            <img src="images/Sony_20.jpg" width="150" height="46" alt=""></td>
        <td rowspan="2">
            <img src="images/Sony_21.jpg" width="111" height="465" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="46" alt=""></td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/Sony_22.jpg" width="150" height="419" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="419" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="170" height="1" alt=""><a href="http://www.streetsofny.org"></td>
        <td>
            <img src="images/spacer.gif" width="32" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="26" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="79" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="22" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="111" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="16" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="64" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="48" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="198" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
Banjo
If you putting links on images, when you put a link on it it automatically puts a border on it and that messes it up.

To stop that just add border="#"

E.G

CODE
<a href="http://www.google.com"><img src="images/Sony_03.jpg" width="79" height="22" alt="" border="#"></a>


If its text links then you have to make sure you have space to put stuff.

A picture of your layout would be nice easier to explain what to do.

Edit: Ill whip you up a small tut on how to do it in a min with pictures. rolleyes.gif

Also i notice to center you layout you got this

CODE
<div align="center">
<table id="Table_01" width="801" height="821" border="0" cellpadding="0" cellspacing="0">


You dont need

CODE
<div align="center">


there

just change the second line to look like this

CODE
<table id="Table_01" width="801" height="821" border="0" cellpadding="0" cellspacing="0" align="center">


Brandon
QUOTE(Banjo @ Dec 30 2007, 07:38 PM) *
If you putting links on images, when you put a link on it it automatically puts a border on it and that messes it up.

To stop that just add border="#"

E.G

CODE
<a href="http://www.google.com"><img src="images/Sony_03.jpg" width="79" height="22" alt="" border="#"></a>


If its text links then you have to make sure you have space to put stuff.

A picture of your layout would be nice easier to explain what to do.

Edit: Ill whip you up a small tut on how to do it in a min with pictures. rolleyes.gif

Also i notice to center you layout you got this

CODE
<div align="center">
<table id="Table_01" width="801" height="821" border="0" cellpadding="0" cellspacing="0">


You dont need

CODE
<div align="center">


there

just change the second line to look like this

CODE
<table id="Table_01" width="801" height="821" border="0" cellpadding="0" cellspacing="0" align="center">

OMG Thanks Man Your a Star only problem with doing what ya said with the # yeh it still messes it up in IE but fine in FF :S
Banjo
Mabye just change the # to 0 or something. Was that the only thing is it all fixed now or do you need some more help with other things like putting just text links on there not images?

I only really figured out how to kinda slice layouts today when i tried doing mine.
Brandon
QUOTE(Banjo @ Dec 30 2007, 08:19 PM) *
Mabye just change the # to 0 or something. Was that the only thing is it all fixed now or do you need some more help with other things like putting just text links on there not images?

I only really figured out how to kinda slice layouts today when i tried doing mine.

lol cool the buttons are images with the text allready on them umm with # or 0 still doesnt work sad.gif
Banjo
Urm what about
CODE
border=0


Note no " around the 0.

or

border=""

If still doesn't work then i dont know why then. (I havent done html for like a year so forgot alot lol.)
Brandon
Nah Still dont wana work thanks for all your help anyway wink.gif
Banjo
No problem.

Now for me to learn to slice a layout and make it expandable.
Brandon
QUOTE(Banjo @ Dec 30 2007, 10:19 PM) *
No problem.

Now for me to learn to slice a layout and make it expandable.

Lol yeh ok smile.gif if you need help with anything ill try 2 help you out with anything
Banjo
QUOTE
Lol yeh ok smile.gif if you need help with anything ill try 2 help you out with anything


Thanks

Btw are you sure those ways don't work with the images, becuase i tried some stuff in with a random image and link and it works in both ie and firefox, Althought i have IE6 i think (The one before the tabbed one)

This is what i got that works in IE and FF

CODE
<h1>Images 2</h1>
<a href="#"><img src="test.gif" border=""></a>
<p>

<h1>Images 3</h1>
<a href="#"><img src="test.gif" border="0"></a>
<p>

<h1>Images 4</h1>
<a href="#"><img src="test.gif" border="#"></a>
<p>

<h1>Images 7</h1>
<a href="#"><img src="test.gif" border=#></a>
<p>


If your still haveing poblem maybe i could have a look at it for you.
Brandon
QUOTE(Banjo @ Dec 31 2007, 01:13 PM) *
Thanks

Btw are you sure those ways don't work with the images, becuase i tried some stuff in with a random image and link and it works in both ie and firefox, Althought i have IE6 i think (The one before the tabbed one)

This is what i got that works in IE and FF

CODE
<h1>Images 2</h1>
<a href="#"><img src="test.gif" border=""></a>
<p>

<h1>Images 3</h1>
<a href="#"><img src="test.gif" border="0"></a>
<p>

<h1>Images 4</h1>
<a href="#"><img src="test.gif" border="#"></a>
<p>

<h1>Images 7</h1>
<a href="#"><img src="test.gif" border=#></a>
<p>


If your still haveing poblem maybe i could have a look at it for you.


sad.gif no Still Don't Want to work umm how would you look at it lol:P?

EDIT:
This is what it looks like in FF
http://i18.tinypic.com/6jy9650.jpg The right screen
and thisis what it looks like in IE
http://i2.tinypic.com/6tmpv6o.jpg
Banjo
Urmmmm.

QUOTE
sad.gif no Still Don't Want to work umm how would you look at it lol:P?


Maybe you could upload it and i could veiw the source of it.

Or some other person on here might no the answer.
Brandon
QUOTE(Banjo @ Dec 31 2007, 02:06 PM) *
Urmmmm.
Maybe you could upload it and i could veiw the source of it.

Ill put it ina zip file tongue.gif and send ok
Banjo
Ok, ill keep an eye on my inbox wink.gif
Brandon
No one Seens that :|
Heres ya go
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.