nicht angemeldet
Separate Navigation (menu) mittels Button
0 
Matthias Apsel
0 0 
Der Martin
0 0 0 
Camping_RIDER
1 Camping_RIDER
Separate Navigation (menu) mittels Button
Ich betreibe eine web site, für die es je eine Version für grosse und kleine Bildschirme gibt (PC und Smartphones). Die Versionen werden durch zwei verschiedene CSS gesteuert. Die Wahl des zutreffenden CSS wird durch die Bildschirm-Grösse bestimmt (max-width, resp. min-width).
Die Seite für kleine Bildschirme ist wie folgt organisiert:
<body id="index">
<div id="wrap">
<div id="header">
<?php include ("kopflogo.php") ?>
</div>
In der Datei "kopflogo" sind der Titel der web site, der link auf das Menu (menumobile.php) und eine kleine Button-Grafik (menubutton.png), mit der man den link auf das Menu aufruft, integriert. Die Klasse "mobile" schliesst diesen Seitenkopf von der Darstellung auf grossen Bildschirmen aus. Für diese gibt es eine andere Version. Der Code:
<body id="kopflogo">
<div class="mobile"><a href="menumobile.php"> <img id="menubutton" class="mobile" src="images/menubutton.png" width="30px" alt="button"></a>
<h1 id="seitentitel">Titel der Seite </h1>
</div>
</body>
Die einzelnen Menuzeilen sollen farbig unterlegt werden. Dazu haben sie eine Klasse:
<li class="color1" > <a href="index.php">Startseite</a> </li>
Im CSS bestimme ich die Farbe:
#menumobile .color1 {
background:#ff9999;
border-top: 1px solid #ff9999;
}
Problem: Das bewirkt nichts. Offensichtlich spricht das CSS die Klasse nicht an.
Danke für einen Rat.
Kurt
-
Om nah hoo pez nyeetz, Kurt4419!
Die einzelnen Menuzeilen sollen farbig unterlegt werden. Dazu haben sie eine Klasse:
<li class="color1" > <a href="index.php">Startseite</a> </li>
> > Im CSS bestimme ich die Farbe: > > ~~~css #menumobile .color1 { > background:#ff9999; > border-top: 1px solid #ff9999; > }Problem: Das bewirkt nichts. Offensichtlich spricht das CSS die Klasse nicht an.
Ich sehe zwar eine Klasse color1, kann dem Codeschnipsel aber nicht entnehmen, ob sich das li-Element in einem Element mit der id menumobile befindet.
Matthias
-
Ich sehe zwar eine Klasse color1, kann dem Codeschnipsel aber nicht entnehmen, ob sich das li-Element in einem Element mit der id menumobile befindet.
Danke. So sieht's aus:
<div id="menumobile"> <ul> <li class="color1" > <a href="index.php">Startseite</a> </li>Kurt
-
Hallo,
Ich sehe zwar eine Klasse color1, kann dem Codeschnipsel aber nicht entnehmen, ob sich das li-Element in einem Element mit der id menumobile befindet.
so ging es mir auch, aber ich war mir nicht sicher, ob das nur an meiner mangelnden Aufmerksamkeit lag.
<div id="menumobile">
<ul>
<li class="color1" >
<a href="index.php">Startseite</a>
</li>> ~~~css #menumobile .color1 { > background:#ff9999; > border-top: 1px solid #ff9999; > }Gut, da sind die Voraussetzungen gegeben, dass diese CSS-Regeln angewendet werden müssten. Mit dem entsprechenden Tool deines Browsers (Web Developer Tools, Firebug, Inspector oder wie sie jeweils heißen) solltest du das feststellen können.
Aber natürlich kann es sein, dass diese Regeln durch einen anderen Selektor, der dir hier gar nicht auffällt, überschrieben werden, weil er eine höhere Spezifizität hat (oder die gleiche, aber einfach später im Code notiert wird).
Übrigens halte ich es nicht für schlau, einem Element gleichzeitig zur Hintergrundfarbe noch ein border-top gleicher Farbe zu geben - das fällt nämlich nicht auf.
So long,
Martin--
Computer lösen für uns Probleme, die wir ohne sie gar nicht hätten.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Gut, da sind die Voraussetzungen gegeben, dass diese CSS-Regeln angewendet werden müssten. Mit dem entsprechenden Tool deines Browsers (Web Developer Tools, Firebug, Inspector oder wie sie jeweils heißen) solltest du das feststellen können.
Danke Martin.
Firebug meldet zum Element #menumobile tatsächlich "Dieses Element hat keine Style-Regeln".Wenn ich das Menu aber am Anfang der Startseite einbaue, so dass es auf der Startseite sichtbar ist (nicht separat aufzurufen), dann werden die Style-Regeln angewendet.
Die Site, um die es hier geht ist www.svnw.ch. Vielleicht kannst Du aus dem Quelltext etwas erkennen, das ich übersehe.
Kurt
-
Hi,
Die Site, um die es hier geht ist www.svnw.ch.
In der Seite finde ich kein Element mit der ID menumobile.
(Und jQuery, über die Konsole ausgeführt auch nicht.)MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/ -
Aloha ;)
Die Site, um die es hier geht ist www.svnw.ch. Vielleicht kannst Du aus dem Quelltext etwas erkennen, das ich übersehe.
Geht doch ;) So verstehen wir uns und so kann ich dir auch helfen. Okay, ich sag dir, was dein Problem ist:
Die Seite http://www.svnw.ch/menumobile.php, die deine mobile Navigation darstellt, besitzt keinen head - oder zumindest keine Stylesheet-Einbindung.
Schau in den Quelltext dieser Seite. Da wird nirgends ein CSS-File eingebunden. Was übrigens eine meiner ersten drei Vermutungen war, neben "es gibt ein Element #menumobile" und "in Sibirien ist es kalt" :P
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
Geht doch ;) So verstehen wir uns und so kann ich dir auch helfen. Okay, ich sag dir, was dein Problem ist:
Die Seite http://www.svnw.ch/menumobile.php, die deine mobile Navigation darstellt, besitzt keinen head - oder zumindest keine Stylesheet-Einbindung.
Danke,
Ich habe das korrigiert, und das löst das Problem vorerst einmal. Ich werde die Sache mit dem Hack auch noch ausprobieren.Ich danke allen für die Ratschläge.
Kurt
-
-
-
-
-
-
Aloha ;)
Jetzt mal langsam... ich verstehe nicht mal das Problem, so verworren ist deine Darstellung...
Ich betreibe eine web site, für die es je eine Version für grosse und kleine Bildschirme gibt (PC und Smartphones). Die Versionen werden durch zwei verschiedene CSS gesteuert. Die Wahl des zutreffenden CSS wird durch die Bildschirm-Grösse bestimmt (max-width, resp. min-width).
Soweit so gut...
Die Seite für kleine Bildschirme ist wie folgt organisiert:
<body id="index">
<div id="wrap">
<div id="header">
<?php include ("kopflogo.php") ?>
</div>Moment, das ist aber kein CSS... in wiefern machst du dann fest, dass das nur für kleine Bildschirme ist? Auf Endgeräten mit großen Bildschirmen kommt schließlich dasselbe HTML an... > In der Datei "kopflogo" sind der Titel der web site, der link auf das Menu (menumobile.php) und eine kleine Button-Grafik (menubutton.png), mit der man den link auf das Menu aufruft, integriert. Die Klasse "mobile" schliesst diesen Seitenkopf von der Darstellung auf grossen Bildschirmen aus. Für diese gibt es eine andere Version. Der Code: > > ~~~html <body id="kopflogo"> > > <div class="mobile"><a href="menumobile.php"> <img id="menubutton" class="mobile" src="images/menubutton.png" width="30px" alt="button"></a> > <h1 id="seitentitel">Titel der Seite </h1> > </div> > </body>Wieso ein zweiter Body innerhalb des body#index? Das ist nicht sinnvoll... Ein HTML-Dokument, wie es zum Browser ausgeliefert wird, sollte (imho) nur genau einen Body (Und auch nur einen head) besitzen.
Die einzelnen Menuzeilen sollen farbig unterlegt werden. Dazu haben sie eine Klasse:
Welche Menüzeilen? Wo sind die drin? In einem extra Dokument, das über den Link oben geöffnet wird? D.h. zum Navigieren muss dein User immer zunächst eine extra Navigationsseite laden? Mit Verlaub - sinnvolles Design und User Experience sehen anders aus...
<li class="color1" > <a href="index.php">Startseite</a> </li>
> > Im CSS bestimme ich die Farbe: > > ~~~css #menumobile .color1 { > background:#ff9999; > border-top: 1px solid #ff9999; > }Problem: Das bewirkt nichts. Offensichtlich spricht das CSS die Klasse nicht an.
Vielleicht, weil es kein Elternelement #menumobile gibt? Vielleicht weil das CSS gar nicht eingebunden wurde? Vielleicht weil es in Sibirien kalt ist? Woher sollen wir das wissen - wir haben nur damit nicht zusammenhängende Codeschnippsel und da, wo mehr nötig wäre, grad mal eine Zeile.
Wenn das da dein Problem ist, wozu dann die nicht-zielführende Einleitung, über der du dich dann verstolperst und vergisst, die einzig relevanten Daten zu posten?
Danke für einen Rat.
Danke dafür, dass du nächstes Mal konkret bei deinem Problem bleibst und uns einen Link zu einem Livebeispiel zukommen lässt. Ob hochgeladen bei bplaced, nachgebaut in dabblet oder zusammenimprovisiert in jsfiddle oder sogar direkt verlinkt ist uns dabei egal...
Diagnostik an Codeschnippseln ist zwar prinzipiell nötig - aber inefizient. Und meistens vergessen die Codeschnippsler, uns zu zeigen, was wirklich relevant ist...
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
Moment, das ist aber kein CSS... in wiefern machst du dann fest, dass das nur für kleine Bildschirme ist? Auf Endgeräten mit großen Bildschirmen kommt schließlich dasselbe HTML an...
Danke, Rider.
Das steuere ich mit der Klasse "mobile" (auf dem grossen Bildschirm ausgeblendet) und "pc" (auf dem kleinen Bildschirm ausgeblendet).Die einzelnen Menuzeilen sollen farbig unterlegt werden. Dazu haben sie eine Klasse:
Welche Menüzeilen? Wo sind die drin? In einem extra Dokument, das über den Link oben geöffnet wird? D.h. zum Navigieren muss dein User immer zunächst eine extra Navigationsseite laden? Mit Verlaub - sinnvolles Design und User Experience sehen anders aus...
Der user soll zuerst die wichtigsten Nachrichten sehen (wie z.B. bei einer Zeitung: www.faz.net) - aber darüber kann man in guten Treuen geteilter Meinung sein.
Die Menuzeilen sind in der Datei menumobile.php. Diese wird mit dem menubutton aufgerufen.
Danke dafür, dass du nächstes Mal konkret bei deinem Problem bleibst und uns einen Link zu einem Livebeispiel zukommen lässt.
Live Beispiel: www.svnw.ch.
-
Aloha ;)
Moment, das ist aber kein CSS... in wiefern machst du dann fest, dass das nur für kleine Bildschirme ist? Auf Endgeräten mit großen Bildschirmen kommt schließlich dasselbe HTML an...
Danke, Rider.
Das steuere ich mit der Klasse "mobile" (auf dem grossen Bildschirm ausgeblendet) und "pc" (auf dem kleinen Bildschirm ausgeblendet).Ja, dachte ich mir schon. Das war nur eine wenig konstruktive Spitze meinerseits ob der Formulierung :P
Die einzelnen Menuzeilen sollen farbig unterlegt werden. Dazu haben sie eine Klasse:
Welche Menüzeilen? Wo sind die drin? In einem extra Dokument, das über den Link oben geöffnet wird? D.h. zum Navigieren muss dein User immer zunächst eine extra Navigationsseite laden? Mit Verlaub - sinnvolles Design und User Experience sehen anders aus...
Der user soll zuerst die wichtigsten Nachrichten sehen (wie z.B. bei einer Zeitung: www.faz.net) - aber darüber kann man in guten Treuen geteilter Meinung sein.
Das ist nicht das Problem. Tatsächlich spricht nichts dagegen, die Navigation zunächst zu verstecken. Fraglich ist blos, dafür eine Extra Seite anzuheuern.
Die Menuzeilen sind in der Datei menumobile.php. Diese wird mit dem menubutton aufgerufen.
Genau dieses.
Normalerweise würde ich (und jeder andere User) erwarten, dass man die Navigation mit einer Schaltfläche / Button erreichen kann, soweit gebe ich dir Recht. Was dann passieren sollte ist aber nicht, dass eine andere Seite geladen wird, sondern, dass eine Navigation auf derselben Seite sichtbar wird. Das ist genauso einfach machbar wie dein Konzept, auch mit CSS, z.B. über den Checkbox-Hack. Und es erledigt dein eigentliches Problem auf einen Schlag: Dadurch, dass die Navigation auf derselben Seite liegt, werden auch deine CSS-Regeln ausgeführt :P
Danke dafür, dass du nächstes Mal konkret bei deinem Problem bleibst und uns einen Link zu einem Livebeispiel zukommen lässt.
Live Beispiel: www.svnw.ch.
Geht doch :P
Tatsächlich haben sich unsere Postings hier überschnitten, ich hatte schon auf deine Nennung einer URL im anderen Diskussionsstrang reagiert und da auch dein eigentliches Problem identifiziert ;)
Grüße,
RIDER
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
-
-
