scrolltext verschwinden lassen

Status
Nicht offen für weitere Antworten.
H

helpRichi

Mitglied
Morgen!!

Hab mal wieder eine Frage: Hab bei einer Hompage ein Hintergrundbild so eingefügt das es immer auf 100% ist... Und das wenn man das Fenster verkleinert beim Runterscrollen nicht plözlich eine weiße Ffläche kommt hab ich es einfach so gemacht das der Text gescrollt wir... wie eben bei diesem Beispiel: http://www.cssplay.co.uk/layouts/background.html

Ich wollte jetzt fragen ob man es so machen kann das der Text ab einem bestimmten Punkt verschwindet... weil ich hab oben ein Logo und da fährt mir der Text sonst rein...

irgendwie verständlich meine Frage?

Kann auch meinen Code posten:
Code: 
.....................
..................
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>..........</title>
<style type="text/css">
<!--
#background{position:absolute; z-index:1; width:100%; height:100%;}
#Logo {
	position:absolute;
	left:47px;
	top:41px;
	width:227px;
	height:91px;
	z-index:2;
}
#steuerungstechnik {
	position:absolute;
	left:406px;
	top:0px;
	width:287px;
	height:91px;
	z-index:3;
}
* {
   margin:0;
   padding: 0;
}
#content{position:absolute; z-index:2; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;} 
html, body { height: 100%; }
body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
  /* text-align: center; */   /* horizontale Zentrierung for IE<6 (quirks) */

}
#wrapper {

   position: relative;
   width: 500px;
   height: 900px;
   margin: 30px auto 0 auto;    /* horizontale Zentrierung for mod.Browser */
   text-align: left;        /* zurück zum Standard */
}

-->
</style>
<script type="text/javascript">
<!--

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


</head>

<body >

<div>
<img id="background" src="http://www.tutorials.de/forum/images/img36.jpg" alt="" title="" /> 
</div> 
<div id="content">
 <div id="Logo">
  <div align="center"><a href="index.html"><img src="http://www.tutorials.de/forum/images/Logo.jpg" alt="PLC - Home" width="228" height="91" border="0" /></a></div>
</div>
<div id="scroller">
<div id="wrapper">
<div id="steuerungstechnik">
  <p align="center">&nbsp;</p>
  <p align="right"><img src="http://www.tutorials.de/forum/images/steuerungstechnik.jpg" width="235" height="32" /></p>
</div>
  <table id="Table24" cellspacing="0" cellpadding="0" width="550" align="center" border="0">
    <tbody>
      <tr>
.....................
............................
.....................
  </table>
</div>
</div>
</body>
</html>
Vielleicht kann mir darauf jemand eine Antwort geben. danke schon mal !!
 
Zuletzt bearbeitet:
Hi,

dann musst du eben für das DIV #scroller eine Positionsangabe top festlegen, die größer als "0" ist, damit es unterhalb des Logos beginnt, und so der Text beim Scrollen nicht mehr darüber hinweg läuft.

mfg Maik
 
Dann deaktivierst du eben einen von beiden mittels overflow:hidden.

mfg Maik
 
jetzt much ich noch einmal lästig sein...

wenn ich die Seite jetzt mit Firefox öffne funktioniert alles so wie ich will , aber bei IE nicht hmmm? Was muss ich da ändern? zb im IE zeigt er mir trotzdem noch beide Scrollleisten an...
 
Zuletzt bearbeitet:
Hi,

wie schon in deinem letzten Thread kann ich auch hier nur sagen, dass ich nicht hellsehen kann, sprich ohne den aktuellen Quellcode lässt sich dazu nichts sagen.

mfg Maik
 
so ist er aktuell:

Code: 
........................
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>..........</title>
<style type="text/css">
<!--
#background{position:absolute; z-index:1; width:100%; height:100%;}
#Logo {
	position:absolute;
	left:47px;
	top:41px;
	width:227px;
	height:91px;
	z-index:2;
}
#steuerungstechnik {
	position:absolute;
	left:667px;
	top:-1px;
	width:287px;
	height:91px;
	z-index:3;
}
* {
   margin:0;
   padding: 0;
}
#content{position:absolute; z-index:2; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:155px; left:0; overflow:auto; z-index:2;} 
html, body { height: 100%; }
body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
   overflow:hidden;
  /* text-align: center; */   /* horizontale Zentrierung for IE<6 (quirks) */

}
#wrapper {

   position: relative;
   width: 600px;
   height: 1030px;
   margin: 30px auto 0 auto;    /* horizontale Zentrierung for mod.Browser */
   text-align: left;        /* zurück zum Standard */
   overflow:hidden;
}

-->
</style>
<script type="text/javascript">
<!--

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script>


</head>

<body >

<div>
<img id="background" src="images/img36.jpg" alt="" title="" /> 
</div> 
<div id="content">
 <div id="Logo">
  <div align="center"><a href="index.html"><img src="images/Logo.jpg" alt="PLC - Home" width="228" height="91" border="0" /></a></div>
  <div id="steuerungstechnik">
  <p align="center">&nbsp;</p>
  <p align="right"><img src="images/steuerungstechnik.jpg" width="235" height="32" /></p>
</div>
</div>
<div id="scroller">
<div id="wrapper">
    <table id="Table22" cellspacing="0" cellpadding="0" width="550" align="center" 
................................
.................................
............................
  </table>
</div>
</div>
</body>

</html>

hat sich nicht viel verändert
 
Im standardkonformen Modus muß die Regel auch auf das html-Element angewendet werden:

Code: 
html, body { height: 100%; overflow:hidden;}
body {
   font:100.01%/1.4 sans-serif;
   background-color: #fff;
   color: #000;
   /*overflow:hidden;*/
  /* text-align: center; */   /* horizontale Zentrierung for IE<6 (quirks) */

}
mfg Maik
 
ahh danke jetzt funkt des mit der Scrolleiste auch im IE !

Aber irgendwie zeigt es im IE den Hintergrund nicht an ... muss ich da auch noch was ergänzen


(Code is noch der gleiche bis auf das overflow:hidden; )
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück