Frame in CSS Body integrieren?

Status
Nicht offen für weitere Antworten.
Danke.. aber machs mir doch nicht so schwer...
Kenn mich doch nicht mit Java und CSS aus.

Wo muss ich das einfügen?
und welcher Tag muss davor?..

DANKE
 
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.

  • HTML (index2.html):
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>&nbsp;</h1>
                        <h2>&nbsp;</h2>

                </div>
                <div id="headimg">&nbsp;</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>
  • CSS (global.css):
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
 
Deiner zweiten weiteren Frage kann ich nicht so recht folgen. Welche gleiche Höhe von welchem Bild oben?
Vielleicht geht es dir ja um die derzeit verschobene vertikale Flucht zwischen dem Block #headimg und dem iFrame.

HTML:
<iframe width="910" height="600" align="left" name="frame" src="willkommen.html">
CSS:
#content {
display:inline;
float:right;
margin-left:0;
margin-right:10px;
margin-top:0;
padding-bottom:0;
width:910px;
}
Und wo ist das Problem bei Frage Nr. 3? Wie sich ein Fenster (iFrame) bilden lässt, hast du bereits gelernt.
Zu deiner dritten Frage könnte möglicherweise mein Webmaster-FAQ-Artikel CSS Wie richte ich eine Box am unteren Rand der Elternbox aus? behilflich sein.

mfg Maik
 
Danke für die super Hilfe,

bin schon weiter gekommen wie man sehen kann.

Letzte Fragen:

1) Warum werden die Umlaute z.B. im Firefox nicht richtig angezeigt? Was muss ich verändern?

2) Gibt es noch einen Tipp, dass sich die Seite entsprechend der jeweiligen Bildschirmauflösung / Browser-fenstergröße anpasst?

Danke und schönes WE!
 

Das hängt auch hiermit zusammen:
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">
Das Dokument ist zwar UTF8-kodiert gespeichert, als Zeichensatz gibst du drei Zeilen tiefer aber etwas anderes an:
HTML:
<meta http-equiv="Content-Type" text/html; charset=iso-8859-15" />
In dieser Zeile existiert zudem ein Syntax-Fehler, denn richtig lautet sie so:
HTML:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">



Wenn sich die Seite der Fenstergröße angleichen soll, müssten alle derzeit absoluten Breiten-/Höhenangaben in relative umgewandelt werden.

mfg Maik
 
Hallo,

das nächste Problem taucht auf *g*

Es sieht aber immer besser aus...

http://www.blv-kreis-wolfach.de/index2.html

Wenn ich im Register HOME bin, dann ist es grau hinterlegt, sobald ich aber innerhalb des Subnavis wechseln (z.b. auf Veranstaltungen), dann ist HOME oben nicht mehr als "selected" markiert.
1) Was muss ich hier ändern, damit das bestehen bleibt=

Wenn ich die Seite aufrufe, dann werden im BODY-Fenster die Umlaute nicht richtig dargestellt. Klicke ich dann unter HOME auf "Startseite" erscheint die gleiche Seite im BODY - allerdings werden dann die Umlaute korrekt angezeigt...
2)Was muss ich ändern, dass sie von Anfang an korrekt dargestellt werden?

DANKE
und schönen Sonntag
 
Wenn ich im Register HOME bin, dann ist es grau hinterlegt, sobald ich aber innerhalb des Subnavis wechseln (z.b. auf Veranstaltungen), dann ist HOME oben nicht mehr als "selected" markiert.
1) Was muss ich hier ändern, damit das bestehen bleibt=
Wie soll das denn funktionieren? :suspekt:

Wenn ich von "Home" (willkommen.html) auf "Veranstaltungen" (2009/bahneroeffnung05042009.html) wechsle, befinde ich mich doch überhaupt nicht mehr auf der "Startseite".

Stattdessen solltest du mal die beiden Syntax-Fehler im CSS-Code bzgl. der Subnavi-Links beheben, denn keiner der Subnavi-Links reagiert drezeit darauf, was sich im iFrame abspielt, wenn sie geklickt werden, und wenn beispielsweise im iFrame "willkommen.html" geladen ist, sollte auch in beiden Menüs der Link "Home" u. "Startseite" hervorgehoben sein.

Wenn ich die Seite aufrufe, dann werden im BODY-Fenster die Umlaute nicht richtig dargestellt. Klicke ich dann unter HOME auf "Startseite" erscheint die gleiche Seite im BODY - allerdings werden dann die Umlaute korrekt angezeigt...
Bei mir werden die Umlaute über den von dir beschriebenen Weg dennoch nicht korrekt angezeigt.

Im Dokument "index.html" hast du das Problem doch offensichtlich auch in den Griff bekommen.

mfg Maik
 
Stattdessen solltest du mal die beiden Syntax-Fehler im CSS-Code bzgl. der Subnavi-Links beheben, denn keiner der Subnavi-Links reagiert drezeit darauf, was sich im iFrame abspielt, wenn sie geklickt werden, und wenn beispielsweise im iFrame "willkommen.html" geladen ist, sollte auch in beiden Menüs der Link "Home" u. "Startseite" hervorgehoben sein.

JA, genau. Das war meine Frage. Sorry, falls ich mich viell etwas missverständlich ausgedrückt habe.... Und wie behebe ich den Syntax-Fehler? Wo und wie=

Im Dokument "index.html" hast du das Problem doch offensichtlich auch in den Griff bekommen.

Ja, irgendwie schon. Aber nur weil das Problem nie da war, sondern weil es auf Anhieb funktioniert hat. Woran liegt es diesmal...?

Viele Grüße
 
Code:
#subnavi ul li a.norm:hover {
	font familiy:Verdana, sans-serif;
	font-size:12px;
	color=#FFDBA3;
	text-decoration:underline;
	padding-left:1px
}

}
CSS:
#subnavi ul li a.norm:hover {
	font familiy:Verdana, sans-serif;
	font-size:12px;
	color:#FFDBA3;
	text-decoration:underline;
	padding-left:1px
}

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück