FrankMe: style auslagern

problematische Seite

Hallo,

ich habe folgende Zeite im html: <div class="modal fade" id="myModal" role="dialog" style="z-index: 10000;">

den style möchte ich auslagern, aber die Klasse "modal fade" und die ID "myModal" stammen von externen css (bootstrap) und Klasse und ID kann pro Tag (div) nur einmal verwendet werden.

Wie kann ich nun meinen Style (z-index) auslagern in meine eigene css-Datei?

Frank

--
www.mehlhop.com

akzeptierte Antworten

  1. problematische Seite

    Hallo

    ich habe folgende Zeite im html:

    <div class="modal fade" id="myModal" role="dialog" style="z-index: 10000;">
    

    den style möchte ich auslagern, aber die Klasse "modal fade" und die ID "myModal" stammen von externen css (bootstrap) und Klasse und ID kann pro Tag (div) nur einmal verwendet werden.

    Eine ID muss pro Dokument einzigartig sein und ein Element kann nur eine haben. Es kann aber, wie es hier auch der Fall ist, mehreren Klassen zugeordnet sein. Es handelt sich bei class="modal fade" nämlich um eine Auflistung von zwei Klassen. Du kannst das Element nun einer weiteren Klasse zuordnen und in dieser dritten Klasse den z-index als Eigenschaft notieren.

    Dabei sei noch angemerkt, dass der Wert von 10000 für typische Elemente recht hoch angesetzt ist.

    Tschö, Auge

    --
    Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
    Wolfgang Schneidewind *prust*
    1. problematische Seite

      @@Auge

      Du kannst das Element nun einer weiteren Klasse zuordnen und in dieser dritten Klasse den z-index als Eigenschaft notieren.

      Das wäre aber Unfug. Mit der ID steht ein Selektor zur Verfügung, um genau dieses Element anzusprechen. Einer weiteren Klasse bedarf es dazu nicht, zumal schon zwei davon da sind.

      LLAP 🖖

      --
      “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
      1. problematische Seite

        Hallo

        Du kannst das Element nun einer weiteren Klasse zuordnen und in dieser dritten Klasse den z-index als Eigenschaft notieren.

        Das wäre aber Unfug. Mit der ID steht ein Selektor zur Verfügung, um genau dieses Element anzusprechen.

        Und du weißt mit Gewissheit, dass es nur um (jeweils?) das eine Element, dass über die ID angesprochen werden kann, geht‽ Sicher doch.

        Einer weiteren Klasse bedarf es dazu nicht, zumal schon zwei davon da sind.

        Und du weißt, dass in aller Zeit genau diese Klassen, die auch noch durch ein sich verändern könnendes Framework eingebracht werden, passen‽ Sicher doch.

        Ich habe einen – gewiss nicht den Einen – Lösungsansatz vorgeschlagen. Der mag passen, oder auch nur teilweise, eventuell auch garnicht. Ihn mit deiner eingebildeten Gewissheit ohne weitere Kenntnisse über die konkrete Situation zu verwerfen, ist einfach nur dumm.

        Tschö, Auge

        --
        Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
        Wolfgang Schneidewind *prust*
        1. problematische Seite

          Tach!

          Einer weiteren Klasse bedarf es dazu nicht, zumal schon zwei davon da sind.

          Und du weißt, dass in aller Zeit genau diese Klassen, die auch noch durch ein sich verändern könnendes Framework eingebracht werden, passen‽ Sicher doch.

          Bootstrap definiert für bestimmte Klassen ein bestimmtes Aussehen in einer CSS-Datei. Es ist nicht so, dass Bootstrap selbständig HTML-Code erzeugt/einbringt. Die Klassennamen im HTML-Code werden sich also nicht ändern.

          Es kann sein, dass bei einem Major-Update Bootstrap andere Klassen vorgibt. Es kann aber auch sein, dass Bootstrap für den Dialog eine andere HTML-Struktur vorschlägt/voraussetzt. Aber auch dann muss man selbst entscheiden, ob man diesem Update und den damit verbundenen Änderungen folgen möchte oder nicht. Da werden sicher noch an anderen Stellen Umbaumaßnahmen notwendig sein. Es ist sicherlich nicht Unfug, eine eigene Klasse zu vergeben, aber eine Notwendigkeit (oder gar Zukunftsgarantie) sehe ich auch nicht.

          dedlfix.

          1. problematische Seite

            Hallo

            Einer weiteren Klasse bedarf es dazu nicht, zumal schon zwei davon da sind.

            Und du weißt, dass in aller Zeit genau diese Klassen, die auch noch durch ein sich verändern könnendes Framework eingebracht werden, passen‽ Sicher doch.

            Bootstrap definiert für bestimmte Klassen ein bestimmtes Aussehen in einer CSS-Datei. Es ist nicht so, dass Bootstrap selbständig HTML-Code erzeugt/einbringt.

            Bootstrap gibt die Klassennamen vor, darauf wies ich hin. Ich sprach nicht davon, dass das Framework HTML-Elemente einfügt.

            Die Klassennamen im HTML-Code werden sich also nicht ändern.

            Solange der Quelltext nicht geändert wird oder sich in Bootstrap mit neuen Versionen nichts ändert, natürlich nicht.

            Es kann sein, dass bei einem Major-Update Bootstrap andere Klassen vorgibt. Es kann aber auch sein, dass Bootstrap für den Dialog eine andere HTML-Struktur vorschlägt/voraussetzt. Aber auch dann muss man selbst entscheiden, ob man diesem Update und den damit verbundenen Änderungen folgen möchte oder nicht.

            Auf solche Szenarien wollte ich hinaus.

            Es ist sicherlich nicht Unfug, eine eigene Klasse zu vergeben, aber eine Notwendigkeit (oder gar Zukunftsgarantie) sehe ich auch nicht.

            Weder die Notwendigkeit noch die Zukunftssicherheit habe ich postuliert. Und das es ein Lösungsweg ist, die vorhandenen Klassen einfach mitzubenutzen, hat Tabellenkalk auch schon vorgeschlagen. Eine eigene Klasse ist aber von irgendwelchen Frameworks unabhängig und in bestimmten Szenarien, von denen wir nicht wissen, ob sie auf das Projekt des OP zutreffen oder eben auch nicht, kann das von Vorteil sein. Die Möglichkeit, das so zu tun, ohne die Kenntnis der genauen Umstände, auszuschließen, ist mMn genau deshalb dumm.

            Tschö, Auge

            --
            Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
            Wolfgang Schneidewind *prust*
          2. problematische Seite

            @@dedlfix

            Es ist sicherlich nicht Unfug, eine eigene Klasse zu vergeben

            Es ist eine Krankheit: Klassitis.

            Es gibt noch andere CSS-Hooks als Klassen, auch wenn manche das nicht wahrhaben wollen.

            LLAP 🖖

            --
            “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl
            1. problematische Seite

              Hallo Gunnar Bittersmann,

              Es ist eine Krankheit: Klassitis.

              Can we stop bad-mouthing CSS in developer talks, please?

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  2. problematische Seite

    Hallo,

    Wie kann ich nun meinen Style (z-index) auslagern in meine eigene css-Datei?

    du kannst doch in deinem CSS die ID oder eine der beiden Klassen ein weiteres Mal ansprechen.

    Gruß
    Kalk

  3. problematische Seite

    Danke Euch! :-)

  4. problematische Seite

    Hallo FrankMe,

    Wie kann ich nun meinen Style (z-index) auslagern in meine eigene css-Datei?

    • ein Webentwickler mit einer solchen Frage??
    • problematische Seite = Homepage des Fragers

    Ist dies am Ende nur ein Versuch, Werbung für das eigene Unternehmen zu machen?

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Problematische Seite = Parked Domain ?!?!

    2. problematische Seite

      Nein, dass ist der Versuch besser zu werden.

      [Vollzitat entfernt]

      --
      www.mehlhop.com
  5. problematische Seite

    @@FrankMe

    aber die Klasse "modal fade" und die ID "myModal" stammen von externen css (bootstrap)

    Wenn du Bootstrap einsetzt und dessen modales Fenster verwendest, solltest du keinen zusätzlichen z-Index brauchen, oder du machst was falsch™.

    LLAP 🖖

    --
    “I love to go to JS conferences to speak about how to avoid using JavaScript. Please learn CSS & HTML to reduce your JS code bloat.” —Estelle Weyl