Log in

View Full Version : help needed! slideshow stays absolute!!


pete7feet
07-28-2005, 07:19 AM
Hey hello,
I am a new user of these forums, and quite new to the world of webdesigning. I am making a website for a friend, and it's quite finished now, but....

I created a lot of layers in a dreamweaver document, and i forgot to make it relative or something like that. The site is aligning more to the right on smaller screens. after a lot of puzzeling i found a way to center the pages. but there is a slight problem my friend insists on using Frontpage for updating his gallery because he has to upload a lot of pics every week, He uses the slideshow of FP, now i have the problem that all is relative because off the 'wrapper' i created, but the slideshow is not.

Can anyone tell me how i can adjust this so that the slideshow will stay within the wrapper?????

could anyone who is willing to reply make the reply in simple words i am not that great a designer.

greatfully yours,

peter molenaar

ps. if code is needed please let me know,
jscheuer1
07-28-2005, 11:23 AM
Code is needed. A link to the pages would be better.
pete7feet
07-28-2005, 02:40 PM
hey hi,

i ll insert my code because the site has not be ready yet.

here it comes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jansen carrosseriebouw</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--



function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body background="achtergrond.gif" text="#000000" link="#FFFF99" vlink="#FFFFCC" alink="#009900">

<div id="Layer1" style="position:absolute; left: 50%; top: 0; margin-left:-389px; width:777px; height:802px; background-color: #F5F9AD;"><img src="bovenbalk.gif" width="779" height="51">
<div id="Layer2" style="position:absolute; left:14px; top:10px; width:669px; height:20px; z-index:2"><strong><font color="#F5F9AD" size="-1,7" face="Geneva, Arial, Helvetica, sans-serif"><a href="index.htm">Home</a>
:: <a href="projecten.htm">Projecten</a> :: <a href="Gallery.htm">Gallery</a>
:: <a href="Restauratie.htm">Restauratie</a> :: <a href="Carrosseriebouw.htm">Carrosseriebouw</a>
:: <a href="over%20ons.htm">Over ons</a> :: <a href="contact.htm">Contact</a>
:: <a href="Links.htm">Links</a></font></strong></div>
<div id="Layer11" style="position:absolute; left:177px; top:769px; width:616px; height:39px; z-index:11"><img src="copyright-jansen-onder-voor.gif" width="317" height="34"></div>
<div id="Layer12" style="position:absolute; left:489px; top:770px; width:322px; height:35px; z-index:12"><img src="yardstick%20onder.gif" width="292" height="32"></div>
<div id="Layer14" style="position:absolute; left:53px; top:72px; width:678px; height:657px; z-index:14">
<p align="center"><strong>
<font size="6" face="Geneva, Arial, Helvetica, sans-serif" color="#009900">MG-tc</font></strong></p>
<p align="center">&nbsp;</p>
<!--webbot bot="PhotoAlbum" U-Include="photogallery/photo00008147/real.htm" clientside TAG="BODY" startspan -->
<picture file-href="photogallery/photo00008147/real_p.htm" />
<picture file-href="photogallery/photo00008147/real_x.htm" />
<div align="center">
<center>
<layer visibility="hide">
<div style="display:none;" id="fpGalleryCaptions_5032">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
<div style="display:none;" id="fpGalleryDescriptions_5032">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</layer>
<script language="javascript" src="photogallery/photo00008147/sldshow.js">
<!---->
</script>
<table border="0" cellspacing="0" cellpadding="5" width="700" dir="ltr">
<tr>
<td nowrap="" align="center">
<layer visibility="hide">
<img border="0" align="middle" src="photogallery/photo00008147/prevdis.gif" lowsrc="photogallery/photo00008147/prev.gif" id="fpGalleryLeftBtn_5032" onclick="JavaScript:fp_ScrollLeft(5032)" />
</layer>
<script language="JavaScript1.1">
<!--
if (fp_ie4()) {
document.write("<span align='center' style='width:620;overflow:hidden' id='fpGalleryListCell_5032'>");
}
if (fp_ns6()) {
document.getElementById("fpGalleryLeftBtn_5032").style.visibility="hidden"
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5058'],'450','337','5032',0);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/001.jpg" id="fpphoto_5058" name="fpphoto_5058" lowsrc="MG-TCschade/001.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3544'],'450','337','5032',1);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/002.jpg" id="fpphoto_3544" name="fpphoto_3544" lowsrc="MG-TCschade/002.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5079'],'450','337','5032',2);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/003.jpg" id="fpphoto_5079" name="fpphoto_5079" lowsrc="MG-TCschade/003.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_9440'],'450','337','5032',3);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/013.jpg" id="fpphoto_9440" name="fpphoto_9440" lowsrc="MG-TCschade/013.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_2333'],'450','337','5032',4);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/024.jpg" id="fpphoto_2333" name="fpphoto_2333" lowsrc="MG-TCschade/024.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<script language="JavaScript1.1">
<!--
if (fp_ns6()) {
document.write("");
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_756'],'450','337','5032',5);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/028.jpg" id="fpphoto_756" name="fpphoto_756" lowsrc="MG-TCschade/028.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_31'],'450','337','5032',6);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/032.jpg" id="fpphoto_31" name="fpphoto_31" lowsrc="MG-TCschade/032.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5168'],'450','337','5032',7);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/036.jpg" id="fpphoto_5168" name="fpphoto_5168" lowsrc="MG-TCschade/036.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5048'],'450','337','5032',8);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/037.jpg" id="fpphoto_5048" name="fpphoto_5048" lowsrc="MG-TCschade/037.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3504'],'450','337','5032',9);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/041.jpg" id="fpphoto_3504" name="fpphoto_3504" lowsrc="MG-TCschade/041.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<script language="JavaScript1.1">
<!--
if (fp_ns6()) {
document.write("");
}
-->

