Wie bekomme ich Srollbalen in eien Homepage

Veröffentlicht 29. November 200519 j

Hallo ich habe eine Frage die sich auf das scrollen inerhalb des roten feldes auf der beispiel Seite zeigt.

http://www.lustnau.info/Bilder/testtbild.jpg

Wie bekomme ich es hin das ich ein Text in dem Roten Feld als Scrollfeld bekomme, ohne das sich dann eventuell der Hintergrund in dem rotenfeld(wenn mal einer da ist) wiederholt.

Habe es versucht mit iframe aber irgendwie klappt das im Internet Explorer net.

Es müsste doch was geben wo in allen Browser klappen würde

29. November 200519 j

was jetzt genau?

In deiner Frage sind 2 Fragen

lüppt das bei dir mit dem iframe überhaupt ned?

Oder geht es in deinem Prob nur um deinen Hintergrund, der sich ned wiederholen lassen soll?

29. November 200519 j

im zweifelsfall mit einem scrollbaren div-layer

29. November 200519 j

Servus,

Wenn ichs richtig verstanden hab, gehts dir um ein Hintergrundbild, das nicht mitscrollt. Ist das rote Feld ein iFrame?

Dann gib dem Body des iFrame-Inhalts ein background-image: url(images/xyz.gif);background-attachment:fixed; mit.

Siehe auch: http://www.css4you.de/background-attachment.html

Grüße..

..azett

29. November 200519 j

Autor

Hallo nochmal alsooo:

Das Bild das Ihr gesehen habt ist eine .jpg Datei die ich alb BG verwenden werde.

In dem roten bereich will ich dann wie beschrieben den textreinmachen, udn nur in dem Feld egal wie lang der Text ist dann soll es einfach in dem roten Feld nach unten Scrollen.

Eigentlich wie auf http://www.ongbak-lefilm.com/ ok das ist das zwar mit Flash gemacht aber so meint eich das

29. November 200519 j

azett hat es doch eigentlich schon beantwortet.

Wie wärs, wenn du uns mal den Code hier reinschnibbelst. Sonst wird das ganze hier nichts mehr

29. November 200519 j

Autor

Also bei mir ist des so das er einfach net in dem Bereich srollen will wo ich vorgebe also nicht weiter als der rote bereich auf meinem BG Bild

<html>


<head>

<title>Kein Titel</title>

<meta name="generator" content="Namo WebEditor v5.0">

<script language="JavaScript">

<!--

function namosw_init_float_layers()

{

  var name;

  var layer;

  var i;

  var j;


  j = 0;

  document._float_layers = new Array(Math.max(1, namosw_init_float_layers.arguments.length/2));

  for (i = 0; i < namosw_init_float_layers.arguments.length; i += 2) {

    name  = namosw_init_float_layers.arguments[i];

    if (name == '')

      return;

    if (navigator.appName.indexOf('Netscape', 0) != -1) {

      layer = document.layers[name];

      layer._fl_pos_left = layer.left;

      layer._fl_pos_top  = layer.top;

    } else {

      layer = document.all[name];

      layer._fl_pos_left = layer.style.pixelLeft;

      layer._fl_pos_top  = layer.style.pixelTop;

    }

    layer._fl_pos = namosw_init_float_layers.arguments[i+1];

    if (layer)

      document._float_layers[j++] = layer;

  }


  document._fl_interval = setInterval('namosw_process_float_layers()', 200);

}


function namosw_page_width()

{

  return (navigator.appName.indexOf('Netscape', 0) != -1) ? innerWidth  : document.body.clientWidth;

}


function namosw_page_height()

{

  return (navigator.appName.indexOf('Netscape', 0) != -1) ? innerHeight : document.body.clientHeight;

}


function namosw_process_float_layers()

{

  if (document._float_layers) {

      var i;

      var layer;

      for (i = 0; i < document._float_layers.length; i++) {

	  layer = document._float_layers[i];

	  if (navigator.appName.indexOf('Netscape', 0) != -1) {

	    if (layer._fl_pos == 1)

	      layer.left = layer._fl_pos_left + window.pageXOffset;

	    else if (layer._fl_pos == 2 || layer._fl_pos == 5) 

	      layer.left = window.pageXOffset;

	    else if (layer._fl_pos == 3 || layer._fl_pos == 6) 

	      layer.left = window.pageXOffset + (namosw_page_width() - layer.clip.width)/2;

	    else

	      layer.left = window.pageXOffset + namosw_page_width() - layer.clip.width - 16;

	    if (layer._fl_pos == 1)

	      layer.top = layer._fl_pos_top + window.pageYOffset;

	    else if (layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4)

	      layer.top = window.pageYOffset;

	    else

	      layer.top  = window.pageYOffset + namosw_page_height() - layer.clip.height;

	  } else {

	    if (layer._fl_pos == 1)

	      layer.style.pixelLeft = layer._fl_pos_left + document.body.scrollLeft;

	    else if (layer._fl_pos == 2 || layer._fl_pos == 5)

	      layer.style.pixelLeft = document.body.scrollLeft;

	    else if (layer._fl_pos == 3 || layer._fl_pos == 6)

	      layer.style.pixelLeft = document.body.scrollLeft + (namosw_page_width() - layer.style.pixelWidth)/2;

	    else

	      layer.style.pixelLeft = document.body.scrollLeft + namosw_page_width()  - layer.style.pixelWidth;

	    if (layer._fl_pos == 1)

	      layer.style.pixelTop = layer._fl_pos_top + document.body.scrollTop;

	    else if (layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4)

	      layer.style.pixelTop = document.body.scrollTop;

	    else

	      layer.style.pixelTop  = document.body.scrollTop  + namosw_page_height() - layer.style.pixelHeight;

         }

      }

  }

}


