• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

referenzierung des link über target funktion in einen iframe

F

FritzvK

Neues Mitglied
ich möchte in einem fest definierten iframe per link klick (Link leiste mit dropdownmenue befindet sich direkt oberhalb dieses iframe) verankerte textabschnitte in den sichtbaren iframe bereich scrollen. Ein frameset habe ich nicht installiert.

die einzelnen Layout abschnitte sind in css definiert. ich bekomme zwar den Urtext in das iframe kann aber die a href Anker verlinkung mit der target funktion nicht dazu bringen den text im iframe anzuzeigen - stattdessen geht ein neues fenster auf.
 
Zeig doch mal deinen Quellcode. Ich vermute Du hast das target-Attribut und/oder iframe falsch geschrieben.
 
threadi schrieb:
Zeig doch mal deinen Quellcode. Ich vermute Du hast das target-Attribut und/oder iframe falsch geschrieben.
Zum Vergrößern anklicken....
hier der html code


<!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 (www.scriptly.de)"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>



<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:[email protected]"> 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:[email protected]"> [email protected]</a> - 1212212121 121212121212</a>

</h6>

</div>

</body>
</html>
 
hier der css code:

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: none;
margin-top: 90%;
width: 100%;
padding: 0% 0% ;
position: relative;
left: 0%;
Top: -0%;
}



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:#FF0000;
margin-top: 0%;
margin-left: 0%;
width: 100%;


}
#menu {

margin-top: 0%;
margin-left: 0%;
width: 100%;
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: #E7EADB;
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: ;

margin-top: 5%;
width:100%;
height: 300px;
scrollbar-highlight-color: #00FD00;
border: #0000FF;

}

#Bereich-Register-bottom {

background-color:;
margin-top: 5%;
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%;


}
 
Bitte verwende künftige Code-Tags wenn Du Quellcode im Forum postest.

In deinem Quellcode ist kein iframe enthalten. Da die Links das target-Attribut haben findet der Browser das Ziel nicht und öffnet (zumindest im Fall deines Browsers) ein neues Fensters.

Ich hab die Vermutung, dass Du gar nicht mit iframes arbeiten willst (was auch gut wäre) sondern, dass Du den Inhalt vom Element mit der ID mainframe einfach nur austauschen willst? Wenn das so ist, dann suchst Du nach der JavaScript-Technik AJAX. Mit HTML alleine kannst Du das nicht bewerkstelligen.
 
ahso.
stimmt ich hatte die iframe codierung - weils nicht klappte - herausgenommen.
kann ich den mittels javascripts ein fenster exakt da wo ich es haben will dauerhaft postionieren und mittels meiner links textmarken darin ansteuern sowie benutzer selbst scrollen lassen?
 
Positionierung und Aussehen regelt man per CSS, nicht per JavaScript. Mit JavaScript kannst Du lediglich die Inhalte per Klick austauschen.
 
abgesehén von der Positionierung, geht damit die Textabschnittsweise Ansteuerung sowie die Besucher "scroll durch den Text" Variante?
 
sorry wenn ich noch mal bohre - wenn meine hp aufgerufen wird, dann sieht man im mainframe bereich den Anfangsabschnitt meines Langtextes. klickt der Besucher auf einen link im dropdownmenu soll der entsprechend verankerte textabschnitt im mainframe angezeigt werden und es besteht gleichzeitig die möglichkeit innerhalb des mainframes im text durch zu scrollen - ist das mit javascript möglich?
 
Nochmal: Das der Bereich in der Höhe beschränkt und scrollbar ist, erreichst Du per CSS. Das der Besucher per Klick zu einem bestimmten Abschnitt scrollen kann per JavaScript.
 
Beispiel mit CSS, aber nur für fixe Layouts.
HTML: 
<!DOCTYPE html>
<html>
<head>
  
<title> :target</title>
<meta charset="utf-8">
<style>

ul {
margin:10px;
padding:0;
}

li {
float:left;
list-style:none;
margin-right:5px;
}

li a {
position:relative;
display:block;
border:1px solid #000;
border-bottom:none;
padding:5px;
}

li a:focus {
background:#eee;
}
#tab {
margin:10px;
height:140px;
width:400px;
border:1px solid #000;
overflow:hidden;
position:relative;
background:#fff;
clear:left;
}

#tab p {
margin:0;
padding:0;
height:140px;
}

#tab span {
display:block;
background:#fff;
padding:10px;
}

#tab b {
display:none;
}


#tab b:target ~ span{
  position:absolute;
left:0;
top:0px;

}



</style>

</head>
<body>

<ul>
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>

<div id="tab">
<p><b id="t1"></b><span>Absatz eins.<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus parturient <br>Ende Teil 1<span></p>
<p><b id="t2"></b><span>Absatz zwei.<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus parturient <br>Ende Teil 2<span></p>
<p><b id="t3"></b><span>Absatz drei.<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus parturient <br>Ende Teil 3<span></p>
</div>

</body>
</html>

[html]
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben