Jump to content

Zoom problem on HTML site created in Photoshop.


ExPloZee
 Share

Recommended Posts

Hi guys,I am having a problem with the html site i created in photoshop.Everytime i try to zoom in or out you can see some parts break up and white lines appear.As i said, the site was created in photoshop so it is formed by JPEG images and a table.I will leave the HTML code here:

<html>
<head>
<title>Index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="CSSLayoutFixed.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="wrap">
<table id="Table_01" width="1921" height="1025" border="0 " cellpadding="0" cellspacing="0" >
<tr>
<td colspan="17" >
<img src="Layout/Top.jpg" class="Top" alt=""></td>
<td>
<img src="Layout/spacer.gif" class="spacer1" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="4">
<img src="Layout/SwordPart1.jpg" class="SwordPart1" alt=""></td>
<td colspan="3" rowspan="2">
<a href="index.html">
<img src="Layout/Home.jpg" class="Home" alt="" OnMouseOver="this.src='Layout/RolHome.jpg'" onMouseOut="this.src='Layout/Home.jpg'">
</a>
</td>
<td colspan="11">
<img src="Layout/Border.jpg" class="Border1" alt=""></td>
<td>
<img src="Layout/spacer.gif" class="spacer2" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="Layout/SwordPart2.jpg" width="150" height="163" alt=""></td>
<td colspan="7" rowspan="7">
<img src="ImagesCentre/CentroIndex.jpg" width="1299" height="572" alt=""></td>
<td rowspan="11">
<img src="Layout/Right.jpg" width="193" height="677" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="53" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="Story.html">
<img src="Layout/Story.jpg" width="127" height="56" alt="" OnMouseOver="this.src='Layout/RolStory.jpg'" onMouseOut="this.src='Layout/Story.jpg'">
</a>
</td>
<td>
<img src="Layout/spacer.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td colspan="3">
<a href="About.html">
<img src="Layout/About.jpg" width="127" height="54" alt="" OnMouseOver="this.src='Layout/RolAbout.jpg'" onMouseOut="this.src='Layout/About.jpg'">
</a>
</td>
<td>
<img src="Layout/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="Layout/SwordPart3.jpg" width="136" height="115" alt=""></td>
<td colspan="5">
<a href="Preview.html">
<img src="Layout/Preview.jpg" width="163" height="59" alt="" OnMouseOver="this.src='Layout/RolPreview.jpg'" onMouseOut="this.src='Layout/Preview.jpg'">
</a>
</td>
<td colspan="2" rowspan="2">
<img src="Layout/SwordPart4.jpg" width="129" height="115" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="59" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="Layout/Part.jpg" width="21" height="56" alt=""></td>
<td>
<a href="Play.html">
<img src="Layout/Play.jpg" width="114" height="56" alt="" OnMouseOver="this.src='Layout/RolPlay.jpg'" onMouseOut="this.src='Layout/Play.jpg'">
</a>
</td>
<td colspan="2">
<img src="Layout/Part2.jpg" width="28" height="56" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="56" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="Layout/SwordPart5.jpg" width="120" height="399" alt=""></td>
<td colspan="7">
<a href="Changelog.html">
<img src="Layout/Changelog.jpg" width="195" height="49" alt="" OnMouseOver="this.src='Layout/RolChangelog.jpg'" onMouseOut="this.src='Layout/Changelog.jpg'">
</a>
</td>
<td rowspan="6">
<img src="Layout/SwordPart6.jpg" width="113" height="399" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="5">
<img src="Layout/SwordPart7.jpg" width="195" height="350" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="245" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="Layout/Border2.jpg" width="1299" height="38" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="Layout/Copyright1.jpg" width="530" height="67" alt=""></td>
<td rowspan="2">
<img src="Layout/Facebook.jpg" width="42" height="38" alt="" OnMouseOver="this.src='Layout/RolBFace.jpg'" onMouseOut="this.src='Layout/Facebook.jpg'">
</a>
</td>
<td rowspan="3">
<img src="Layout/Copyright2.jpg" width="26" height="67" alt=""></td>
<td>
<img src="Layout/Twitter.jpg" width="40" height="37" alt="" OnMouseOver="this.src='Layout/RolBTwitter.jpg'" onMouseOut="this.src='Layout/Twitter.jpg'">
</a>
</td>
<td rowspan="3">
<img src="Layout/Copyright3.jpg" width="25" height="67" alt=""></td>
<td rowspan="2">
<img src="Layout/Youtube.jpg" width="44" height="38" alt="" OnMouseOver="this.src='Layout/RolBYT.jpg'" onMouseOut="this.src='Layout/Youtube.jpg'">
</a>
</td>
<td rowspan="3">
<img src="Layout/Border3.jpg" width="592" height="67" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Layout/Copyright4.jpg" width="40" height="30" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="Layout/Copyright5.jpg" width="42" height="29" alt=""></td>
<td>
<img src="Layout/Copyright6.jpg" width="44" height="29" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td>
<img src="Layout/spacer.gif" width="120" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="15" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="6" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="114" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="113" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="530" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="592" height="1" alt=""></td>
<td>
<img src="Layout/spacer.gif" width="193" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
And the CSS code currently implemented:
.Top {
width: 1920px;
height: 344px;
position:relative;
margin: 0 auto;
}
.spacer1 {
width: 1px;
height: 344px;
position:relative;
margin: 0 auto;
}
.SwordPart1 {
width: 151px;
height: 166px;
position:relative;
margin: 0 auto;
}
.Home {
width: 127px;
height: 56px;
position:relative;
margin: 0 auto;
}
.Border1 {
width: 1642px;
height: 3px;
position:relative;
margin: 0 auto;
}
.spacer2 {
width: 1px;
height: 3px;
position:relative;
margin: 0 auto;
}
#wrap {
position: relative; width: 1921px; margin: 0 auto;
}
Help would be greatly appreciated, Thank you in advance :D
Edited by ExPloZee
Link to comment
Share on other sites