I have to paste the code in two parts because i exceed the text maximum for one post...
pete7feet
07-28-2005, 02:42 PM
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5970'],'450','337','5032',10);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/045.jpg" id="fpphoto_5970" name="fpphoto_5970" lowsrc="MG-TCschade/045.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3025'],'450','337','5032',11);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/047.jpg" id="fpphoto_3025" name="fpphoto_3025" lowsrc="MG-TCschade/047.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_7614'],'450','337','5032',12);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/052.jpg" id="fpphoto_7614" name="fpphoto_7614" lowsrc="MG-TCschade/052.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3440'],'450','337','5032',13);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/053.jpg" id="fpphoto_3440" name="fpphoto_3440" lowsrc="MG-TCschade/053.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_484'],'450','337','5032',14);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/054.jpg" id="fpphoto_484" name="fpphoto_484" lowsrc="MG-TCschade/054.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<script language="JavaScript1.1">
<!--
if (fp_ns6()) {
document.write("");
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_2685'],'450','337','5032',15);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/057.jpg" id="fpphoto_2685" name="fpphoto_2685" lowsrc="MG-TCschade/057.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_927'],'450','337','5032',16);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/061.jpg" id="fpphoto_927" name="fpphoto_927" lowsrc="MG-TCschade/061.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_2832'],'450','337','5032',17);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/064.jpg" id="fpphoto_2832" name="fpphoto_2832" lowsrc="MG-TCschade/064.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_1080'],'450','337','5032',18);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/069.JPG" id="fpphoto_1080" name="fpphoto_1080" lowsrc="MG-TCschade/069.JPG" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_760'],'450','337','5032',19);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/070.JPG" id="fpphoto_760" name="fpphoto_760" lowsrc="MG-TCschade/070.JPG" width="100" height="74" title="" align="absmiddle" /></a>
<script language="JavaScript1.1">
<!--
if (fp_ns6()) {
document.write("");
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_7752'],'450','337','5032',20);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/074.jpg" id="fpphoto_7752" name="fpphoto_7752" lowsrc="MG-TCschade/074.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_1080'],'450','337','5032',21);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/076.jpg" id="fpphoto_1080" name="fpphoto_1080" lowsrc="MG-TCschade/076.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_3793'],'450','337','5032',22);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/077.jpg" id="fpphoto_3793" name="fpphoto_3793" lowsrc="MG-TCschade/077.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_5996'],'450','337','5032',23);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/085.jpg" id="fpphoto_5996" name="fpphoto_5996" lowsrc="MG-TCschade/085.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_1319'],'450','337','5032',24);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/087.jpg" id="fpphoto_1319" name="fpphoto_1319" lowsrc="MG-TCschade/087.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<script language="JavaScript1.1">
<!--
if (fp_ns6()) {
document.write("");
}
-->
</script>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_4965'],'450','337','5032',25);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/088.jpg" id="fpphoto_4965" name="fpphoto_4965" lowsrc="MG-TCschade/088.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_2732'],'450','337','5032',26);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/096.jpg" id="fpphoto_2732" name="fpphoto_2732" lowsrc="MG-TCschade/096.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<a target="_self" href="Javascript:fp_ShowImg(document['fpphoto_6083'],'450','337','5032',27);"><img hspace="10" vspace="5" border="0" src="photogallery/photo00008147/097.jpg" id="fpphoto_6083" name="fpphoto_6083" lowsrc="MG-TCschade/097.jpg" width="100" height="74" title="" align="absmiddle" /></a>
<span style="width:0;height:74;visibility:hidden">.</span>
<script language="JavaScript1.1">
<!--
if (fp_ie4()) {
document.write("</span>");
}
-->
</script>
<layer visibility="hide">
<img border="0" align="middle" src="photogallery/photo00008147/next.gif" lowsrc="photogallery/photo00008147/nextdis.gif" id="fpGalleryRightBtn_5032" onclick="JavaScript:fp_ScrollRight(5032)" />
<script language="JavaScript1.1">
rightdisabled = false
widthLength = 620
if (fp_ns6()) {
document.getElementById("fpGalleryRightBtn_5032").style.visibility="hidden"
}

