 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht: 
|
Verfasst Di 23.09.2008 22:36
Titel Verschiebung der Layer bei nicht ausgefülltem Browserfenster |
  |
|
Hallo, ich habe folgendes Problem mit meiner Site (meine erste) :
Die Seite ist so aufgebaut, dass als Hintergrund ein Layout als Bild benutz wird
und der Inhalt über das Hintergrundbild mit div-Layern gelegt wurde.
Diese Div Layer sind einem großen Layer untergeordnet, der die gleiche größe hat wie das Hintergrundbild und auch immer in der Mitte steht.
Nun wenn das Browserfenster eine kleiner größe animmt als dieser große Div-Layer, verschiebt sich der Inhalt darin.
Hab da mal nen Video gedreht von meinem Problem
Video
und hier ochmal der quelltext:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Möbelwerkstätten + Möbelhandel HELTEN</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background-image: url(../Helten_Background3.jpg);
background-repeat: no-repeat;
background-position: center;
background-color: #999999;
}
/* Div's */
#divComplete {
position:absolute;
top:50%;
left:50%;
height:600px;
width:950px;
margin-left:-475px;
margin-top:-300px;
}
#divGalerie {
position:absolute;
height:600px;
width:449px;
left: 500px;
top: -3px;
}
#divNav{
position:absolute;
height:200px;
width:100px;
left: -479px;
top: 271px;
}
#Raum-Logo {
position:absolute;
left:-442px;
top:532px;
width:65px;
height:67px;
}
#Text {
position:absolute;
left:-277px;
top:270px;
width:285px;
height:202px;
}
#Flash {
position:absolute;
left:0px;
top:106px;
width:448px;
height:494px;
z-index:1;
}
/* Styles */
.Stil1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #78B8C1;
line-height: 25px;
}
.Stil14 {
font-size: 14px
}
.Stil15 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 14px;
}
.Stil16 {
font-size: 12px
}
/* Link Behavior */
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
font-weight:bold;
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
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_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_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('../Raum_Logo_Red.png')">
<div id="divComplete">
<div id="divGalerie">
<div id="Flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','height','496','src','../Helten3','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../Helten3' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="496">
<param name="movie" value="../Helten3.swf" />
<param name="quality" value="high" />
<embed src="../Helten3.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="496"></embed>
</object>
</noscript>
</div>
<div id="Raum-Logo">
<a href="http://raum-haus.de/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','../Raum_Logo_Red.png',1)">
<img src="../Raum_Logo_Grey.png" name="Logo"
width= "62" height="67" border="0" id="Logo" /></a>
</div>
<div class="Stil15" id="Text">
<p class="Stil16">Herzlich Willkommen bei Helten,<br />
<p class="Stil16">Ihrem kompetenten Partner in Sachen Möbel und</p>
<p class="Stil16">Küchen.</p>
<p class="Stil16">Von dem Einbau ihrer induviduellen Traumküche bis hin zur Möbelanfertigung nach beliebigen Wünschen können sie auf uns zählen.</p>
</div>
<div class="Stil1" id="divNav">
<p> <span class="Stil1"><span class="Stil14 Stil3"><strong><img src="../q3.png" width="10" height="10" /> <a href="Home.html">Home</a></strong></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Service.html">Service</a></span></span><br />
<span class="Stil1"><span class="Stil3 Stil14"><img src="../q3.png" width="10" height="10" /> <a href="Ausstellung.html">Austellung</a></span></span><br />
<span class="Stil1"><span class="Stil3 Stil14"><img src="../q3.png" width="10" height="10" /> <a href="Partner.html">Partner</a></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Kontakt.html">Ebay</a></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Kontakt.html">Kontakt</a></span></span><br />
</p>
</div>
</div>
</div>
</html> |
Is meine erste Seite und mit Dreamweaver erstellt 
Hoffe ihr könnt mir helfen
Vielen Dank
Zuletzt bearbeitet von MarcelP am Di 23.09.2008 23:44, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Di 23.09.2008 22:50
Titel
|
|
|
Das Problem liegt meiner Meinung nach darin dass die Inhalte nicht relativ zum Hintergrundbild aufgehängt sind...
mir ist da noch was aufgefallen...
mit den negativen Margins kannst Du zwar die Div's zentrieren aber Du kannst sie auch bis zur Hälfte aus dem Anzeigebereich rausschieben...
Das bedeutet dass auf verkleinerten Browsern selbst mit Scrollbar nicht alle Inhalte zu sehen sind...
Eine horizontale Zentrierung funktioniert auch mit "margin:0 auto"
Zuletzt bearbeitet von Impigra am Di 23.09.2008 22:55, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
|
Anzeige
|
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Di 23.09.2008 22:54
Titel
|
|
|
und wie lös ich das problem am besten?
also das mutterelement ist la in der mitte plaziert, wie das hintergrundbild, oder?
mus ich was an dem mutterelement ändern oder an den untergeordneten Tochterelementen?
weiß grad nicht genau wie ich hinkriegen kann..
|
|
| |
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Di 23.09.2008 22:59
Titel
|
|
|
Ich persönlich würde mich von diesem riesigen Hintergrundbild trennen...
Und alles in Divisions aufbauen...
|
|
| |
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Di 23.09.2008 23:04
Titel
|
|
|
gäbe es denn eine Lösung für die jetzige Seite ohne sie großartig zu verändern?
müsste halt nur wissen wie ich die Verschiebung wegbekomme
EDIT:
wenn ich margin:0 auto anstatt margin-left: -x dann wir alles komplett auseinandergepflückt.
was sollte ich denn bei dem div-complete benutzen um das alles richtig hinzubekommen?
vielen Dank@ Impigra
hab leider noch nicht ganz so viel Ahnung davon , könnte mir das jemand ielleich erklären oder lösungsvorschläge geben?
vielen Dank
Zuletzt bearbeitet von MarcelP am Di 23.09.2008 23:48, insgesamt 2-mal bearbeitet
|
|
| |
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Di 23.09.2008 23:55
Titel
|
|
|
Das Problem besteht generell in einer vertikalen Zentrierung...
Ich will kurz was ausprobieren... dann schick ich hier was durch...
|
|
| |
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Mi 24.09.2008 00:36
Titel
|
|
|
Sollte als zentriertes Div passen... ist aber teilweise eine Krücke...
Wer ne bessere Lösung hat solls hier loswerden 
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mittig</title>
<style>
html, body {height:100%}
body {padding:0; margin:0; background-color: #999999;}
#outer {display: table; height: 100%; #position: relative; overflow: visible; width:100%;}
#middle {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
#center {#position: relative; #top: -50%; width:950px; height:600px; margin:0 auto; background-color:#ffffff;}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="center">
<p>Mittig... von beiden Seiten :D<br/>
funktioniert im IE mit den bekannten Problen, in Gecko und WebKit Browsern (nicht wirklich getestet) Probleme mit Apple IE's möglich</p>
</div>
</div>
</div>
</body>
</html> |
|
|
| |
|
|
MarcelP
Threadersteller
Dabei seit: 15.07.2008
Ort: -
Alter: 30
Geschlecht:
|
Verfasst Mi 24.09.2008 14:10
Titel
|
|
|
Vielen Dank für die Antewort Impigra
Hab den Code jetzt mal verändert:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Möbelwerkstätten + Möbelhandel HELTEN</title>
<style type="text/css">
<!--
html, body {height:100%}
body {padding:0; margin:0; background-color: #999999;background-image: url(../Helten_Background3.jpg);background-repeat: no-repeat;
background-position: center;}
#outer {display: table; height: 100%; position: relative; overflow: visible; width:100%;}
#middle {position: absolute; top: 50%;display: table-cell; vertical-align: middle;}
#divComlete {position: absolute; top: -50%; width:950px; height:600px; margin:0 auto; background-color:#ffffff;}
/* Div's */
#divGalerie {
position:absolute;
height:600px;
width:449px;
margin-left:502px;
left: 116px;
top: -294px;
}
#divNav{
position:absolute;
height:200px;
width:100px;
margin-top:274px;
left:-474px;
top:-6px;
}
#Raum-Logo {
position:absolute;
left:-442px;
top:532px;
width:65px;
height:67px;
}
#Text {
position:absolute;
left:-277px;
top:270px;
width:285px;
height:202px;
}
#Flash {
position:absolute;
left:0px;
top:104px;
width:448px;
height:494px;
z-index:1;
}
<div id="outer">
<div id="middle">
<div id="divComplete">
<div id="divGalerie">
<div id="Flash">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','450','height','496','src','../Helten3','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../Helten3' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="450" height="496">
<param name="movie" value="../Helten3.swf" />
<param name="quality" value="high" />
<embed src="../Helten3.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="450" height="496"></embed>
</object>
</noscript></div>
<div id="Raum-Logo">
<a href="http://raum-haus.de/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Logo','','../Raum_Logo_Red.png',1)">
<img src="../Raum_Logo_Grey.png" name="Logo"
width= "62" height="67" border="0" id="Logo" /></a>
</div>
<div class="Stil15" id="Text">
<p class="Stil16">Herzlich Willkommen bei Helten,<br />
<p class="Stil16">Ihrem kompetenten Partner in Sachen Möbel und</p>
<p class="Stil16">Küchen.</p>
<p class="Stil16">Von dem Einbau ihrer induviduellen Traumküche bis hin zur Möbelanfertigung nach beliebigen Wünschen können sie auf uns zählen.</p>
</div>
<div class="Stil1" id="divNav">
<p> <span class="Stil1"><span class="Stil14 Stil3"><strong><img src="../q3.png" width="10" height="10" /> <a href="Home.html">Home</a></strong></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Service.html">Service</a></span></span><br />
<span class="Stil1"><span class="Stil3 Stil14"><img src="../q3.png" width="10" height="10" /> <a href="Ausstellung.html">Austellung</a></span></span><br />
<span class="Stil1"><span class="Stil3 Stil14"><img src="../q3.png" width="10" height="10" /> <a href="Partner.html">Partner</a></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Kontakt.html">Ebay</a></span></span><br />
<span class="Stil1"><span class="Stil14 Stil3"><img src="../q3.png" width="10" height="10" /> <a href="Kontakt.html">Kontakt</a></span></span><br />
</p>
</div>
</div>
</div>
</div>
</div>
|
Ich glaub ich nicht 100% richtig, aber wenn ichs ausprobiere funktionierts schon teilweise. (Nur das Hintergrundbild bewegt sich mit dem Fenster, der inhalt nur vertikal), stoppt aber an den Rändern.
Im Firefox hat mein alter code 100% funktioniert und sich nicht verschoben, hab ich grade gesehn
was muss ich denn noch verbessern daran?
vielen dank
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Layer-Verschiebung im IE! Soll aber nicht!
div-layer über ganzes Browserfenster
innerer layer soll äußeren layer automatisch größer machen
[Dreamweaver] Layer in einem anderen Layer unten ausrichten?
Photoshop Layer exportieren auf einzelne Layer Größe
div-layer im Eltern-div-layer zentrieren. Wie geht das?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
