nicht angemeldet
layer Zentrierung - Scrollen bei kleineren Browserfenstern
Hallo,
ich habe folgendes Problem:
Ich habe einen DIV-Layer, der die Größe 980x618 Pixel hat und über
top:50%;
left:50%;
margin-top:-309px;
margin-left:490px;
Auf dem Bildschirm stets horizontal und vertikal zentriert ist.
Wenn das Browserfenster nun aber kleiner ist, als die Layergröße, dann kann ich nur zum unteren und rechtem Rand über Scrollbalken scrollen - nicht aber nach oben oder links.
Ausserdem ist der Layer natürlich so positioniert, dass er ausserhalb des Browserfensters beginnt...
Gibt es da eine vernünftige Lösung?
Gruß
Olaf
-
hi,
Gibt es da eine vernünftige Lösung?
ja, verzichte auf absolute positionierung, und zentriere horizontal über die bekannte methode margin:auto.
vertikale zentrierung ist sowieso eher unsinnig.
gruss,
wahsaga-
hi,
Gibt es da eine vernünftige Lösung?
ja, verzichte auf absolute positionierung, und zentriere horizontal über die bekannte methode margin:auto.
vertikale zentrierung ist sowieso eher unsinnig.
Hi,
danke für den Tipp. Allerdings tritt das beschriebene Problem auch bei margin:auto auf. Wenn die Seite in einem kleineren Browserfenster aufgerufen wird, wird links und rechts etwas abgeschnitten (klar), allerdings kann man nur nach rechts scrollen, nicht aber nach links...
Gruß
Olaf-
hi,
danke für den Tipp. Allerdings tritt das beschriebene Problem auch bei margin:auto auf.
nein, glaube ich nicht.
Wenn die Seite in einem kleineren Browserfenster aufgerufen wird, wird links und rechts etwas abgeschnitten (klar), allerdings kann man nur nach rechts scrollen, nicht aber nach links...
aber position hast du jetzt schon ganz rausgenommen und durch margin "ersetzt", oder ...?
gruss,
wahsaga-
nein, glaube ich nicht.
Doch, zumindest im Mozilla 1.6. Ein Freund hat es auf seinem Mac mit Camino und IE allerdings nicht. ??
aber position hast du jetzt schon ganz rausgenommen und durch margin "ersetzt", oder ...?
Ja.
Gruß
Olaf-
hi,
nein, glaube ich nicht.
Doch, zumindest im Mozilla 1.6.
dann hast du wohl noch irgendwas nicht so ganz richtig gemacht.
code oder online-beispiel wären zum nachvollziehen hilfreich.gruss,
wahsaga-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>meier stracke GbR büro für gestaltung</title>
<link rel="stylesheet" href="css/layer.css" type="text/css">
<!--[if gte IE 5]>
<link rel="stylesheet" href="css/layer_ie.css" type="text/css">
<![endif]-->
<link rel="stylesheet" href="css/styles.css" type="text/css">
<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];}}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('images/uu1.gif','images/k1.gif')">
<div class="back">
<div class="image"><img src="images/klappsitze.jpg"></div>
<div class="text">
<span class="txt">
<b>Dinge und Design</b><br>
Es gibt keine nützlichen Dinge, die von uns nicht auch<br>
ästhetisch erfahren werden. Diese Erfahrungen tragen zu<br>
unserer Urteilsbildung bei.<br>
Ein authentisches und inhaltlich sinnvolles Design muss<br>
neben den rein funktionalen Gebrauchsvoraussetzungen auch<br>
unseren ästhetischen Ansprüchen genügen.
</span>
</div>
<div class="mainmenu"><img class="mainmenu" src="images/ms1.gif" id="ms" name="ms" border="0"><a href="uu.html" onMouseOver="MM_swapImage('uu','','images/uu1.gif',1)" onMouseOut="MM_swapImgRestore()"><img class="mainmenu" src="images/uu0.gif" id="uu" name="uu" border="0"></a><a href="k.html" onMouseOver="MM_swapImage('k','','images/k1.gif',1)" onMouseOut="MM_swapImgRestore()"><img class="mainmenu" src="images/k0.gif" id="k" name="k" border="0"></a></div>
</div>
</body>
</html>body {
background-color: #CCCCCC;
margin:0px;
}
div.back {
/* position: absolute;
left: 50%;
top: 50%;
margin-left: -490px;
margin-top: -309px;*/
margin:auto;
width: 980px;
height: 618px;
background-color: #FF3300;
layer-background-color: #FF3300;
}
div.mainmenu {
position: absolute;
margin-left: 360px;
margin-top: 15px;
width: 620px;
}
div.image {
position: absolute;
margin-left: 0px;
margin-top: 132px;
}
div.text {
position: absolute;
margin-left: 345px;
margin-top: 128px;
width: 630px;
} -
Hallo wahsaga,
bitte schau Dir die Sache nochmal an (Mozilla 1.6, großes Fenster o.k., kleines Fenster->Bereich links wird abgeschnitten und kann nicht durch scrollen gesehen werden.): http://www.netbugs.de/dump/index.html
Quellcode hatte ich ja schon gepostet...
Gruß
Olaf
-
-
-
-
-