Solved

Resolutions

Posted on 1998-06-08
6
261 Views
Last Modified: 2010-04-09
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
Comment
Question by:zink
  • 3
  • 3
6 Comments
 
LVL 3

Accepted Solution

by:
bigelos earned 200 total points
ID: 1844158
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
 

Author Comment

by:zink
ID: 1844159
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
 
LVL 3

Expert Comment

by:bigelos
ID: 1844160
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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:zink
ID: 1844161
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
 
LVL 3

Expert Comment

by:bigelos
ID: 1844163
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
 

Author Comment

by:zink
ID: 1844164
Thanks a lot for all the work that you have put into this! A well deserved "A".
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Downside of adding characters set in ASP pages 6 29
Else condition 9 23
Can't get second accordion on page to work 2 13
SSRS 2016 Rendering HTML tables 3 26
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question