Österreichische Bund

bebop_spinner · 03.04.2005, 01:02

Grüße

ich möchte nun eine seperate HTML-Datei in meine Hauptseite aufrufen.

Hatte mir das so gedacht:
Der Besucher sieht eine Leiste mit verschiedenen Überschriften (sowas wie: Thread 1, Thread 2, Thread 3).
Wenn er nun beispielsweise auf Thread 1 klickt, soll sich unter der Leiste die seperate Seite aufrufen.

Das soll wie gesagt nicht im PopUp geschehen, sondern direkt in der Seite.

So wie es der österreichische Bund auf seiner Internetpräsenzseite macht.

Bin für reine HTML-Lösung dankbar, wäre aber auch nicht abgeneigt, wenn es jemand mit CSS geschafft hat

steffenk · 03.04.2005, 01:09

Auf der Seite wird dynamisch in die Seite geschrieben, unzwar mit JavaScript.
Da wird keine Seite in der Seite geladen

Was Du meinst, ist ein Inline-Frame (iframe)

<iframe src="datei.html" width="400" height="200">

bebop_spinner · 03.04.2005, 02:26

oder eben mit JavaScript

Und wie mache ich das auf Knopfdruck? o.O
d.h. erst wenn ich einen Knopf drücke, wird das Ding geInframed.

Anbei der HTML-Code:

HTML-Code:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

<body>
<img class="x" src="data/rahmen&logo.gif">

<a href="home.html" class="erster"></a>

<a href="bridge_index.html" class="zweiter"></b>

<h1>
<a href="saints_mitglieder.html" class="button" 

id="Mitglieder">Mitglieder</a>
<a href="saints_termine.html" class="button" 

id="Termine">Termine</a>
<a href="saints_ergebnisse.html" class="button" 

id="Ergebnisse">Ergebnisse</a>
<a href="saints_bilder.html" class="button" 

id="Bilder">Bilder</a>
<a href="saints_baseball.html" class="button" 

id="Baseball">ÜberBaseball</a>
<a href="saints_presse.html" class="button" 

id="Presse">Presse</a>
<a href="saints_downloads.html" class="button" 

id="Downloads">Downloads</a>
<a href="saints_links.html" class="button" 

id="Links">Links</a>
<a href="home.html" class="button" id="Home">home</a>
<a href="sitemap.html" class="button" 

id="Sitemap">sitemap</a>
</h1>

<h2 class="margin">Presse</h1>
 <div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current"> Schulmeisterschaft 

2004</a></li>
<li><a href="#">herc-saints</a></li>
<li><a href="#">Saints weiter im Aufwind</a></li>
<li><a href="#">Erfolgreiches Turnier</a></li>
</ul>
</div>

</body>
</html>

und das CSS-Script:

Code:

img.x {
	position:absolute;
	left:0px;
	top:0px;
	width:1008px;
	height:1050px;
	z-index:0	
}

a.zweiter	{	display:block;
			

background-image:url("data/switch_to_bridge.png")

;
			width:60px; height:50px;
			position:absolute;
			left:939px;  top:9px;
			z-index:0	
}

a.zweiter:hover {	

background-image:url("data/switch_to_bridge2.png"

);
			width:53; height:44px;
			position:absolute;
			left:943px;  top:13px;
}

a.button	{	display:block;
			background-color: 

transparent;
			position:absolute;
			text-decoration: none;}

a.button:link, a.button:visited {
	color: #330000;
}
a.button:hover, a.button:active {
	color: #E60000;
}

#Home {left:10px; top:165px;}
#Sitemap {left:10px; top:180px;}
#Mitglieder {left:140px; top:8px;}
#Termine {left:250px; top:8px;}
#Ergebnisse {left:345px; top:8px;}
#Bilder {left:460px; top:8px;}
#Baseball {left:535px; top:8px;}
#Presse {left:670px; top:8px;}
#Downloads {left:760px; top:8px;}
#Links {left:870px; top:8px;}

 #navlist
{
background: #FFCC00;
margin: 10px;
padding: 0px;
height: 16px;
border: 1px solid #FFEA93;

#navlist li
{
display: inline;
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}

#navlist li a:link, #navlist li a:visited
{
font: bold 24px/18px Georgia, "Times New Roman", 

Times, serif;
color: #FFEA93;
text-decoration: none;
display: block;
padding: 0px 0px 0px 5px;
margin: 0px;
height: 17px;
overflow: hidden;
width: 165px;
text-align: center;
}

#navlist li a#current
{
color: #FFFFFF;
font-style: italic;
}

#navlist li a:hover, #navlist li a:active
{
color: #FFFFFF;
text-decoration: none;
background: #CC3333;
text-align: left;
text-transform: uppercase;
font: bold normal 10px/16px "Lucida Sans 

Unicode", verdana, lucida, arial, helvetica, 

sans-serif;
}

steffenk · 03.04.2005, 09:42

Du kannst auf das iframe referenzieren. Dazu musst Du einen Namen vergeben

<iframe name="innen" src="" width="600" height="400">

<a href="Datei.html" target="innen">Zeige in iframe</a>

bebop_spinner · 05.04.2005, 14:50

yo

läuft astrein!

Hier noch mal für alle, die sich dieses Posting durchlesen, der Zusammenhang von Zielpfad ("target") und Einbettungstag ("iframe).

mein HTMLcode:

HTML-Code:

...
<body>
<div>
<h2 class="margin">Presse</h2>
</div>
<div id="navcontainer" style="position:absolute;">
<ul id="navlist">
<li id="active"><a href="data/Presse/Schulmeisterschaft.html" 

target="innen" id="current"> Schulmeisterschaft 2004</a></li>
<li><a href="data/Presse/herc-saints.html" 

target="innen">herc-saints</a></li>
<li><a href="data/Presse/SaintsImAufwind.html" 

target="innen">Saints weiter im Aufwind</a></li>
<li><a href="data/Presse/Erfolgreiches Turnier.html" 

target="innen">Erfolgreiches Turnier</a></li>
</ul>
</div>

<IFRAME src="data/Presse/herc-saints.html" name="innen" 
width="1000" height="768" frameborder="0" scrolling="on" >
</IFRAME>
</body>