✔ ''Scrollproblem"

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hallo,
Beim Scrollen bleibt ein Bild stehen - scrollt nicht mit. Habe schon dem Wert - Position in mehreren Varianten versucht das Problem zu beheben. Es scrollt nicht mit. Im FF scrollt ausser dem Bild -Name Rückblick- alles, im IE scrolt nur der Text.
Code: 
body {background-color: #000066;}
#content {width: 770px;height:525px; background-color: #FFFFFF; margin: auto; overflow: visible;margin-top: 50px; overflow:auto;}
.tanteju { width:140px; height:80px; position:relative; left: 15px; top: 18px; }
.rückblick { position:relative; height:70px; width:70px; margin-left: 660px; margin-top: -90px; }
.navileiste {margin-top: 0px; margin-left: 15px; margin-right:15px;position: relative;}
.marquee { width:500px; height:70px; position:relative; margin-left: 160px; margin-top: -50px; }
.header {background-image: url(../images/header.gif);position: absolute; width:770px;}
.left { background-image:url(../images/left.gif); position:absolute; height:520px;}
.footer { background-image:url(../images/footer.gif);position: absolute;width: 770px; height:15px; margin-top:510px;}
.right {background-image:url(../images/right.gif);position:absolute;height:520px;width: 15px; margin-left:755px;}
.p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #013998; text-align:justify; padding-left: 45px; padding-right: 45px;}
.pindtop { margin-top:35px;}
.pind { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #990000; font-size:11px; font-style: oblique;}
.pinddate {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight:bold; color:#013998; font-size:11px; font-style:oblique; margin-left:397px; }
.termdate { font-family: Verdana, Arial, Helvetica, sans-serif; color: #990000; font-size:11px; margin: 20px 60px 10px 64px;}
.termevent {font-family: Verdana, Arial, Helvetica, sans-serif; color: #013998; font-size:11px; margin:0 60px 0 30px;}
.termeinzug { padding-left:66px;color:#013998;}
.terminfo {	margin: 20px 130px 0px 64px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;color: #013998; text-align:justify;}
.cash {	position:absolute;	font-family: Verdana, Arial, Helvetica, sans-serif;	color: #013998;	font-size:11px;	font-weight:bold;margin-top: -13px;	margin-left: 275px;}
.info { margin-left: 660px; margin-top:-42px;}
.zurück {margin-left: 660px;	margin-top:-110px;}
.Stil1 {color: #FF0000;	font-weight: bold;}
.Stil3 {color: #013998;	right: 50px;}
.back {font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;color:#013998; font-size:11px; margin-left: 045px; margin-top:30px;}
.pback {font-family:Verdana, Arial, Helvetica, sans-serif;	color:#013998;	font-size:11px;	font-weight:normal;	margin-top: 50px;	margin-left: 45px;}
.pbackeinzug {position:absolute;margin-left:240px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#013998;font-size:11px;font-weight:normal;margin-top: -195px;}
a:link { text-decoration: none;	}
a:visited { color: #990000; text-decoration: line-through;}
a:active {}
a:hover {text-decoration: none; background: #013998; color: #FFFFFF;}
HTML: 
<!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=iso-8859-1" />
<title>Test</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#content { overflow-x:hidden; overflow-y:auto;}
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="content"> <img class="header" src="images/header.gif" alt="header"/> <img class="left" src="images/left.gif" alt="left" /> <img class="footer" src="images/footer.gif" alt="footer" /> <img class="right" src="images/right.gif" alt="right" /> <img class="tanteju" src="images/tanteju.jpg" alt="tanteju" />
  <div><a href="rueckblick06.html"><img src="images/rueckblick1.jpg" alt="r&uuml;ckblick" width="63" border="0" class="r&uuml;ckblick"/></a></div>
  <div class="marquee">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','500','height','70','movie','marquee/tanteju','quality','high' ); //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=7,0,19,0" width="500" height="70">
      <param name="movie" value="marquee/tanteju.swf" />
      <param name="quality" value="high" />
    </object>
    </noscript>
  </div>
  <img class="navileiste" src="images/navigation.jpg" alt="navigation" /><br />
  <br />
  &lt;
  <p class="p"><span class="pind">+++ ASTILLERO +++</span> <span class="pinddate">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Freitag, 24.08.</span> <br />
    <br />
    Astillero kommt unmittelbar aus dem Epizentrum einer Metropole mit 14 Mio. Einwohnern. Ihre Musik zelebriert die Eindr&uuml;cke einer faszinierenden, schillernden Stadt. Das ist das Substrat einer neuen Popmusik aus Buenos Aires mit immer gr&ouml;&szlig;er werdender Anh&auml;ngerschaft. Die 6 Musiker + S&auml;nger bieten eine perfekte B&uuml;hnenshow mit einem atemberaubenden Live-Videoscreening. Hier sind sozusagen die neuen post-Piazzollas am Anr&uuml;cken.<br />
    <br />
  </p>
  <p class="p"><span class="pind">+++ BOOOM Festival +++</span><span class="pinddate">Samstag, 25.08.</span> <br />
    <br />
    Das Booom Festival wird &uuml;ber euch kommen! NOFOB.COM pr&auml;sentiert Bands wie The Bones, Disillusion, Cataract, GORP, Beissert, Beauty Is The End, Blackletterday, Black Tequila u.s.w.<br />
    <br />
  </p>
  <p class="p"> <span class="pind">+++ Kik It Like FALCO +++</span><span class="pinddate">&nbsp;Freitag, 07.09.</span> <br />
    <br />
    FALCO ...back to the 80th 
    7 professionelle Musiker inszenieren mit ihrer B&uuml;hnen-Show eine Hommage an das musikalische Leben von FALCO und lassen f&uuml;r den Zuschauer die unangepasste, extravagante Pers&ouml;nlichkeit des Falken in einem glamour&ouml;sen Live Spektakel wieder neu zum Leben erwachen.</p>
  <p class="p">- Groovy Sounds, Welthits zum mitsingen, perfekter Style -<br />
    <br />
    <br />
    <br />
  </p>
</div>
<!-- end content -->
</body>
</html>
 
Hi,

derzeit lässt sich bei mir die Box #content in keinem Browser scrollen, da das Grafikelement (right.gif) so positioniert ist, dass es den Scrollbalken überdeckt.

Wenn ich zu Testzwecken die Breite der Box #content erhöhe und ihren Inhalt verlängere, scrollt das Grafikelement mit der Klasse .rueckblick problemlos im FF mit. Damit das Bild beim Scrollen auch im IE "mitläuft", muss die Box #content zusätzlich relativ positioniert werden.
 
Das Grafikelement right.gif habe ich bewusst auf den Scrollbalken gelegt. das ging wohl dann doch nicht. Habe den Content auf 785px genommen da ist der Scrollbalken da. Im IE sitzt das Rückblick foto jetzt nach oben versetzt und wenn ich den Content relativ positioniere fällt das Layout auseinander.
 
Wieso willst du denn den Scrollbalken bewusst mit einer Grafik überdecken, und ihn so für den Nutzer unzugänglich machen?

Kannst du vielleicht alle übrigen eingebundenen Dateien (navigation.css, Grafiken, swf-File, usw.) hier als ZIP-Datei hochladen, oder einen Link zur Seite nennen, damit man sich das Layout in seiner wahren Pracht betrachten kann, und so einen Ansatzpunkt hat, wo was sitzt bzw. nicht sitzen soll?
 
Weil left,right,header und footer aussehen wie ein luftpostbrief,also nur der schmale rot-weiß-blaue Rand, sollte wie ein Brief aussehen. Habe den Content auf 785px genommen und overflow-scroll. Da der Hintergrund blau ist sieht es natürlich dann nach nix aus wenn man dann einen weißen Streifen hat- deshalb overflow-scroll. Das Rückblick foto ist im IE hoch- weis der Geier warum ich kann es nicht positionieren
 
Und nochmal die Bitte, die eingebundenen Dateien hier als ZIP-Datei anzuhängen, oder einen Link zur Seite nennen, denn ohne die eingebauten Grafiken und das Flash-File hat man als Außenstehender null Ansatzpunkte zum Vergleichen.
 
Bitte alles in einen Ordner entpacken.
Danke
 

Anhänge

  • tut1.zip
    74 KB · Aufrufe: 13
  • tut2.zip
    55,3 KB · Aufrufe: 12
Hi,
Einfache Sache aber ich komme nicht drauf. Will das die Button - Info - genau übereinanderstehen. Bekomme es einfach nicht hin., weder mit Angabe position, rechtsbündig ausrichten usw.:(
Hier der Code

Code: 
body {background-color: #000066;}
#content {
	width: 783px;
	height:525px;
	background-color: #FFFFFF;
	margin: auto;
	overflow: auto;
	margin-top: 50px;
	overflow: scroll;
}
.tanteju { width:140px; height:80px; position:relative; left: 15px; top: 18px; }
.rückblick { position:relative; height:70px; width:70px; margin-left: 660px; margin-top: -90px; background-attachment:fixed; }
.navileiste {margin-top: 0px; margin-left: 15px; margin-right:15px;position: relative;}
.marquee { width:500px; height:70px; position:relative; margin-left: 160px; margin-top: -50px; }
.header {background-image: url(../images/header.gif);position: absolute; width:770px;}
.left {
	background-image:url(../images/left.gif);
	position:absolute;
	height:520px;
}
.footer { background-image:url(../images/footer.gif);position: absolute;width: 770px; height:15px; margin-top:510px;}
.right {background-image:url(../images/right.gif);position:absolute;height:520px;width: 15px; margin-left:755px;}
.p { font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #013998; text-align:justify; padding-left: 45px; padding-right: 45px;}
.pindtop { margin-top:35px;}
.pind { font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #990000; font-size:11px; font-style: oblique;}
.pinddate {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight:bold; color:#013998; font-size:11px; font-style:oblique; margin-left:405px; }
.termdate {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #990000;
	font-size:11px;
	margin-top: 22px;
	width: 50px;
	margin-left: 50px;
}
.termevent {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #013998;
	font-size:11px;
	margin-left: 5px; text-align:justify;
}
.termeinzug { padding-left:66px;color:#013998;}
.terminfo {	margin: 20px 130px 0px 64px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px;color: #013998; text-align:justify;}
.Preise {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #013998;
	font-size:11px;
	font-weight:bold;
	margin-top: -35px;
	padding: 0px;
	width: 80px;
	margin-left: 532px;
	border: black 1px solid;
}
.Stil1 {color: #FF0000;	font-weight: bold;}
.Stil3 {color: #013998;	right: 50px;}
.back {font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;color:#013998; font-size:11px; margin-left: 45px; margin-top:30px;}
.pback {font-family:Verdana, Arial, Helvetica, sans-serif;	color:#013998;	font-size:11px;	font-weight:normal;	margin-top: 20px;	margin-left: 45px;}
.pbackeinzug {position:absolute;margin-left:240px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#013998;font-size:11px;font-weight:normal;margin-top: -195px;}
.terminalinfo {	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size: 11px;	color: #013998;	text-align:justify;	padding-left: 45px;	padding-right: 50px;	margin-top: 40px; font-weight:normal;}
.terminalinfofoto {
	margin-left:555px;
	margin-top: 0px;
	position: absolute;
}
.terminalinfodate {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #990000;
	color:#990000;
	text-align:justify;
	font-weight:bold;
	margin-left: 45px;
	position: relative;
	margin-right: 500px;
}
a:link { text-decoration: none; display:block;}
a:visited { color: #990000; text-decoration: none;}
a:active {}
a:hover {}
.info {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#013998;
	background-color: #FFFFFF;
	text-align: center;
	padding: 0px 20px 0 20px;
	font-size: 11px;
	border: #013998 1px solid;
}
.zurück {
	text-align:center;
	position:relative;
	border:#013998 solid 1px;
	width: 70px;
	margin-left: 45px;
}
HTML: 
<!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=iso-8859-1" />
<title>Test</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div class="termdate" id="content"> <img class="header" src="images/header.gif" alt="header"/> <img class="left" src="images/left.gif" alt="left" /> <img class="footer" src="images/footer.gif" alt="footer" /> <img class="right" src="images/right.gif" alt="right" /> <img class="tanteju" src="images/tanteju.jpg" alt="tanteju" />
  <div><a href="rueckblick06.html"><img src="images/rueckblick1.jpg" alt="r&uuml;ckblick" border="0" class="r&uuml;ckblick"/></a></div>
  <div class="marquee">
    <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','500','height','70','movie','marquee/tanteju','quality','high' ); //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=7,0,19,0" width="500" height="70">
      <param name="movie" value="marquee/tanteju.swf" />
      <param name="quality" value="high" />
    </object>
    </noscript>
  </div>
  <img class="navileiste" src="images/navigation.jpg" alt="navigation" /><br />
  <br />
  <br />
  <div><span class="termdate">24.08</span>. <span class="termevent">Astillero - brandneuer Tango Nuevo aus Buenos Aires</span> <span class="info">Info</span> 8,-/10,- &euro;<br />
    <br />
    <span class="termdate">25.08.</span> <span class="termevent">NOFOB.COM pr&auml;sentiert BOOOM Festival</span> <span class="info">Info</span> 15,-/18,- &euro; <br />
  </div>
</div>
<!-- end content -->
</body>
</html>
 
Wie sollen denn deiner Meinung nach die "Info"-Boxen in einer Flucht übereinander stehen, wenn der Inhalt zur linken und rechten Seite in Abhängigkeit von seiner Zeichenlänge in der Breite variabel ist?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück