PDA

Click to See Complete Forum and Search --> : [RESOLVED] screen resolution

patuie
03-16-2010, 10:15 AM
13550

Don't know if I did attachment right. Anyway my images are overlapping in different screen resolutions. 1280 X1024 are fine but overlap in 1024 X728.
Is there a code or script for this.

Thanks
MrEnder
03-16-2010, 11:43 PM
This checks the size of the frame


var frameWidth = 0;
var frameHeight = 0;

if (self.innerWidth) {
frameWidth = self.innerWidth;
frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
frameWidth = document.documentElement.clientWidth;
frameHeight = document.documentElement.clientHeight;
}
else if (document.body) {
frameWidth = document.body.clientWidth;
frameHeight = document.body.clientHeight;
}


This IDs a tag so that you can call it in JS

<sometag id="someID">something</sometag>


This calls the ID in JS and stores it

var element = document.getElementById("someID");


this changes the width of an object based on the size of the frame

element.style.width = (frameWidth - 100) + "px";


other examples


element.style.height = (frameHeight - 100) + "px";
element.style.left = (frameWidth - 100) + "px";
element.style.top = (frameHeight - 100) + "px";


Another option that is not as good is use CSS
and in your CSS every time you put a width, length or something like size in it.
You put it as a percentage. So 75% instead of 1365.33px because the % semi works on all resolutions
Fang
03-17-2010, 01:27 AM
More likely a problem with absolutely positioned elements. Give a link or show the full code if further help is required.
patuie
03-17-2010, 04:49 PM
Here is my css & html. I am not even going to publish this I want to make cd's and give them to my family. Not everyone uses the same resolution. I just want to make it look the same on everyone"s pc.

Thanks

html, body {
width: 100%;
height: 120%;
margin: 0;
padding: 0;
}

#container {
width:75%;
height: 90%;
max-width: 1000px;
min-width: 300px;
margin: 20px 0px 0px 150px;
padding: 10px 20px 0px 10px;
background-color: #ccffff;
border: thick solid #006666;

}

h1 {
text-align: center;
font-family: arial;
font-size: 40px;
}


#content {
width: 75%;
height:80%;
float: right; /* switch this to left and below to right to change the column locations */
border: thick solid #663300; /* remove this line to remove the border */
background-image: url(images/img7.gif);
padding: 0;
font-size: 16px;
font-family: arial;
overflow:hidden;

}


/* menu */
/* common styling */
.menu {font-family: arial; font-size: 14px; width:200px; position:relative; margin: 5px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:190px;
text-align:left; border:1px solid #000; border-width:1px 1px 1px 1px; background:#CCCC99; line-height:30px;
font-size:14px; font-weight: bold; padding:0;}
.menu ul {padding:0; margin:0;list-style-type: none;}
.menu ul li {float:left; margin-right:80px; position:relative;}
.menu ul li ul {display: none;}


