nicht angemeldet
Stylesheet bleibt wirkungslos
Gunnar Bittersmann
MudGuard``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
Man muss nicht alles wissen.
Man muss nur wissen, wo's steht
Albert Einstein
-
Hallo,
ein minimales Online-Beispiel, das den Fehler reproduziert, wäre hilfreich. So ist es sehr schwer, den Code zu durchblicken oder auszuprobieren.
Z.B. mit http://jsfiddle.net oder http://codepen.io.
<link href="basis.css" rel="stylesheet" media="all" type="text/css charset=utf-8">
Du meinst wahrscheinlich
type="text/css; charset=utf-8"Ich wüsste nicht, dass ein Browser die charset-Angabe hier beachtet. Wahrscheinlich stört sich eher ein Browser daran.
Besser: type="text/css"
Noch besser: Typangabe weglassen. text/css ist der Standard-MIME-Typ für Stylesheets.
Wobei das nicht der ausschlaggebende Fehler zu sein scheint, an der anderen Stelle ist das ja richtig.
ul {…}
li {…}
li a {…}
li li a {…}Wenn du den Code auf vielen Seiten verwenden willst, sollten die Selektoren etwas spezifischer sein. Sonst formatierst du ja sämtliche ul- und li-Element auf der Seite.
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.
Was ist das für ein Editor? Welche IE- und Firefox-Version verwendest du?
Mathias
-
@@molily:
nuqneH
type="text/css; charset=utf-8"
Ich wüsste nicht, dass ein Browser die charset-Angabe hier beachtet. Wahrscheinlich stört sich eher ein Browser daran.
Firefox nicht, Chrome nicht, Safari nicht. Virtuelle Maschine fahr ich jetzt nicht hoch, IE überlass ich anderen.
Chrome und Safari stören sich auch nicht am fehlenden Semikolon; Firefox bestaft ein link-Element vom Typ "text/css charset=utf-8" jedoch durch Nichtachtung.
BTW, der Artikel Angabe der Zeichencodierung in CSS wird gerade überarbeitet. Die deutsche Übersetzung auch. (Anmerkungen willkommen.)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Hi Matthias
ein minimales Online-Beispiel, das den Fehler reproduziert, wäre hilfreich. So ist es sehr schwer, den Code zu durchblicken oder auszuprobieren.
Z.B. mit http://jsfiddle.net oder http://codepen.io.
Danke für die Links. Ich werde mir wohl Codepen etwas genauer ansehen, auch wenn meine Englischkenntnisse eher (sehr) bescheiden sind.
<link href="basis.css" rel="stylesheet" media="all" type="text/css charset=utf-8">
Tja, da hab ich selbst einiges Chaos veranstaltet. Das Original aus dem Buchbeispiel beginnt mit diesem Kopf:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS-Flyout-Menü</title>
<link href="basis.css" rel="stylesheet" media="all" type="text/css">Wobei das nicht der ausschlaggebende Fehler zu sein scheint, an der anderen Stelle ist das ja richtig.
ul {…}
li {…}
li a {…}
li li a {…}Wenn du den Code auf vielen Seiten verwenden willst, sollten die Selektoren etwas spezifischer sein. Sonst formatierst du ja sämtliche ul- und li-Element auf der Seite.
Wenn mir etwas Schwierigkeiten bereitet(e), dann die Kombinierten Selektoren li, li li, li li a etc., denn was ist eigentlich was? Das hab ich erstmal durch meine beiden Klassen .submunue und .flyoutmenue einigermassen erfolgreich zu entschärfen versucht.
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.
Was ist das für ein Editor? Welche IE- und Firefox-Version verwendest du?
Das ist der QuellCode-Editor meiner DelphiXE4-IDE (Integrated Developer Envirnment), vergleichbar etwa mit Synedit. So quasi das Gegenstück ist der Designer, der die graphische Oberfläche - auch HTML-Dateien - zur Entwurfszeit darstellt. Damit ist es möglich, die graphische Oberfläche einer Anwendung per Drag&Drop 'zusammenzuschieben', auch in HTML. Letzteres funktioniert allerdings eher schlecht als recht.
FireFox ist seit heute Abend Version28.0, der IE ist 11.04.
Gruss
Delbor--
Man muss nicht alles wissen.
Man muss nur wissen, wo's steht
Albert Einstein
-
-
Hi,
> 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; > }In diesem Teil fehlt ein Doppelpunkt zwischen Eigenschaft und Wert.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi zusammen>
Der Fehler hat mich gefunden:
ul, li {
margin: 0;
padding: 0;
} <<<<== Diese Klammer hat ist dem Copy&Paste zum Opfer gefallen
#mainnavigation {
width: 24em;
.......
}Nachdem ich die bezeichnete Klammer eingefügt hatte, war alles soweit ok - ausser einigen Massen, die angepasst werden müssen.
Bei obigen Zeilen handelt es sich um die ersten Anweisungen in meiner separaten CSS-Datei.
Da ich obigen Code aus der Originaldatei gepostet habe, fiel die fehlende Klammer in der angelegten CSS-Datei nicht sofort auf.Gruss
Delbor--
Man muss nicht alles wissen.
Man muss nur wissen, wo's steht
Albert Einstein-
@@Delbor:
nuqneH
Da ich obigen Code aus der Originaldatei gepostet habe, fiel die fehlende Klammer in der angelegten CSS-Datei nicht sofort auf.
Dem Validator wäre sie sofort aufgefallen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-