// -->

</script>

</head>


<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="testtbild.jpg" OnLoad="namosw_init_float_layers('layer1', 1);">

<p> </p>

<div id="layer1" style="width:702px; height:452px; position:absolute; left:256px; top:134px; z-index:1;">

    <p>Hier steht der Text<br>Hier steht der Text<br>Hier steht der TextHier 

    steht der Text<br>Hier steht der Text<br>Hier steht der Text<br>Hier steht 

    der TextHier steht der TextHier steht der Text<br>Hier steht der Text<br>Hier 

    steht der Text<br>Hier steht der Text<br>Hier steht der TextHier steht der 

    TextHier steht der Text<br><br>Hier steht der Text<br>Hier steht der Text<br>Hier 

    steht der Text<br>Hier steht der Text<br>Hier steht der TextHier steht der 

    TextHier steht der Text</p>

    <p>Hier steht der Text</p>

    <p>Hier steht der Text </p>

</div>

<p> </p>

</body>


</html>

29. November 200519 j

Autor

Nochmal zur Info.

Das Bild wo ich oben auf dem Link zeige ist also mein Hintergrund Bild also eine jpg Datei.

Und in der Roten Zone auf dem 1 jpg Bild will ich den Text reinmachen, einen sehr langen Text, und nur auf der roten Stelle auf dem jpg Bild soll gescrollt werden.

Schaut euch mal das so an http://www.ongbak-lefilm.com dann auf LEFILM drücken, dann auf Interview so stelle ichmir das vor

29. November 200519 j

<div style="overflow: auto">

...gehört in Zeile 96 deines (ziemlich langen

) Codes:

<div id="layer1" style="width:702px; height:452px; position:absolute; left:256px; top:134px; z-index:1;[B]overflow:auto;[/B]">

Wäre halt nur dafür zu sorgen, daß dein "roter Bereich" auch exakt unter dem Layer liegt.

29. November 200519 j

Autor

wenn ich es so mache

<div style="width:700px; height:443px; position:absolute; left:256px; top:134px; z-index:1; overflow: auto" id="layer1" style="width:700px; height:443px; position:absolute; left:256px; top:134px; z-index:1; overflow: auto">

Dann scrollt er mir jedes mal drüber, wenn der Text zu lang ist.

29. November 200519 j

denke ich zu einfach oder seht ihr das nur kompliziert?

erste Seite:

<div class="iframe"><iframe src="test_2.htm" id="frame"></iframe></div>

zweite Seite: Beispieltext CSS:

.iframe{

background-color:#A4C0F0;

padding:3px; 

border:1px solid black;

width:600px;

height:250px;

margin-left:5px;

position:absolute; right:50px;top:100px;}


#frame{

width:100%; height:100%;}

sollte so eigentlich in allen Browser funktionieren (mal abgesehen vom Rand etc.)

29. November 200519 j

Dann scrollt er mir jedes mal drüber, wenn der Text zu lang ist.

Definiere "er scrollt drüber"

denke ich zu einfach oder seht ihr das nur kompliziert?

Ist eben die Frage, ob er nen iFrame oder ein div einsetzen will

Ich bitte um klare Angaben, Anwendungsentwickler :rolleyes:

29. November 200519 j

Autor

k habs anders hinbekommen

nur ne frage ist es möglich von dem iframe den rand wegzumachen it einem befehl ?

http://www.lustnau.info/Bilder/noname5.htm

29. November 200519 j

öhm ich würde den Border mal auf 0 setzen

btw

also wenn das die Lösung ist, bin ich bei meinem Beispiel besser dran.

bei deiner jetzigen Situation scrollt beim IE6 das Bild mit. Und bei Mozilla (weder FF noch NS) gibt es ned mal ein Bild

30. November 200519 j

Ööööhm...nimm mal bitte den Textausschnitt mit Reinhold Messner aus dem style-Bereich im head raus Und die Definition fürs Hintergrundbild sollte nicht so aussehen:

body {background:url(arm.jpg) none)

...sondern eher so:

body {background[b]-image[/b]:url(arm.jpg)[b]}[/b]

...dann klappts auch mit den anderen Browsern. Und denk an das background-attachment:fixed;, um das Hintergrundbild zu fixieren (ich würde fast behaupten, das schonmal erwähnt zu haben )

Achso...</body> und </html> kommen erst ganz am Ende des Dokuments.

Keep on HTMLing

Anmelden

Themen

Ingenieur/Fachinformatiker (m/w/d) im Produktmanagement Embedded-PC mit Schwerpunkt Linux bei Beckhoff Automation GmbH & Co. KG (33415 Verl, Deutschland)

Softwareentwickler:in Partnermanagement (w/m/d) bei HUK-COBURG Versicherungsgruppe (96450 Coburg, Deutschland)

IT-Infrastruktur-Administrator:in m/w/d bei AUMA Riester GmbH & Co. KG (79379 Müllheim im Markgräflerland, Deutschland)

Wie bekomme ich Srollbalen in eien Homepage

Empfohlene Antworten

Archiv

Konto

Navigation

Suchen

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)