Margin:Fahrrad: nicht alle Befehle aus ausgelagerter CSS übernehmen - wie?

Hallo!

Ich habe eine ausgelagerte CSS-Datei - menu.css -, die für jede Seite
meiner Homepage integriert wird (das Menü-Styling).
Nun möchte ich für eine einzige Seite - galerie.php - einen bestimmten
Befehl dieser CSS nicht übernehmen. Wie erreiche ich das, ohne eine
komplett neue CSS-Datei nur für galerie.php zu schreiben?

Konkret:
Wenn man mit Maus über den Button "Galerie" ist, klappt Submenü auf, geht
man ein 2. Mal drüber, klappt es wieder zu. Ist man auf der Seite
galerie.php, soll das Submenü aufgeklappt sein und bleiben:

der relevante CSS-Teil:

  
.drillDownMenu {  
	display: none;  
}  

display:none wird mit JavaScript zu display:block.

Wenn ich also nun menu.css in galerie.php integriere, hier aber
.drillDownMenu{display:block;} haben möchte, was kann ich da tun?

Habe gelesen, dass die 3 Methoden, CSS zu integrieren (inline, im style-tag
und extern) unterschiedliche Gewichtung/Reihenfolge haben, s.d. mein Ziel
vermutlich erreiche, indem ich auf galerie.php einfach innerhalb von
style-tags der integrierten CSS menu.css direkt widerspreche - aber gibt es
da eine elegantere/bessere Methode?

Vielen Dank im Voraus für jede Antwort :-}

