Moin,
kommen wir mal auf die Navigation zurück, und wie die Codeschnipsel in die Seite implementiert gehören.
Dieses Javascript tauscht im geklickten Link zwei CSS-Klassen gegeneinander aus - bei ihrer Namensgebung hab ich mich mal an den Hintergrundbildnamen orientiert: "
norm" und "
selected".
Die schon existierende CSS-Klasse "
selected" für das
<li>-Element entfällt somit im HTML- und CSS-Code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" text/html; charset=iso-8859-15" />
<title>Northdike - Free Template</title>
<style type="text/css" media="all">
@import "global.css";
</style>
<script type="text/javascript">
function aktivieren(strHref)
{
if(document.getElementById)
{
for(i=0;i<document.links.length;++i)
{
if(String(document.links[i].className).match(/^(norm|selected)$/))
{
document.links[i].className=(document.links[i].href==strHref)?'selected':'norm';
}
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logobox">
<h1> </h1>
<h2> </h2>
</div>
<div id="headimg"> </div>
</div>
<div id="topnavi">
<div class="spacing1">
<ul>
<li><a href="willkommen.html" target="frame" onclick="aktivieren(this.href)" class="selected">Home</a></li>
<li><a href="termine.html" target="frame" onclick="aktivieren(this.href)" class="norm">Termine</a></li>
<li><a href="ergebnisse2009.html" target="frame" onclick="aktivieren(this.href)" class="norm">Ergebnisse</a></li>
<li><a href="2009.html" target="frame" onclick="aktivieren(this.href)" class="norm">Veranstaltungen</a></li>
<li><a href="#" target="frame" onclick="aktivieren(this.href)" class="norm">Bestenliste</a></li>
<li><a href="#" target="frame" onclick="aktivieren(this.href)" class="norm">Kreisinfos</a></li>
<li><a href="vereine.html" target="frame" onclick="aktivieren(this.href)" class="norm">Vereine</a></li>
</ul>
</div>
</div>
<div id="bodybox">
<div id="subnavi">
<ul>
<li><a href="willkommen.html" target="frame" onclick="aktivieren(this.href)" class="selected">» Startseite</a></li>
<li><a href="2009/bahneroeffnung05042009.html" target="frame" onclick="aktivieren(this.href)" class="norm">» Veranstaltungen</a></li>
<li><a href="2009/termine2009.html" target="frame" onclick="aktivieren(this.href)" class="norm">» Termine</a></li>
<li><a href="2009.html" target="frame" onclick="aktivieren(this.href)" class="norm">» Sponsoren</a></li>
<li><a href="http://www.gb-x.de/gbuch.php?forum_id=70534" title="item" target="frame" onclick="aktivieren(this.href)" class="norm">» Gästebuch</a></li>
<li><a href="links.html" target="frame" onclick="aktivieren(this.href)" class="norm">» Links</a></li>
<li><a href="impressum.html" target="frame" onclick="aktivieren(this.href)" class="norm">» Impressum</a></li>
<font face=arial size=1>
<p>Wie sieht aus? kann ich da noch was schreiben? Auch ohne diesen enormen Zeilenabstand? Wo verändere ich den denn?
<p>Aktuell: Armbruster holen Titel!
</font>
</ul>
</div>
<div id="content">
<p><strong>
<iframe src="willkommen.html" name="frame" width="916" height="600"
align="left">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>
</p>
</div>
</div>
<div id="footer">
<p>Copyright 2009 www.blv-kreis-wolfach.de. Webmaster: Stefan Hättich, TV-Haslach | powered by <a href="http://www.filmmomente.de" target="_new">FILMmomente.de</a></p>
</div>
</div>
</body>
</html>
Code:
#topnavi ul li {
float:left;
height:28px;
/*background-image:url('img/button_topnavi_norm.jpg');
background-repeat:no-repeat;*/ /* Regelblock auskommentiert = deaktiviert */
line-height:28px;
}
/* Achtung: Die existierende Klasse "li.selected" für das <li>-Element entfällt in diesen Selektoren */
#topnavi ul li {
float:left;
height:28px;
/*background-image:url('img/button_topnavi_selected.jpg');
background-repeat:no-repeat;*/ /* Regelblock auskommentiert = deaktiviert */
line-height:28px;
}
#topnavi ul li a {
line-height:28px;
color:#8d8d8d;
font-size:12px;
font-weight:bold;
font-family:Verdana, sans-serif;
text-decoration:none;
padding-left:28px;
padding-right:26px;
float:left;
}
#topnavi ul li a:hover {
/*line-height:28px;*/ /* Regel braucht nicht wiederholt werden */
color:#757575;
/*font-size:12px;
font-weight:bold;
font-family:Verdana, sans-serif;*/ /* Regelblock braucht nicht wiederholt werden */
text-decoration:underline;
/*padding-left:28px;
padding-right:26px;*/ /* Regelblock braucht nicht wiederholt werden */
}
#topnavi ul li a.norm {
background-image:url('img/button_topnavi_norm.jpg');
background-repeat:no-repeat;
}
#topnavi ul li a.selected {
background-image:url('img/button_topnavi_selected.jpg');
background-repeat:no-repeat;
}
...
#subnavi ul li a.norm {
font-family:Verdana, sans-serif;
font-size:12px;
color:#8d8d8d;
text-decoration:none;
padding-left:10px;
}
#subnavi ul li a.norm:hover {
/*font-family:Verdana, sans-serif;
font-size:12px;
color:#8d8d8d;*/ /* Regelblock braucht nicht wiederholt werden */
text-decoration:underline;
/*padding-left:10px;*/ /* Regel braucht nicht wiederholt werden */
}
#subnavi ul li a.selected {
font-family:Verdana, sans-serif;
font-size:12px;
color:#c1d000;
text-decoration:none;
padding-left:10px;
}
#subnavi ul li a.selected:hover {
/*font-family:Verdana, sans-serif;
font-size:12px;
color:#c1d000;*/ /* Regelblock braucht nicht wiederholt werden */
text-decoration:underline;
padding-left:10px;*/ /* Regel braucht nicht wiederholt werden */
}
Deiner zweiten weiteren Frage kann ich gerade nicht so recht folgen. Welche gleiche Höhe von welchem Bild oben?
Und wo ist das Problem bei Frage Nr. 3? Wie sich ein Fenster (iFrame) bilden lässt, hast du bereits gelernt.
Mir ist da aber noch etwas Wichtiges aufgefallen. Du hast in deinem UTF-8-Dokument ein
Byte Order Mark vorliegen:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
den es zu beheben gilt, da die komplette IE-Familie durch diese Syntax vor der Doctype-Deklaration in den unvorteilhaften Darstellungsmodi "Quirksmode" schaltet.
Kleine Anmerkung zum Schluß.
Dein Kenntnisstand in den einzelnen Sprachen ist bzw. war mir nicht bekannt. Ich hab angenommen bzw. vorausgesetzt, dass du mit meinen Codeangaben etwas anzufangen weißt.
Wenn du deine Seite modernisieren möchtest, dich aber mit JS und CSS nicht auskennst, solltest du dir zur Umsetzung deines Vorhabens gewisse Grundkenntnisse in diesen Sprachen aneignen (z.B. wie diese beiden Sprachen in HTML eingebunden werden), denn es ist nicht die Aufgabe eines Forums, Basiswissen zu vermitteln.
SELFHTML ist hier das zu empfehlende Nachschlagewerk.
mfg Maik