Table layouts are considered obsolete. You should learn to use divs and float.

 

Also your file should begin with a doctype statement.

 

Is this page online somewhere?

 

A simple fix for white lines might be...

body{background-color:#000;}

...but thin white lines are often due to inline-blocks and the line-height.

td {line-height: 5px;}
Link to comment
Share on other sites

You should really ditch the 'Save for web'feature that Photoshop has because it produces tables and images galore.But you can try a couple of things to get rid of white lines:Set tables and td to padding: 0; and margin: 0; as well as setting border-collapse: collapse.Next, set images to display: block;

 

CSS:

table, td { border-collapse: collapse; padding: 0; margin: 0;}

img {display: block;}

Link to comment
Share on other sites

Hey newseed,Unfortunately that didnt solve the problem, it definately put the lines thiner, Guess there's no hope for me :D

thanks Anyways.

 

I only want to solve this problem because this is the final project of my course, and to present it i need to zoom out and the lines will show, i dont know how to turn it into divs, as in my programming course we didnt do much html.

Edit:

 

I need to do this in html as the raspberry pi only takes html and php, and i only know html.

Edited by ExPloZee
Link to comment
Share on other sites

Sorry that it didn't work out for you. Sounds like the course you are taking is not up to speed about html and css. Did your course allow you to use the automated feature to save your photoshop design or where you suppose to build it from scratch. I am betting that the photoshop save results is spitting out code that has more inline styles than you care to count and may probably be the issue.

Link to comment
Share on other sites

In my course i mainly worked with apps so c# and c++ and for websites we used ASP.net.

 

I just wanted to try something new out so i chose photoshop because my mind wasnt refreshed of html.Is there really any hope for this to work out?

The photoshop saves only contain images,of every slice i did and some automated ones, but i guarantee those are only jpegs.The initial code before i added the rollover images was only the table and the images on it.Thanks in advance.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...