nicht angemeldet
``Hi zusammen
Ich bin ziemlich neu in css - eigentlich komme ich aus der Delphi-Ecke(Objektpascal). Zu meinem aktuellen Projekt gehört aber auch eine Website, und da balge ich mich gerade mit einem aufklappbaren Menue herum.
Doch erstmal mein Stylesheet, wie es in eine HTML--Seite eingebunden ist:
<head>
<title>Erster Listentest</title>
<meta http-equiv="Content-Type" content="text/html">
<link href="basis.css" rel="stylesheet" media="all" type="text/css charset=utf-8">
<style>
ul, li {
margin: 0;
padding: 0;
}
#mainnavigation {
width: 24em; /* positioniert die MenueBox position: absolute; */
float: left;
left:5px;
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
padding: 10px; /*float: left; position: relative; #mainlist*/
border: 2px solid red;
}
ul#mainmenue {
list-style-type: none;
width: 14em;
margin: 5px;
padding: 0px;
border: 2px solid maroon; /*#000; display:block;position: relative;*/
background-color: none;
}
ul {
list-style-type: none;
width: 126px;
border: 1px solid #000;
border-bottom: 1px solid red; /*none; Färbt die Unterkante aller Listen rot;*/
}
li {
display: block;
margin: 1px;
background-color: none; /*#FBAF5D;Färbt alle Listitems hellblau (Mousemove)*/
} /*border-bottom: 1px solid aqua#000; */
li a {
width: 14em;
height: 1em; /* padding: 5px;*/
display: block;
color: yellow;
padding: 3px;
padding-left: 0px;
text-decoration: none;
font-size: 14px;
font-Style: italic;
font-weight: bold;
border: none; /*1px solid fuchsia; */
}
li li a {
display: block; /*2.Ebene (Submenue-item);*/
width 19em; /*background-color: aqua;*/
border: 2px solid olive; /*1px solid fuchsia; background-color: aqua;*/
background-color: fuchsia;
}
.submenue {
width: 15em; /*background-color: aqua; display: block;*/
list-style-type: none;
margin: 0px;
padding: 0px;
padding-left: 12px;
border: 1px; solid silver; /*#000;*/
}
.Flyoutmenue { /* definiert das Flyoutmenue in "eingeklapptem Zustand display: block;*/
list-style-type: none;
position: absolute;
left: -399px;/*200px;*/
color: aqua;
width: 17em; /*left:70em; aus dem Flyoutmenue-Beispiel von Kai Loberenz */
margin: 1px;
padding: 0px; /* Flout:left ordnet nachfolgende elemente rechts neben diesem Element an. */
}
li li:hover ul.Flyoutmenue { /* Lässt das Flyoutmenue beim Hovern */
position: absolute; /* der zweiten Ebene rechts erscheinen; */
margin-top: -2px; /* */
left:5em;
background-color: yellow;
border: 1px solid olive;;
border-top: 2px solid lime;
width: 19em; /* wirkt sich auf die Liste des Flyoutmenues aus (das ul-Element) */
}
ul.submenue a:hover { /* wirkt sich auf Layer2 aus*/
color: white;
background-color: fuchsia;
}
li li ul.Flyoutmenue a { /* wirkt sich auf Layer3, */
color: white; /* das ausgeklaapte Menue, aus*/
background-color: maroon;
margin: 0px;
width: 20em; /*display: inline;*/
}
li li ul.Flyoutmenue a:hover { /* wirkt sich auf Layer3, */
color: white; /* das ausgeklaapte Menue, aus*/
background-color: blue;
margin: 0px;
width: 20em;
}
li li li a:hover {
color: white; /* das ausgeklaapte Menue, aus*/
background-color: red;
margin: 0px;
width: 17em;
}
</style>
</head>
<body>/* */ <!--Hier beginnt die HTML-Seite -->
<div id="header">
<h1>Zweiter Listentest - mit CSS gestylt</h1>
</div>...
Den HTML-Code spare ich mir vorerst - später kann der noch wesentlich sein.
Ich wollte nun diesen Code in eine eigene Datei auslagern, so dass ich auf mehreren Seiten Menues mit dem selben Stylesheet einbinden kann.
Dazu habe ich die Seite, auf der es erstmal eingefügt werden soll, wie folgt ergänzt:
<html>
<head>
<title>Delbor - Home</title>
<!-- <link rel="stylesheet" type="text/css" href="basis.css"/"charset=utf-8"/>-->
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css" href="DelborMainSheet.css" />
<link rel="stylesheet" type="text/css" href="LeftSideMenue.css" />
</head>
Die Seite war mein erster Test in HTML/CSS, daher der Verweis auf "DelborMainsheet.css". Das Stylesheet unterteilt die Seite in drei Spalten, einen Header mit Logo und einen Footer. Der Inhalt selbst ist Teil einer Fotogalerie und gibt entsprechend einige Bilder aus.
LeftSideMenue.css ist die Datei, in die ich obigen CSS-Code kopiert habe.
Übrigens - die ganzen Farbanweisungen im CSS dienen ausschliesslich meiner Orientierung; im Endeffekt sollen weder Listen noch items (ul- und li-Elemente) einen Rahmen und eine Hintergrundfarbe haben. Höchstens allenfalls den Hintergrund als Grafik, falls das mit Transparenz nicht realisierbar ist.
Nun ja - der Effekt ist: das Menue wird mir ausgegeben. Es ist auch da, wo ich es haben will. Die Liste ist auch ohne Bullets (Liststyletype:none), wie es das Stylesheet vorsieht. Nur sind die Submenues nicht eingerückt, und das Flyoutmenue ist auch nicht aus dem Bildschirm geschoben.
Der HTML-Code:
</div> <!-- -->
<div id="header"> <img alt="DelborPunktCH" src="Delbor_9_5.jpg" />
</div>
<div id="Leftcol">
<div id="mainnavigation"> <!-- -->
<ul id="mainmenue">
<li><a href="#">EisenBahnen</a>
<ul class="submenue">
<!-- *************************************************************************** -->
<li><a href="#">Normalspurbahnen</a>
<ul class="Flyoutmenue">
<li><a href="#">Gotthardgiganten</a></li>
<li><a href="#">Französischer Dampf am Gotthard</a></li>
</ul>
</li>
<!-- *************************************************************************** -->
<li><a href="#">Schmalspurbahnen</a>
<ul class="Flyoutmenue">
<li><a href="#">100 Jahre Säntisbahn</a></li>
<li><a href="#">Das Juwel vom Waldenburgertal</a></li>
</ul>
</li>
<!-- *************************************************************************** -->
<li><a href="#">Berg- und Zahnradbahnen</a>
<ul class="Flyoutmenue">
<li><a href="#">Die Rigibahn</a></li>
<li><a href="#">Rosa und die RHB</a></li>
</ul>
</li>
<!-- *************************************************************************** -->
</ul>
</li> <!-- Submenue -UL -->
<li><a href="#">Programmieren mit Delphi</a></li>
</ul> <!-- *Mainmenue - UL* -->
</div>
</div>
Der verwendete Editor - der zu meiner IDE gehörende - zeigt mir das Menue zwar nahezu korrekt an, Der IE und der Fuchs verstehen aber statt css diesmal nur Bahnhof.
In meiner Übungs-HTML-Seite waren die Stylesheets in Style-Tags eingebettet, und da sieht das Menue - bis auf die Farben - so aus, wie es am Schluss aussehen soll.
Was ist hier falsch? Für eure Antworten schonmal vielen Dank!
Gruss
Delbor
Man muss nicht alles wissen.
Man muss nur wissen, wo's steht
Albert Einstein
Gunnar Bittersmann
MudGuard