</script>
</layer>
<hr style="height:1" />
</td>
</tr>
</table>
<img id="fpGalleryMainImg_5032" name="fpGalleryMainImg_5032" width="450" height="337" src="MG-TCschade/001.jpg" title="" />
<layer visibility="hide">
<div id="fpGalleryCaptionCell_5032">
</div>
<div id="fpGalleryDescCell_5032">
</div>
</layer>
</center>
</div>
<!--webbot bot="PhotoAlbum" i-checksum="34587" endspan --><p align="center">&nbsp;</div>
</div>
</body>
</html>

this is part 2

look for http://www.carrosseriebouwjansen.nl/MG-tc.htm

notice that this site is not relative, i can manage that now, but i cant get the slideshow to stay within the wrapper.

greetings peter
jscheuer1
07-31-2005, 06:43 AM
Looks like you solved your problem but only for a 1280px wide window. Also, be aware that the script does not work in FF or NS. If you add this script in the head of your document, it will keep things centered in any size window that is as wide or wider than your central content block, aligning left in narrower windows. I've already configured the script to your page currently at the link listed in your previous post:


<script type="text/javascript">

/*Absolute Elements Left Adjust to Window Width
with exclude Id's Array option - DOM version
© John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */

/*Set to orignal offset of left "margin", the
distance from left that your content appears
fullscreen in your preferred resolution. */
var origOffset=239

/*IMPORTANT NOTE! - The first display element
on your page with the above value set for its
left position must have an id. */

/*Set to preferred resolution, the resolution
at which the layout looks centered or 'good'
to you when viewed full screen. */
var prefRes=1280

var excludeIds=new Array() // <<< Do not edit or remove this line!

/*Set Id's to be excluded below, use as many as you need.
Things like special or temporary elements used by
other scripts are good candidates. This script will
assign the id 'missing#' to absolutely positioned
elements with no id, where '#' is the element's position
in the DOM. If you want any of these elements excluded,
give them a unique id and add it to the list below. */

excludeIds[0]='temp'
excludeIds[1]='motiongallery'
excludeIds[2]='u1'

/*This script automatically appends itself to any existing
onload and onresize events. However, if you have onload
or onresize events from other scripts that are dependent upon
the layout and dimensions of the page, they need to run after
this script. If so, put their events in the function below. */

function addLoads(){ // <<< Do not edit or remove this line!
if (typeof(restarea)!=='undefined') // test variable 'restarea' from script 'cmotion'
fillup(); // onload function from 'cmotion'
return;
} // <<< Do not edit or remove this line!

/////////////////////No Need to Edit Below/////////////////////
var runCount=1, layOrigNew=new Array();
function iecompattest(){ // Credit: Dynamic Drive
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function exIds(el){
var idTest=1
for (j = 0; j < excludeIds.length; j++)
if (excludeIds[j]==el.getAttribute('id'))
idTest=0
return idTest
}

function assignId(el){
var idTest=1
if (el.getAttribute('id')==null||el.getAttribute('id')==''){
idTest=0
el.setAttribute('id', 'missing'+i, 0)
}
return idTest
}

function leftAdjLayers(){
var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mac')!==-1&&agt.indexOf("msie")!==-1){
addLoads();
return;
}
var ray, wWidth, leftAdj=0, layersReAdj=0;
wWidth=window.innerWidth? window.innerWidth : iecompattest().offsetWidth
leftAdj=Math.floor((wWidth-prefRes)/2)
if (runCount){
layers=document.getElementsByTagName('*')
ray=layers
}
else
ray=layOrigNew
for (i = 0; i < ray.length; i++){
if (runCount)
layOrigNew[i]=[' ', ' ', ' ']
if (exIds(layers[i])){
if (runCount)
layOrigNew[i][0]=origOffset<=layers[i].offsetLeft? layers[i].offsetLeft : ' '
layOrigNew[i][1]=layOrigNew[i][0]+leftAdj
if (runCount&&layOrigNew[i][0]!==' ')
layOrigNew[i][2]=assignId(layers[i])? layers[i].getAttribute('id', 0) : 'missing'+i
}
}
while (layOrigNew[0][2]==' '||layOrigNew[0][2].indexOf('missing')!==-1)
layOrigNew.splice(0, 1)
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][1]<=origOffset&&layOrigNew[i][1]!==' ')
layersReAdj=Math.min(layOrigNew[i][1],layersReAdj)+origOffset
if (layersReAdj<0)
for (i = 0; i < layOrigNew.length; i++)
layOrigNew[i][1]=(layOrigNew[i][1]!==' ')? layOrigNew[i][1]-layersReAdj : ' '
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][0]!==' '){
document.getElementById(layOrigNew[i][2]).style.left=layOrigNew[i][1]+'px'
}
runCount=0
addLoads();
}

