Textabschnitte in fest definierten iframe per link anscrollen

FritzvK · 3. Oktober 2014

ich möchte einen umfangreichen Text abschnittsweise über eine Verlinkung (horizontales dropdown Menu) in einem Fenster (blauer bereich) das unter dem Menu definiert ist einscrollen. Wahlweise kann der besucher selbst diesen text scrollen. leider klappt das os im moment nicht. ich benutze keine framesets und dachte das klappt mit iframe und target funktion (s. htm/CSS - Anhang)

seht ihr eine chance das mit meiner Version zu realisieren?

danke fritz

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title> mein erste homepage</title> 




<meta name="description" content=""/> 
<meta name="author" content="fritz"/> 
<meta name="keywords" content="wfa wsa wva"/> 
<meta name="generator" content="Webocton - Scriptly ( 




<link href="/HP/styles/style.css" type="text/css" rel="stylesheet"/> 
</head> 




<body> 




<div id="Bereich-Kopf"> 
<div id="Bereich-Kopf-1"> 
<img src="/HP/images/Label (100-131).jpg" alt="WSA" title="WFA" /> 
</div> 
<div id="Bereich-Kopf-2"> 
<h2>qwwertzuioiu rtzu <br />1234567890&szlig;´ - 1234567890&szlig;- 1234567890&szlig;- 1234567890&szlig; -<br /><br /><br /> 
</h2> 
</div> 
<div id="Bereich-Kopf-3"> 
<a href = "english-form.htm"> <img src="/HP/images/England (30-18).jpg" alt="English" title="English" height="18" width="30"/> </a> 
<a href = "turkish.htm"> <img src="/HP/images/T&uuml;rkei (30-18).jpg" alt="T&uuml;rkisch" title="T&uuml;rkisch" height="18" width="30" /> </a> 
<a href = "russian.htm"> <img src="/HP/images/Russland (30-18).jpg" alt="Ru&szlig" title="Ru&szlig;isch" height="18" width="30"/> </a> 
</div> 
<div id="Bereich-Kopf-4"> 
<h3>Herr<br /> Fritz Kalkreuth 
</h3> 
<h4> Spiel<br />Sport<br />Spannung 
</h4> 
</div> 




</div> 
<div id="Bereich-Kopf-5"> 
<h5>Hier soll dann der Name der Homepage hin 
</h5> 
</div> 




<div id="Bereich-Kopf-reg"> 
<div id="menu"> 
<ul> 
<li class = "topmenu"> 
<a href="Formular.htm">Anmeldeformular</a> 
<li class = "topmenu"> 
<a href="#">WSA</a> 
<ul> 
<li class="submenu"><a href = "/HP/images/SS.html#wsa" target ="mainframe"> WSA </a> </li> 
<li class="submenu"><a href = "/HP/images/SS.html#wsa1" target ="main"> wsa 1 </a> </li> 
<li class="submenu"><a href = "/HP/images/SS.html#wsa2" target ="main"> wsa 2 </a> </li> 
<li class="submenu"><a href = "/HP/images/SS.html#wsa3" target ="main"> wsa 3</a> </li> 
<li class="submenu"><a href = "/HP/images/SS.html#wsa4" target ="main"> wsa 4 </a> </li> 
</ul> 
</li> 
<li class = "topmenu"> 
<a href="#">WFA</a> 
<ul> 
<li class="submenu"><a href = "wfa1.htm" target="main-frame"> wfa1 </a></li> 
<li class="submenu"><a href = "wfa2.htm" target="main-frame"> wfa2 </a> </li> 
<li class="submenu"><a href = "wfa3.htm" target="main-frame"> wfa3 </a> </li> 
</ul> 
</li> 
<li class = "topmenu"> 
<a href="#">WVA</a> 
<ul> 
<li class="submenu"><a href = "Wva" target="main-frame"> wva </a> </li> 
<li class="submenu"><a href = "wva.htm" target="main-frame"> wva1 </a> </li> 
<li class="submenu"><a href = "wva.htm" target="main-frame"> wva2 </a> </li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 
<div id="mainframe"> 
</div> 




<div id="Bereich-Register-bottom"> 
<div id="menubot"> 
<li class = "topmenubot"> 




<a href="wir.htm" target="main-frame"> &Uuml;ber uns </a> 
<a href="Impressum.htm" target="main-frame"> Impressum </a> 
<a href="mailto: fritz.kalkreuth@gmx.de"> E-Mail </a> 
<a href="map.htm" target="main-frame"> qwertuiop&uuml;s<br />1234567890asdfghjkl<br />yxcvbnmasdfghjkl </a> 
</li> 
</div> 
</div> 
<div id="Bereich-Register-bottom-1"> <h6>Terminvereinbarung: +49 xxx xxxxxxxxx - Fax: +49 xxxxxxx xxxxxxx - <a href = mailto:fritz.kalkreuth@gmx.de">

