Making web pages independent of the screen resolution??

j.gohel · 04-19-2006, 12:52 AM

Hi,

In my web application i have arranged some elements (like image) using CSS position property: absolute value.

But when i am accessing the application from the web where the resolution of the screen is not same as of my screen there the components get displayed at different positions.

I have the following code in which my textbox & image is to be set side by side & it should remain in that position only if the resolution of the screen gets changed???

HTML Code:

<HTML>
<HEAD>
<TITLE>Float example</TITLE>
<STYLE type="text/css">    
      IMG { float: right } 
</STYLE> 
 </HEAD>

 <BODY>	
  <table>	
 	<tr>			
                    <td>Name:</td>			 
                    <td><input type=  "text" >
  	 <IMG src="hsbc_logo.gif" alt="This image will illustrate floats">	  </td>
	</tr>
  </table>
</BODY>
</HTML>

Thanks,
Jignesh

teknomage1 · 04-19-2006, 03:19 AM

I think you uploaded the wrong code. In general, absolute postioning treats the browser window as a pixel addressable canvas and let's you stick things to it. Usually with webpages relative postioning is more helpful, since you can maintain the hierarchy and such. Absolute positioning suffers from the same problems as using pixel values for font sizes. Namely, fonts can become illegible on monitors with denser resolutions.

Also as cool as CSS is, sometimes it's just better to use a table to position local elements, and use CSS to tie together the site as a whole.

j.gohel · 04-20-2006, 09:04 PM

Hi,
Thanks for the reply.
But i didn't get you clearly what you mean to say.
If not absolute postioning then what should i use??

Jignesh

sde · 04-21-2006, 07:54 AM

your code does not use absolute positioning anywhere. what you should use depends on the layout you are trying to design.

maybe it would be more effective if you posted a screen shot of what you are trying to accomplish.

without an idea of the page layout, no one is going to be able to give you advice for your problem.

DJMaze · 04-21-2006, 08:24 AM

You must use 'em' and percentual placements.

use em for correct sizing based on the user prefered text size.

Code:

td {
    height: 1em;
}

precentual placement

Code:

div {
  left: 40%;
  width: 20%;
}

or

Code:

div {
  float: left;
  margin-left: 20%;
}

example: http://dragonflycms.com/