Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 267
  • Last Modified:

Resolutions

Hi,

I am creating a page with a green left side border, but do not know how to solve the problem of different resolutions.
The size of only my border is: width 130 pixels and height 10 pixels. The entire background image (including the white
part) is 1280 pixels wide.

When I use a table and make the left hand cell 25% of the 100% table (see below), my text starts just next to the green border, when I view it with a resolution of 640 by 480.
However, when viewing a resolution of 800 by 600 my text moves to the right. And with 1024 by 768 it is almost in the
center of the screen.

Is there some way to make a page look good in all three the resolutions? Or in other words: what should be the width of my green border?


<HTML>
<HEAD><TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH=25%> (my green border)
</TD><TD VALIGN=TOP>
MY TEXT
</TD><TR>
</TABLE>
</BODY>
</HTML>

Thanks!
0
zink
Asked:
zink
  • 3
  • 3
1 Solution
 
bigelosCommented:
Change
<TD ALIGN=LEFT VALIGN=TOP WIDTH=25%> (my green border)
to
<TD ALIGN=LEFT VALIGN=TOP WIDTH=130> (my green border)

(Specify in pixels instead of in percent).
0
 
zinkAuthor Commented:
I have done what you suggested and changed the width of my border into 130. But now the text starts in the center of my border with all three the resolutions.
I measured my border again in Photshop (by cutting and pasting only the border) and it is really 130 pixels wide.

The strange thing is that when I choose: table width=700 and td=20% (see below) the text is always in the right place. But of course with a resolution of 640 by 800 the text runs of the screen to the right.


<HTML>
<HEAD><TITLE></TITLE>
</HEAD>
<BODY>
<TABLE BORDER=0 WIDTH=700>
<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH=20%> (my green border)
</TD><TD VALIGN=TOP WIDTH=80%>
MY TEXT
</TD><TR>
</TABLE>
</BODY>
</HTML>

I still hope you can help me,
Thanks again
0
 
bigelosCommented:
I am writing this from home, where I don't have the luxury of 1024 by 768, so I am doing some guesswork here.

You say that a width of 700 for the table, with the first data being 20% works?  Try using a width of 100% for the table and the first td being 140 (from 130).  700 x 20% = 140.

If that doesn't work, play with it (increase it to 150, 160, etc) until it comes out right.  It is really hard to duplicate what you are doing when I don't have the image you are using.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
zinkAuthor Commented:
Sorry to be difficult, but I have put my two pages on-line. I just can't get it the way I want. Of course I will increase the points to 200 if you would be so kind to look at my pages.

The URL is: http://www.crosshairs.com/users/zink/1.html 
0
 
bigelosCommented:
Zink,

This code below works.  I optimized it for 640x480 resolution.
The problem?  I totally forgot that if you specify one thing in percent, you need to specify the rest in percent, and if you specify one thing in pixels, you need to specify the rest in pixels.


<html>

<head>
<title></title>
</head>

<body background="background.gif">

<table border="0" width="600">
  <tr>
    <td width="130"><!my green border--></td>
    <td width="470"><h1><a href="2.html">Page 2</a></h1>
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
    bla bla bla bla bla bla bla bla bla bla bla bal bla bla bla bla bla bla bla
</table>
</body>
</html>

0
 
zinkAuthor Commented:
Thanks a lot for all the work that you have put into this! A well deserved "A".
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now