4 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

I am not sure this is the right place to ask this question but basically i have been assigned the task of creating design links for JPG's that were created in PSD,

HERE is on example of a design link.

The HTML structure used is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ASJ Trading</title>
<style type="text/css">
<!--
body {
	background-image: url(image-goes-here);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px; background-repeat:no-repeat; background-position:top center;
}
-->
</style></head><body>
<table border="0" cellpadding="0" cellspacing="0" style="width:960px;"><tr><td style="height:4480px;"></td></tr></table>
</body></html>

Now basically a design link just helps a developer build a webiste and see hes on track with the design:

I need to create a design link for THIS image , look like a relatively very simple task , but i have't been able to do it. i guess i need to play with the height and width attibute in the table and td. can somebody tell me how i can create a design link ?

Thank you.
Gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Seriously? 4000×2425px?

Resize the image to a sane value. say, 980px width and try again.

Why use a background image and table?

Were it me (not that I would be working from a silly PSD), I'd make a TOC page that links each image in the project.

For example:

<body>
  <ul>
    <li>
      <a href="">Ser# - project name - page - ver.jpg</a>
    </li>
 
    …
  </ul>
</body>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks Gary

Thanks gary , unfortunately i don't have that luxury of doing it the way u suggest , never mind Laughing out loud

also sorry for the late reply .

Thank you and have a nice weekend. Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 years 13 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Too bad

Using the image in the background of a table makes no sense at all --- unless you can clarify.

I see no obvious reason for your failure. Have you made sure the path is correct? From css location to image location? Are there any typos that cause failure?

Here is my take on both your requirement (using your code) and my suggestion. I use the same image both times in the same directory as the html. The image is simply copied from imgur. I didn't upload a copy because it is ridiculously large and anyone wanting to replicate the problem and solution can get it at imgur anyway.

<!DOCTYPE HTML>
<html>
  <head>
    <meta content="text/html; charset=utf-8"
            http-equiv="Content-Type">
 
    <meta content=
    "width=device-width; height=device-height; initial-scale=1"
          name="viewport">
 
    <title>
      Test document
    </title>
 
    <style media="screen"
           type="text/css">
    /*<![CDATA[*/
 
    html,
    body {
	background-color: white;
	background-image: url(gautamz07.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0;
	padding: 0;}
 
    p {
	font-size: 1em;}
 
    p img {
	width: 100%;}
 
    /*]]-->*/
    </style>
  </head>
 
  <body>
    <table border="0"
           cellpadding="0"
           cellspacing="0"
           style="width:960px;">
      <tr>
        <td style="height:4480px;">
        </td>
      </tr>
    </table>
 
    <hr>
 
    <p>The better way, I think:<img src="gautamz07.jpg"></p>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 6 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

Thanks for your help gary ! Smile