Alles anzeigen

CSS

body { 
background-color: #E7EADB; 
margin-top: 0%; 
margin-right: 20%; 
margin-bottom: 5%; 
margin-left: 20%; 
} 
h2 { 
font-family: calibri, Arial, Helvetica; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 100%; 
color: #00FD00; 
} 
h3 { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight: bold; 
font-size: 80%; 
color: #00FD00; 
} 
h4 { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight: bold; 
font-size: 60%; 
color: #00FD00; 
} 
h5 { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-style: oblique; 
font-size: 110%; 
color: #404040; 
text-align: center; 
padding-top: 2%; 
} 
h6 { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-style: oblique; 
font-size: 80%; 
color: #404040; 
text-align: center; 
padding-top: 4%; 
} 
#Bereich-Kopf { 
background-color: #404040; 
margin-top: 50px; 
width: 100%; 
height: 170px; 




} 
#Bereich-Kopf-1 { 
padding: 20px 20px ; 
float: left; 
width: 100px; 
} 
#Bereich-Kopf-2 { 
padding: 20px 20px ; 
float: left; 
width: 300px; 
} 
#Bereich-Kopf-3 { 
padding-top: 1%; 
padding: 20px 20px ; 
position:relative; 
left: 200px; 
width:150px; 
} 
#Bereich-Kopf-4 { 
padding: 0% 0% ; 
position: relative; 
left: 10%; 
Top: -20%; 
} 
#Bereich-Kopf-5 { 
background-color: #C0C0C0; 
margin-top: 1%; 
width: 100%; 
padding: 0% 0% ; 
position: relative; 
left: 0%; 
Top: -0%; 
} 
#Bereich-Register-Kopf { 
float: left; 
} 




h1 { 
font-family: calibri, Arial, Helvetica, Andele monospace; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 130%; 
color: #008000; 
} 




a:link { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight:200; 
font-size: 90%; 
text-decoration:none; 
color: #400000 
} 
a:hover { 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight:500; 
font-size: 90%; 
text-decoration:none; 
color: #FF8000 
} 
a:visited { 
color: purple; 
text-decoration:none; 
} 
a:active { 
background-color: white; 
text-decoration:none; 
} 
li { 
margin-top: 5px; 
margin-bottom: 5px; 
list-style-type: none; 
} 




#Bereich-Kopf-reg { 
background-color:; 
margin-top: 0%; 
margin-left: 0%; 
width: 100%; 




} 
#menu { 
font-size:14px; 
position:absolute; 
} 
#menu ul { 
list-style-type:none; 
list-style-image:none; 
margin:0px; 
padding:0px; 
} 
#menu li.topmenu { 
float:left; 
} 
.topmenu a { 
float: left; 
width:200px; 
text-align:center; 
} 
.topmenu ul{ 
display:none; 
} 
.topmenu a, .submenu a{ 
padding:0px 5px; 
border-collapse:collapse; 
background-color: #C02340; 
color:#400040; 
font-weight:bold; 
text-decoration:none; 
text-align:center; 
background-color:; 
margin:0; 
} 
.submenu a{ 
font-size:12px; 
width:210px; 
position:relative; 
clear:both; /* special IE6 */ 
} 
#menu a:hover, .topmenu.on a { 
color:#FF8000; 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight:500; 
font-size: 90%; 
text-decoration:none; 
color: #FF8000; 
} 




.topmenu:hover ul { 
display:block; 
z-index:500; 
float: none; 
} 
#mainframe { 
background-color: #0000FF ; 
position: relative; 
margin-top: 10%; 
width:100%; 
height: 300px; 
scrollbar-highlight-color: #00FD00; 
border: #0000FF; 
} 
#Bereich-Register-bottom { 
background-color:; 
margin-top: 0px; 
margin-left: 0%; 
width: 100%; 




} 
#menubot { 
font-size:14px; 
position:absolute; 
} 
#menu li.topmenubot { 
float:left; 
} 
.topmenubot a { 
float: left; 
width:200px; 
text-align:center; 
} 




.topmenubot a { 
padding:1px 5px; 
border-collapse:collapse; 
color:#400040; 
font-weight:bold; 
text-decoration:none; 
text-align:center; 
background-color:#E7EADB; 
margin:0; 
} 




#menubot a:hover, .topmenu.on a { 
color:#FF8000; 
font-family: calibri, Arial, Helvetica; 
font-variant: normal; 
font-weight:500; 
font-size: 90%; 
text-decoration:none; 
color: #FF8000; 
} 




.topmenu:hover ul { 
display:block; 
z-index:500; 
float: none; 
} 
#Bereich-Register-bottom-1 { 
background-color:; 
margin-top:4%; 
margin-left: 0%; 
width: 100%; 




}

Alles anzeigen

Textabschnitte in fest definierten iframe per link anscrollen

Jetzt mitmachen!

Teilen