nicht angemeldet
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>