/* specific to non IE browsers */
.menu ul li:hover a {color:#990033; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:170px; width:150px; z-index:2;}
.menu ul li:hover ul li a.hide {background:#FFF68F ; color:#000;}
.menu ul li:hover ul li a {display:block; background:#FFF68F ; color:#000; width: 180px; padding: 2px;}
.menu ul li:hover ul li a:hover {background:#CCCCFF; color:#000;}

table {

border:10px;
margin:0;
padding:0;}



.picture .large {
display:none;
}

.picture:hover .large {
display:block;
position:absolute;
top: 100px;
left: 350px;
border:none;
z-index: 1;
}
patuie
03-17-2010, 04:51 PM
The post was too long for one reply I am completely frustrated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DVID=00001DE9-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" media="all" type="text/css" href="css_sample.css" />

<title>William Miller</title>
</head>

<body>
<div id="container">
<h1>WILLIAM MILLER</h1>

<div id="content">
<p align="center"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<b>William Miller</b> was born in 1852in England<br />
William married <b>Mary Palmer</b> September 1885<br />
William and Marys' children were William Palmer, <i><b>James</b></i> John &amp;
Frank<br />
Mary Palmer may have been married before William.<br />
That is why one son's last name is Palmer,<br />
who was a station master at one of the railways in England.<br />
He lived in the house beside the station. John lived in Nottingham, &amp; Frank
went to Malden, Canada.<br />
Melton Mowbray spans the boundries of the couties of Leicestershire &amp;
Nottingham.<br /></p><br />
<br />

<p align="center">William Miller died<br />
June 1926<br />
Mary (Palmer) Miller<br />
died April 1904</p>

<div class="picture">
<a class="p1" href="."><img src="images/william_miller_sm.jpg" style=
"position:absolute; top:155px; left:650px" width="200" height="240" border="0"
alt="william Miller" /> <img src="images/william_miller.jpg" width="400" height=
"568" class="large" alt="william Miller" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/framed_map_sm.jpg" style=
"position:absolute; top:225px; right:150px;width=" height="172" border="0" alt=
"map" /> <img src="images/framed_map.jpg" width="600" height="519" class="large"
alt="map" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/leicestershire_sm.jpg" width="200"
height="141" border="0" style="position:absolute; top:225px; left:420px;" alt=
"leicestershire" /> <img src="images/leicestershire.jpg" width="600" height="427"
class="large" alt="leicestershire" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/headstone_sm.jpg" width="250" height=
"187" border="0" style="position:absolute;top:575px;left:450px;" alt=
"headstone" /> <img src="images/headstone_lg.jpg" width="500" height="343" class=
"large" alt="headstone" /></a>
</div>

<div class="picture">
<a class="p1" href="."><img src="images/headstone_back_sm.jpg" width="250"
height="177" border="0" style="position:absolute; top:575px;right:150px" alt=
"headstone back" /> <img src="images/headstone_back.jpg" width="600" height="430"
class="large" alt="headstone back" /></a>
</div>
</div>

<div class="menu">
<ul>
<li>
<a class="hide" href="welcome_page.html">Welcome Page</a>

<ul>
<li><a href="miller_family_tree_1826.html">Miller Family Tree
1826-1941</a></li>

<li><a href="patterson_family_tree_1820.html">Patterson Family Tree
1820-1941</a></ul>
</li>

<li>
<a class="hide" href="miller_family_tree_1826.html">Miller Family Tree</a>


<ul>
<li><a href="william_miller_1826.html">William Miller 1826</a></li>

<li><a href="james_miller.html">James Miller 1888</a></li>

<li><a href="lillian_cave_miller.html">Lillian Cave Ingram 1885</a></li>

<li><a href="lillian_ingram.html">Lillian Ingram 1905</a></li>

<li><a href="david_miller.html"><i><u>DAVID MILLER 1910</u></i></a></li>

<li><a href="charlotte_miller.html">Charlotte Miller 1912</a></li>

<li><a href="james_miller_jr.html">James Miller Jr(James Miller)
1916</a></li>

<li><a href="frank_miller.html">Frank Miller 1914</a></li>

<li><a href="bernard_miller.html">Bernard Miller 1920</a></li>

<li><a href="margaret_miller.html">Margaret MIller 1922</a></li>

<li><a href="new_beginnings.html">New Beginnings 1926</a></li>
</ul>
</li>

<li>
<a class="hide" href="patterson_family_tree_1820.html">Patterson's Family
Tree</a>

<ul>
<li><a href="john_patterson_1820.html">John Patterson 1820</a></li>

<li><a href="john_patterson_1859.html">John Patterson 1859</a></li>

<li><a href="william_patterson.html">William Patterson 1881</a></li>

<li><a href="victoria_simmons_family.html">Victoria Simmons 1885</a></li>

<li><a href="mabel_patterson_1918.html"><u><i>MABEL PATTERSON
1918</i></u></a></li>

<li><a href="charles_patterson.html">Charles Patterson 1922</a></li>

<li><a href="mabel_patterson_1920.html">Mabel Patterson 1920</a></li>

<li><a href="mabel_patterson_1923.html">Mabel Patterson 1923</a></li>

<li><a href="mabel_patterson_1930.html">Mabel Patterson 1930</a></li>

<li><a href="victoria's_passing.html">Victoria Goes Home 1933</a></li>

<li><a href="mabel_patterson_1934.html">Mabel Patterson 1934</a></li>

<li><a href="mabel_patterson_1935.html">Mabel Patterson 1935</a></li>

<li><a href="mabel_patterson_1937.html">Mabel Patterson 1937</a></li>

<li><a href="mabel_patterson_1939.html">Mabel Patterson 1939</a></li>

<li><a href="mabel_patterson_1940.html">Mabel Patterson 1940</a></li>
</ul>
</li>

<li>
<a class="hide" href="1941-1949.html">1941 - 1949</a>

<ul>
<li><a href="MILLER_FAMILY_TREE.html">Miller Family Tree
1910-1999</a></li>

<li><a href="THE_BEGINNING.html">The Beginning (Oct 18, 1941)</a></li>

<li><a href="1942.html">1942</a></li>

<li><a href="1943.html">1943</a></li>

<li><a href="1944.html">1944</a></li>

<li><a href="DOUGLAS_PAUL_MILLER.html">Douglas Paul Miller 1944</a></li>

<li><a href="1945.html">1945</a></li>

<li><a href="NANCY_MILLER.html">Nancy Carol Miller 1946</a></li>

<li><a href="1946.html">1946</a></li>

<li><a href="1947.html">1947</a></li>

<li><a href="1948.html">1948</a></li>

<li><a href="1949.html">1949</a></li>
</ul>
</li>

<li>
<a class="hide" href="1950-1959.html">1950 - 1959</a>

<ul>
<li><a href="1950.html">1950</a></li>

<li><a href="1951.html">1951</a></li>

<li><a href="1952.html">1952</a></li>

<li><a href="PATRICIA%20MILLER.html"><i><u>PATRICIA ANNE MILLER
1953</u></i></a></li>

<li><a href="1953.html">1953</a></li>

<li><a href="1954.html">1954</a></li>

<li><a href="DAVID%20MILLER.html">David Kevin Miller 1955</a></li>

<li><a href="1955.html">1955</a></li>

<li><a href="1956.html">1956</a></li>

<li><a href="1957.html">1957</a></li>

<li><a href="1958.html">1958</a></li>

<li><a href="1959.html">1959</a></li>
</ul>
</li>

<li>
<a class="hide" href="1960-1969.html">1960 - 1969</a>

<ul>
<li><a href="1960.html">1960</a></li>

<li><a href="1961.html">1961</a></li>

<li><a href="1962.html">1962</a></li>

<li><a href="1964_spring.html">1964 (spring)</a></li>

<li><a href="1965.html">1965</a></li>

<li><a href="1966.html">1966</a></li>

<li><a href="1967.html">1967</a></li>

<li><a href="1968.html">1968</a></li>

<li><a href="1969.html">1969</a></li>
</ul>
</li>

<li>
<a class="hide" href="1970-1972.html">1970 - 1972</a>

<ul>
<li><a href="1970.html">1970</a></li>

<li><a href="1971.html">1971</a></li>

<li><a href="1972.html">1972</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Fang
03-18-2010, 01:43 AM
It is the position absolute causing the problem. There is no easy fix for your layout. Re-design the layout with elements in the flow of the document, without using positioning.
MrEnder
03-18-2010, 03:17 AM
sigh or u could just impliment my script so easily and solve it right away
WebJoel
03-18-2010, 06:45 AM
Its the 'position:absolute" that is causing the problems. The only way that you can use "position:absolute" on elements and have them not overlap on different resolution screens is to nest the "position:absolute" elements inside of a fixed-width "position:relative" parent element. The javascript is not doing to cure the problem with the CSS, but this is totally fixable.

A 'quick fix' is to state a default width (in pixels, not percent which is re-sizing) for the BODY and give it a "position:relative" . The page could then be centered to the viewport, giving all resolutions the same view of BODY.

This way, the "body" will appear the same width in ALL resolutions, and the "position:absolute" will be based upon a fixed-width element "body." Remember, the 'default' property of an element is "static" ( body {position:static;} ) so changing it to include non-resizing width and "position:relative" might short-term solve a number of ills.
patuie
03-18-2010, 07:16 AM
Thanks I will try your suggestions & let you know. A lot of work & aggravation for a few cd's.
patuie
03-18-2010, 08:00 AM
I tried WebJoel's suggestion, it worked great. Thank you so much.