if ( typeof window.addEventListener != "undefined" ){
window.addEventListener( "load", leftAdjLayers, false );
window.addEventListener( "resize", leftAdjLayers, false );
}
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", leftAdjLayers );
window.attachEvent( "onresize", leftAdjLayers );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
leftAdjLayers();
};
}
else
window.onload = leftAdjLayers;

if ( window.onresize != null ) {
var oldOnresize = window.onresize;
window.onresize = function ( e ) {
oldOnresize( e );
leftAdjLayers();
};
}
else
window.onresize = leftAdjLayers;

}
</script>
pete7feet
08-11-2005, 05:32 PM
hey John,

thanx for your reply, it works almost excelent. by the way sorry for this late reaction but i was on a holiday, so i was'nt around for a while.

the reason why it works 'almost' perfectly is that during the page load the page centres right and after finishing loading it will jump back into the centre. can I do anything about that?

i would love to hear if that is possible.

adjusted and all you can view the site on www.carrosseriebouwjansen.nl.

so if you are willing to help me you can see what the problem is.

greetings peter
jscheuer1
08-11-2005, 06:44 PM
Looks fine to me.
pete7feet
08-11-2005, 07:13 PM
hey john,

it might be something related to the the speed of the internet connection, i have just a 1200 kb dsl line, on the bigger pages like: http://www.carrosseriebouwjansen.nl/Gallery.htm it is positioned right till the page is loaded. on 56kb/s connections it is really disturbing.

do you have any idea what i can doo about it?

greetings peter
jscheuer1
08-11-2005, 08:40 PM
Well, let's define 'right'. The script I supplied you with does the following:

1 ) Determines the horizontal position of your content relative to a particular window width, in this case 1280px. I chose that one because your content was centered at that width (centered is generally considered a good thing).

2 ) Determines the actual width of the window, and once the page is loaded, centers it at that window width, if possible, if not, it puts it on the left side of the window.

3 ) If the window size changes while the page is being viewed, the script detects that and centers the content again, if possible.

If you do not want your content centered, do not use this script, and if not, how do you want the content aligned? The lag time on a slow connection is unavoidable because the script must have all of the elements on your page rendered to know where they are and where to put them. I tested out your pages at various window widths and the script is doing what it is designed to do and to my eye, the pages look good. As I say, if you want something else, don't use the script. Also, if you want your content all on the left, that should be easy enough, just eliminate everything that pushes it toward the center to begin with.
pete7feet
08-11-2005, 10:33 PM
hey john,

i wanted exactly what your script does, i just thought that there was a way to make the page centered the wrapper first and than render the rest of the content within the wrapper. but it is indeed depending on the connection speed and the souplicity of the pc. if the pc is running slow it shows on the page. never the less, it is allright for my purposes. but i hoped that i could make him center first , before rendering etc.

my regards,


peter
jscheuer1
08-12-2005, 01:11 AM
We probably could make the entire page invisible until the script is finished working its magic but, that would result in a long wait time on a slow connection before anything was visible, probably worse than the jump at the end of loading. The real solution to your dilemma is to redesign the page so that it does not depend upon absolute positioning so much. Generally, if you have a lot of absolutely positioned elements on your page, you can create a wrapper like so:

<body>
<center>
<div style="position:relative;width:width_of_content;height:height_of_content;">
<div>

content goes here

</div>
</div>
</center>
</body>Where the information in red are the actual pixel values with units specified like:

width:700px;

for example. This usually takes any absolutely positioned content and makes it absolute in relation to the wrapper but, relative to the page overall. Problems can arise though, if your content contains a script that already uses this trick or one like it. Often, this can be resolved if an absolutely positioned element within the script is made relatively positioned (by editing the script), this is especially likely to work if, in its display state, the absolutely positioned script element has no left or top coordinates but, sometimes will work even if it does.

Still, the best approach is to avoid all this nonsense from the beginning by avoiding absolute positioning and fixed dimensions in your design, using instead percentage dimensions (except for images), page flow and relative positioning.