Solved

Resolutions

Posted on 1998-06-08
6
253 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
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…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

762 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

22 Experts available now in Live!

Get 1:1 Help Now