Margin:Fahrrad

  1. Hi,

    Nun möchte ich für eine einzige Seite - galerie.php - einen bestimmten
    Befehl dieser CSS nicht übernehmen.

    CSS hat nicht unbedingt viel mit HTML gemein (z.B. gibt es in HTML Klassen, in CSS nicht), aber bei einer Sache sind sie sich einig: Weder CSS noch HTML kennen Befehl.

    Wie erreiche ich das, ohne eine
    komplett neue CSS-Datei nur für galerie.php zu schreiben?

    Die Deklaration einfach höherwertig überschreiben, also entweder mit einer höheren Spezifität, oder mit der gleichen Spezifität und einer späteren Position.

    Wenn ich also nun menu.css in galerie.php integriere, hier aber
    .drillDownMenu{display:block;} haben möchte, was kann ich da tun?

    .drillDownMenu{display:block;} angeben.

    gibt es da eine elegantere/bessere Methode?

    Ich wüsste nicht, was an dem für den Zweck vorgesehenen Weg unelegant wäre.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
  2. Yerf!

    aber gibt es da eine elegantere/bessere Methode?

    Ja. Klassen und IDs haben ebenfalls eine unterschiedliche Gewichtung. Gib dem Menü in der Galerie eine entsprechende ID und füge in dein CSS eine entsprechende Formatierung für diese ID ein. Diese hat eine höhere Gewichtung als die Angabe für die Klasse.

    Gruß,

    Harlequin

    --
    RIP --- XHTML 2
    nur die Besten sterben jung
    1. Hi,

      Gib dem Menü in der Galerie eine entsprechende ID

      den HTML-Code wegen einer gewünschten Formatierung zu wählen wird im Volksmund "Tabellenlayout" genannt.

      Cheatah

      --
      X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
      X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
      X-Will-Answer-Email: No
      X-Please-Search-Archive-First: Absolutely Yes
      1. Yerf!

        den HTML-Code wegen einer gewünschten Formatierung zu wählen wird im Volksmund "Tabellenlayout" genannt.

        ? Einem gesondertem Menü eine ID zu geben halte ich für semantisch korrekt und das derzeitige Fehlen der ID als Fehler im HTML...

        Inline-CSS halte ich dagegen für Murks. Oder hab ich noch eine andere Möglichkeit übersehen?

        Gruß,

        Harlequin

        --
        RIP --- XHTML 2
        nur die Besten sterben jung
        1. den HTML-Code wegen einer gewünschten Formatierung zu wählen wird im Volksmund "Tabellenlayout" genannt.

          ? Einem gesondertem Menü eine ID zu geben halte ich für semantisch korrekt und das derzeitige Fehlen der ID als Fehler im HTML...

          Aber nur wenn es ein "Einzelstück" ist - wenn es ein spezieller Galerietyp ist, würde ich eine zusätzliche Klasse vorschlagen.

          z.b. <ul class="gallery condensed" /> oder <ul class="gallery wide" /> - auch wenn das im Grunde keine sauberen Bezeichner sind.

          1. Hallo nochmal an alle,

            hatte vergessen zu erwähnen, dass ich speziell für galerie.php keine
            zusätzlichen IDs oder Klassen in die Menü-HTML einfügen kann, weil diese HTML
            mittels include() in alle Seiten integriert wird.
            Also:

            include-head.php
            (...)
            <link rel="stylesheet" type="text/css" href="styles/menu.css">
            -> das styling für das Menü

            include-menu.php
            (hier steht das HTML-Gedönse für das Menü und so weiter

            galerie.php
            include('include-head.php')
            (...)
            include('include-menu.php)

            lieben Gruß und vielen Dank für Eure Hilfe :}

            1. hatte vergessen zu erwähnen, dass ich speziell für galerie.php keine zusätzlichen IDs oder Klassen in die Menü-HTML einfügen kann, weil diese HTML mittels include() in alle Seiten integriert wird.

              Das ist eine faule Ausrede: was hindert dich darn eine Variable zu setzen aufgrund derer du bestimmst wie der Code aussieht?

              $type = 'blah';  
              include('gallery.php');
              
              //gallery.php:  
              echo '<ul class="gallery ' . $type . '" />;
              
              1. Das ist eine faule Ausrede: was hindert dich darn eine Variable zu setzen aufgrund derer du bestimmst wie der Code aussieht?

                Oh, ich Esel! So simpel und ich komm nicht drauf.. jejeje...
                Danke suit, das war genau das, was ich benötige :}
                case closed.

                ganz lieben Gruß

                1. @@Margin:Fahrrad:

                  nuqneH

                  Oh, ich Esel! So simpel und ich komm nicht drauf.. jejeje...
                  Danke suit, das war genau das, was ich benötige :}

                  Nein.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
        2. Hi,

          den HTML-Code wegen einer gewünschten Formatierung zu wählen wird im Volksmund "Tabellenlayout" genannt.
          ? Einem gesondertem Menü eine ID zu geben halte ich für semantisch korrekt

          ja. Dies ist aber eine ganz andere Aussage als die, die Du zuvor getätigt hast.

          Inline-CSS halte ich dagegen für Murks.

          Dito.

          Oder hab ich noch eine andere Möglichkeit übersehen?

          Wenn eine Regel mit dem Selektor ".foo" einen Eigenschaftswert setzt, kann eine nachfolgende Regel mit dem Selektor ".foo" die selbe Eigenschaft überschreiben, genauso wie eine irgendwo stehende Regel mit dem Selektor "elementname.foo" oder beispielsweise "body .foo". Es existiert keinerlei Notwendigkeit, hierzu eine ID einzufügen.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. Yerf!

            ja. Dies ist aber eine ganz andere Aussage als die, die Du zuvor getätigt hast.

            Ok, ich hab den Semantikgedanken dazu nicht hingeschrieben, sondern nur in Gedanken gehabt. Deshalb fand ich meine Empfehlung für richtig.

            Wenn eine Regel mit dem Selektor ".foo" einen Eigenschaftswert setzt, kann eine nachfolgende Regel mit dem Selektor ".foo" die selbe Eigenschaft überschreiben

            Doch wie trifft man da die unterscheidung das die 2. Regel nur dann überschreiben soll, wenn das CSS in ein bestimmtes HTML eingebunden wird? Die Aufgabenstellung war ja, das Seiten die ein und das selbe CSS einbinden unterschiedliche Vormatierungen haben sollen. Wenn ich die Regel ins Haupt-CSS aufnehme überschreibe ich aber für alle Seiten.

            Also müsste ich entweder ein 2. CSS einbinden oder das CSS direkt ins entsprechende HTML schreiben.

            Gruß,

            Harlequin

            --
            RIP --- XHTML 2
            nur die Besten sterben jung
    2. Ja. Klassen und IDs haben ebenfalls eine unterschiedliche Gewichtung. Gib dem Menü in der Galerie eine entsprechende ID und füge in dein CSS eine entsprechende Formatierung für diese ID ein.

      Hey Harlequin,
      auch dir herzlichen Dank für Deine Antwort - hatte vergessen zu erwähnen,
      dass auch das komplette Menü (also die HTML meine ich) mit include() jeweils
      eingefügt wird, s.d. ich leider nicht speziell auf galerie.php eine
      entsprechende ID hinzufügen kann - aber trotzdem gut zu wissen, dass Klassen
      und IDs unterschiedliche Gewichtung haben :} gibt noch viel zu lernen für
      mich hehe

      lieben Gruß

  3. indem ich auf galerie.php einfach innerhalb von
    style-tags der integrierten CSS menu.css direkt widerspreche - aber gibt es
    da eine elegantere/bessere Methode?

    Die find ich schon ganz gut.

  4. Wow - dass ich innerhalb so kurzer Zeit so hilfreiche Antworten hier bekomme, damit habe ich nicht gerechnet -

    Vielen Dank! :}

    @Cheatah: Ja, das Wort "Befehl" ist falsch gewählt, das ist klar. Aber weiß ja jeder, was gemeint ist ;} also vielen Dank für die Hilfe und

    lieben Gruß*

    Margin:Fahrrad

    1. Aber weiß ja jeder, was gemeint ist ;}

      Oft ist das nicht so :D

  5. Wenn man mit Maus über den Button "Galerie" ist, klappt Submenü auf, geht
    man ein 2. Mal drüber, klappt es wieder zu.

    Das klingt nach Javascript. Nicht nach purem CSS.
    Löse dein Javascript Problem.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Das klingt nach Javascript. Nicht nach purem CSS.
      Löse dein Javascript Problem.

      Da gibt's kein Javascript-Problem ;}
      Das script sorgt dafür, dass das Submenü angezeigt wird (aus display:none mach
      display:block).
      D.h. im CSS steht display:none - was ich aber für galerie.php nicht haben möchte - hat nichts mit dem js zu tun ;}

      lieben Gruß

  6. @@Margin:Fahrrad:

    nuqneH

    Wie erreiche ich das, ohne eine komplett neue CSS-Datei nur für galerie.php zu schreiben?

    Indem du diese eine Seite deiner Website identifizierbar machst: Gib dem 'html'-Element @id="galerie" (bzw. @class="galerie"). Oder dem 'body'-Element, dann ist es auch in HTML 4 valide.

    Dann kannst du per Nachfahrenselektor ausschließlich Elemente auf dieser Seite anders formatieren:

    #galerie .drillDownMenu { display: block }

    Evtl. '!important'.

    display:none wird mit JavaScript zu display:block.

    Keine gute Idee. [https://forum.selfhtml.org/?t=203502&m=1376173 ff.]

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Indem du diese eine Seite deiner Website identifizierbar machst: Gib dem 'html'-Element @id="galerie" (bzw. @class="galerie"). Oder dem 'body'-Element, dann ist es auch in HTML 4 valide.

      Und was tust du Experte, wenn es in diesem Dokument verschiedene Arten von Galerien mit unterschiedlichen verhaltensmustern gibt? Richtig, den Galerien Klassen verpassen um sie voneinander zu unterschieden.

      1. @@suit:

        nuqneH

        Und was tust du Experte, wenn es in diesem Dokument verschiedene Arten von Galerien mit unterschiedlichen verhaltensmustern gibt? Richtig, den Galerien Klassen verpassen um sie voneinander zu unterschieden.

        Richtig, darum ging es hier aber nicht. Es sollte nicht die Galerie gestylt werden, sondern das per Include eingebundene Navigationsmenü.

        Qapla'

        PS: @Margin:Fahrrad: Beachte Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]: „Verlinke niemals auf die aktuelle Seite.“ Auch das ist mit etwas Logik im Include machbar.

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Hallo Gunnar und suit,

          hätte doch nochmal eineinhalb Fragen:

          • @suit,Gunnar: beide Eure Vorschläge klappen natürlich wunderbar (also die ID für das
            Galerie-Submenü mit php-variablen variabel machen (hoffe, das ist nicht
            wieder murksig formuliert) oder aber mit Nachfahren-Selektoren); ist eine
            dieser Methoden aus irgendwelchen Gründen vorzuziehen/besser?

          • @Gunnar: Habe keine Ahnung, was Du mit dem letzten Hinweis meintest -
            "verlinke niemals auf die aktuelle Seite". Habe ich meines Wissens nach auch
            nicht getan (? |-})

          vielen Dank Euch beiden und einen schönen Tag wünsche ich

          1. @@Margin:Fahrrad:

            nuqneH

            Es sollte nicht die Galerie gestylt werden, sondern das per Include eingebundene Navigationsmenü.

            Hm, ich hatte ich dich wohl falsch verstanden und zu viel in die Benennung menu.css reininterpretiert.

            "verlinke niemals auf die aktuelle Seite". Habe ich meines Wissens nach auch nicht getan (? |-})

            Vielleicht nicht.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
            1. Hm, ich hatte ich dich wohl falsch verstanden und zu viel in die Benennung menu.css reininterpretiert.

              Achso, ja, das per include eingebundene Menü soll gestylt werden.
              die entsprechende CSS-Datei menu.css steht aber in einer anderen php-Datei,
              die wiederum ebenfalls per include eingebunden wird.
              Die eine eingebundene Datei enthält das Menü;
              die andere eingebundene Datei enthält unter anderem menu.css, aber auch die
              Links zu einigen .js und den Krempel im head wie meta-tags und soweiter -
              eben das, was in jeder Seite im head stehen soll ;}

              1. @@Margin:Fahrrad:

                nuqneH

                die andere eingebundene Datei enthält unter anderem menu.css

                Häh? Du meinst den Verweis darauf? <link rel=stylesheet" href="…"/>

                und den Krempel im head wie meta-tags

                Einige Meta-Angaben sollten von Seite zu Seite unterschiedlich sein.

                eben das, was in jeder Seite im head stehen soll ;}

                Wenn du da bspw.

                <html id="<?php [code lang=php]echo str_replace('/', '_', substr($_SERVER['PHP_SELF'], 1)); ?>" lang="…" …>[/code]

                reinschreibst, hast du das automatisiert.

                Qapla'

                --
                Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                (Mark Twain)
                1. Häh? Du meinst den Verweis darauf? <link rel=stylesheet" href="…"/>

                  öm, ja natürlich - sorry, my bad ;}

                2. Hi,

                  Wenn du da bspw.

                  <html id="<?php [code lang=php]echo str_replace('/', '_', substr($_SERVER['PHP_SELF'], 1)); ?>" lang="…" …>[/code]

                  reinschreibst, hast du das automatisiert.

                  Und das hier auch.

                  MfG ChrisB

                  --
                  RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                  1. @@ChrisB:

                    nuqneH

                    <html id="<?php [code lang=php]echo str_replace('/', '_', substr($_SERVER['PHP_SELF'], 1)); ?>" lang="…" …>[/code]

                    Und das hier auch.

                    Mir ist nicht ganz klar, was in $_SERVER['PHP_SELF'] Böses drinstehen könnte.

                    Qapla'

                    --
                    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                    (Mark Twain)
                    1. Hi,

                      Mir ist nicht ganz klar, was in $_SERVER['PHP_SELF'] Böses drinstehen könnte.

                      http://example.com/script.php/das_<script>alert("was")</script>_ich_rein_schreibe

                      MfG ChrisB

                      --
                      RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
                      1. @@ChrisB:

                        nuqneH

                        http://example.com/script.php/das_<script>alert("was")</script>_ich_rein_schreibe

                        I see your point. Thanks.

                        Qapla'

                        --
                        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                        (Mark Twain)
    2. Dann kannst du per Nachfahrenselektor ausschließlich Elemente auf dieser Seite anders formatieren:

      ok, suits Vorschlag klappt wunderbar, aber es führen ja bekanntlich viele Wege zum Ziel ;} Danke für diese Idee!

      Keine gute Idee. [https://forum.selfhtml.org/?t=203502&m=1376173 ff.]

      Hab da grad mal reingeschaut - also die Grundaussage ist, lieber class ändern.
      Ok, das hat sich mir nicht so richtig erschlossen, warum. Mein Klappmenü (in
      der drill-down-Variante) funktioniert wunderbar - aber das Thema gehört dann
      wohl eher zu Javascript...
      Danke für den Hinweis

      liebe Grüße