Zum Inhalt springen

Wie bekomme ich Srollbalen in eien Homepage

Anwendungsentwickler

Von Anwendungsentwickler
in Webdesign

 Teilen

Empfohlene Beiträge

Anwendungsentwickler

Anwendungsentwickler

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
Anwendungsentwickler

Anwendungsentwickler

Geschrieben
  • Autor
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
Anwendungsentwickler

Anwendungsentwickler

Geschrieben
  • Autor
Geschrieben

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>

Link zu diesem Kommentar
Auf anderen Seiten teilen
Anwendungsentwickler

Anwendungsentwickler

Geschrieben
  • Autor
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben
<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.

:)

Link zu diesem Kommentar
Auf anderen Seiten teilen
Anwendungsentwickler

Anwendungsentwickler

Geschrieben
  • Autor
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen
Manitu71

Manitu71

Geschrieben
Geschrieben

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.)

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben

Öööö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 ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...