dyn. Navigation und dyn. Ebenen aus SELHTML und IE6
0 0 
Felix Riesterer
dyn. Navigation und dyn. Ebenen aus SELHTML und IE6
Hallo,
ich bin immer noch daran, mich in die "Wissenschaft" der CSS-Layer-Gestaltung einzuarbeiten.
Dazu habe ich mal versucht, die dynamische Navigation aus SELFTHLM (vertikal mit aufklappbaren Untermenus) in die mehrspaltige Layout-Seite mit Kopf- und Fusszeile einzubauen.
Ich habe den Code-Bestandteile aus SELFHTML kopiert und dann noch zusammengefügt; er ist am Ende aufgeführt.
Die Darstellung mit IE6 (Bildschirm 800x600) ist korrekt (alle anderen Browser sowieso).
Aber: beim Laden der Seite sind die Untermenus vorerst mal aufgeklappt, erst wenn man mit der Maus auf irgendein menu kommt, setzt die richtige Routine ein (d.h. Untermenüs öffnen sich erst bei Maus über Menü).
Woran kann das liegen? Danke für Hilfe und Erklärungen.
Gruss
Hier der Code - etwas viel ;-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if (sucheUL(LI.firstChild)) {
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
LI = LI.nextSibling;
}
while(LI);
}
function sucheUL(UL) {
do {
if(UL) UL = UL.nextSibling;
if(UL && UL.nodeName == "UL") return UL;
}
while(UL);
return false;
}
function einblenden() {
var UL = sucheUL(this.firstChild);
UL.style.display = "block"; UL.style.backgroundColor = "silver";
}
function ausblenden() {
sucheUL(this.firstChild).style.display = "none";
}
window.onload=hoverIE;
}
</script>
<style type="text/css">
body, p a {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver;
}
html>body h1 {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
ul#Navigation {
float:left;
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 11.6em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0.8em;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0.2em;
border: 1px solid gray;
background-color: #eee;
}
ul#Navigation li {
list-style: none;
margin: 0.4em; padding: 0;
}
ul#Navigation li ul {
margin: 0 0 0 1em; padding: 0;
}
ul#Navigation li ul li {
margin: 0.1em 0;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
ul#Navigation a {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 7.8em; /* Breitenangabe fuer IE 6 */
}
ul#Navigation a:hover {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
/* Erweiterung zur dynamischen Ein-/Ausblendung */
ul#Navigation li>ul {
display: none; top: 1.6em;
}
ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
display: block;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0 0 1.1em; padding: 0;
background-color: #eee; border: 1px dashed silver;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 1em 12em;
padding: 0 1em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 0.9em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
</style>
</head>
<body>
<h1>CSS-basierte Layouts</h1>
<ul id="Navigation">
<li><a href="#Beispiel">Seite 1</a></li>
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
<div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div>
<div id="Inhalt">
<h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
</div>
<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p>
<p><a href="../mehrspaltige.htm#kopf_fuss">zurück</a></p>
</body>
</html>
-
Nachtrag:
Aber: beim Laden der Seite sind die Untermenus vorerst mal aufgeklappt, erst wenn man mit der Maus auf irgendein menu kommt, setzt die richtige Routine ein (d.h. Untermenüs öffnen sich erst bei Maus über Menü).
... und schliessen gleich wieder, wenn man den Menü-button verlässt.
-
Lieber hannes,
Aber: beim Laden der Seite sind die Untermenus vorerst mal aufgeklappt, erst wenn man mit der Maus auf irgendein menu kommt, setzt die richtige Routine ein (d.h. Untermenüs öffnen sich erst bei Maus über Menü).
wenn Du nach erfolgreichem Laden die Menüs nicht zuklappst, dann sind sie alle offen, ist doch klar! Da auch ohne Javascript im IE die Seite sichtbar/nutzbar sein soll, ist dieses Verhalten durchaus erwünscht, denn da könnten ohne JS keine Untermenüs auf- oder zuklappen.
Was Du nun bräuchtest, wäre eine Art Initial-Funktion, die Deine Menüs nach erfolgreichem Laden der Seite alle zusammenfaltet, bis eine Maus gehovert kommt... Im Prinzip ist "hoverIE()" diese Initialisierfunktion und bräuchte nur nach der Zeile "while(LI)" diesen Mechanismus enthalten.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber Felix,
ich verstehe der Idee nach deinen Lösungsansatz. Leider kann ich kein javascript (hab ja die Funktion einfach übernommen und eingebaut).
Was Du nun bräuchtest, wäre eine Art Initial-Funktion, die Deine Menüs nach erfolgreichem Laden der Seite alle zusammenfaltet, bis eine Maus gehovert kommt... Im Prinzip ist "hoverIE()" diese Initialisierfunktion und bräuchte nur nach der Zeile "while(LI)" diesen Mechanismus enthalten.
Wie soll ich also "hoverIE()" nach "while(LI)" einsetzen, wenn "while(LI)" ein Bestandteil von "hoverIE()" ist?
Gruss
-
Hallo,
Ich habe verschiedene "Basteleien" im javascript-code versucht. Ohne Erfolg. Ich verstehe einfach zu wenig davon. Eigentlich möchte ich mich jetzt in CSS-Layout einarbeiten und nicht in javascript.Hat mir jemand die Antwort auf mein Problem?
Gruss
-
Hallo!
function hoverIE() { var LI = document.getElementById("Navigation").firstChild; do { if (sucheUL(LI.firstChild)) { LI.onmouseover=einblenden; LI.onmouseout=ausblenden; } LI = LI.nextSibling; } while(LI); // Hier muss der Codeteil sein, der die Menüs wieder versteckt }Weise hier* eine ID zu und greife per document.getElementByID() darauf zu. Dann gibst du der Liste einfach die CSS-Eigenschaft display:none.
<ul id="Navigation"> <li><a href="#Beispiel">Seite 1</a></li> <li><a href="#Beispiel">Seite 2</a> <ul id="submenu"> <!--* Hier musst du dem Submenü eine ID zuweisen, z.B. submenu oder bla oder irgendwas halt ;-) --> <li><a href="#Beispiel">Seite 2a</a></li> <li><a href="#Beispiel">Seite 2b</a></li> <li><a href="#Beispiel">Seite 2c</a></li> </ul> </li> <li><a href="#Beispiel">Seite 3</a></li> <li><a href="#Beispiel">Seite 4</a></li> </ul>ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)-
Hallo wucher wichtel,
Ich habe das jetzt so gelöst.
1)Funktioniert aber nicht.
2)Wieso funktioniert das Originalbeispiel von SelfHTML ohne javascript-Änderung?Gruss
-
Hallo!
1)Funktioniert aber nicht.
"Funktioniert nicht" ist keine Fehlerbeschreibung. Wir brauchen ein Beispiel (Quelltext oder Link) und die Fehlermeldungen der Javascript-Konsole.
2)Wieso funktioniert das Originalbeispiel von SelfHTML ohne javascript-Änderung?
Das Menü funktioniert in meinem IE 6 nicht richtig. Allerdings auch ohne Javascript :-)
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)-
Hallo!
Das Menü funktioniert in meinem IE 6 nicht richtig. Allerdings auch ohne Javascript :-)
Ich habe gerade gesehen, dass du gar nicht dieses Beispiel meinst. Allerdings ist es egal, ob die Navigation vertikal oder horizontal ist. BTW: Welches meinst du eigentlich? Könntest du darauf bitte verlinken? Ich habe auf Anhieb nicht das richtige gefunden.
Zeige uns einfach mal deine JS-Funktion.
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:) -
Hallo ww
"Funktioniert nicht" ist keine Fehlerbeschreibung. Wir brauchen ein Beispiel (Quelltext oder Link) und die Fehlermeldungen der Javascript-Konsole.
sorry, ich hatte vergessen, den code beizufügen. Hier ist er:
if (document.getElementById("submenu") { display = "none"; }2)Wieso funktioniert das Originalbeispiel von SelfHTML ohne javascript-Änderung?
Es geht um die Seite 'selthtml811/css/layouts/anzeige/nav_javascript.htm'
Diese Seite funktioniert einwandfrei mit IE6.Gruss
-
Hallo!
sorry, ich hatte vergessen, den code beizufügen. Hier ist er:
if (document.getElementById("submenu") {
display = "none";
}Mit einer if-Abfrage formuliert man Bedingungen. Du hast aber keine Bedingung formuliert. Also brauchst du hier auch keine if-Abfrage. Außerdem weiß JavaScript nicht, was du mit `display = "none";`{:.language-javascript} meinst. Weil du hast ihm nicht gesagt, welches Element du meinst. Richtig sieht es so aus: ~~~javascript document.getElementById("submenu").style.display = "none";Diese Zeile fügst du nach
while(LI);ein. Dann klappt es.Es geht um die Seite http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm
Diese Seite funktioniert einwandfrei mit IE6.Bist du dir sicher? Ich habe gerade keinen IE6 zur Verfügung. Aber es enthält Javascript-Code. Eben der, der bei dir auch steht. Entferne diesen Code und probiere es im IE6 aus. Dann wirst du sehen, ob es ohne JS auch geht.
ciao, ww
--
sh:( fo:| ch:~ rl:( br:> n4:~ ie:% mo:) va:) de:] zu:) fl:( ss:| ls:~ js:)
-
-
-
-
-
hi,
Ich habe verschiedene "Basteleien" im javascript-code versucht. Ohne Erfolg. Ich verstehe einfach zu wenig davon. Eigentlich möchte ich mich jetzt in CSS-Layout einarbeiten und nicht in javascript.
Dann mach das doch.
Lerne mit CSS umzugehen, und teste dabei in vernünftigen Browsern.
Spielereien wie "dynamische" Menüs auch für den IE per Javascript "funktionsfähig" zu bekommen, ist eine Aufgabe, die du auch später noch angehen kannst.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-