Zoom problem on HTML site created in Photoshop.

ExPloZee · June 29, 2014

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>

</head>

<tr>

<td>

</tr>

<tr>

</a>

</td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

</a>

</td>

<td>

</tr>

<tr>

</a>

</td>

<td>

</tr>

<tr>

</a>

</td>

<td>

</tr>

<tr>

<td>

</a>

</td>

<td>

</tr>

<tr>

</a>

</td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

</a>

</td>

<td>

</a>

</td>

</a>

</td>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

<td>

<td>

</tr>

<tr>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<td>

<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

Edited June 29, 2014 by ExPloZee

davej · June 29, 2014

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;}

ExPloZee · June 30, 2014

Hi davej thanks for your help, this website was actually auto generated by the "Save for web" feature in Photoshop CS6,Is it possible to stretch the images so they fit the cell they are put into?

newseed · June 30, 2014

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;}

ExPloZee · June 30, 2014

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

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 June 30, 2014 by ExPloZee

newseed · June 30, 2014

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.

ExPloZee · June 30, 2014

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.

davej · June 30, 2014

Realize that we can't see this webpage. We don't have the image files.

ExPloZee · June 30, 2014

Thank you for all the help people, i realised there was some options on photoshop to save the site in divs and css,Really saved my life! Thank you guys!

Sign In

Zoom problem on HTML site created in Photoshop.

Recommended Posts

ExPloZee

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

ExPloZee

Link to comment

Share on other sites

newseed

Link to comment

Share on other sites

ExPloZee

Link to comment

Share on other sites

newseed

Link to comment

Share on other sites

ExPloZee

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

ExPloZee

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity