Solved

Resolutions

Posted on 1998-06-08
6
258 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

815 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now