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ß´ - 1234567890ß- 1234567890ß- 1234567890ß -<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ürkei (30-18).jpg" alt="Türkisch" title="Türkisch" height="18" width="30" /> </a>
<a href = "russian.htm"> <img src="/HP/images/Russland (30-18).jpg" alt="Ruß" title="Ruß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"> Ü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ü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