Warum macht die Klasse im CSS Sheet nicht was drinsteht

  • Hallo liebe Forenmitglieder,


    ich habe mal eine Anfängerfrage. Im HTML-Dokument habe ich eine Klasse subsummary erstellt:


    <details>

    <summary>SEK I</summary>

    <details>

    <summary class="subsummary">Haupt und Realschule KC und Thementabellen</summary>

    <ul>

    <li><a href="meineDaten/Se...



    Im Stylesheet:

    summary {

    margin-left: 10px;

    padding-left: 5px;

    background: #003300;

    color: #FFFFFF;

    border: solid #FFFFFF 1px;

    cursor: pointer;

    width: 98%;

    }

    .subsummary {

    background: #006600 !important; /*WARUM GEHT DAS NICHT???????????*/

    }

    details ul {

    list-style: none;

    margin-bottom: 1em;

    }


    Trotzdem haben beide Summary-Blöcke das gleiche Grün. Was mache ich falsch???


    Danke für Antworten

  • Ich habe mal aus den Fragmenten die du schickst eine Testwebseite gebastelt. So richtig erschließt es sich mir noch nicht was du genau willst, aber die Farben wechseln bei meiner Version. Schau mal drüber, vielleicht finden wir eine Lösung für dich. Ach ja, im CSS-Tag <details></details> sprichst du einen ul-Tag an. Den gibt es aber im body deiner Version nicht!


    <style>

    summary {

    margin-left: 10px;

    padding-left: 5px;

    background: #003300;

    color: #FFFFFF;

    border: solid #FFFFFF 1px;

    cursor: pointer;

    width: 98%;

    }


    .subsummary {

    background: #006600 !important; /*WARUM GEHT DAS NICHT???????????*/

    }

    details ul {

    list-style: none;

    margin-bottom: 1em;

    }

    </style>

    </head>


    <body>

    <details>

    <summary>SEK I</summary>

    <summary class="subsummary">Haupt und Realschule KC und Thementabellen

    <ul>

    <li>meineDaten/Se...</li>

    </ul>

    </summary>

    <details>

    </body>

    </html>

  • Hallo


    Bei mir funktioniert das CSS. Das Problem wird in dem Teil des Quellcodes enthalten sein, den du uns vorenthältst.


    Nachtrag:


    Ich habe mal eine Beispielseite zum direkten Ausprobieren erstellt:


    Beispielseite


    Gruss


    MrMurphy

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von MrMurphy ()

  • Hallo Lupus,


    danke für die schnelle Antwort. Genau so wie bei Dir soll es aus sehen. Das mit der UL stimmt. Die gibt es aber in einem anderen Dokument in einem details-tag. Und ich bin davon ausgegangen, das der <details> <details> tag die Eigenschaft für seine <ul> erbt. Stimmt das?


    MrMurphy : Vorenthalten wollte ich auch nichts, ich dachte nur ich mache einen ganz banalen Fehler und die Stelle reicht. Hier der Rest (probiere aber eben noch dei Vorschläge vom Wolf aus...)

    :

    <!doctype html>

    <head>

    <meta charset="utf-8">

    <title>Downloads auf biogli.de</title>

    </head>


    <body>

    <?php include ("biogli_master.php"); ?>


    <h3>Downloads</h3>


    <div>

    <div id="ListeSumDet">

    <details open>

    <summary>Allgemein</summary>

    <ul>

    <li><a href="meineDaten/Downloads/KriterienMuendlicheLeistungen.pdf" target="_blank">KriterienMuendlicheLeistungen</a></li>

    <li><a href="meineDaten/Downloads/Operatoren.pdf" target="_blank">Operatorenliste</a></li>

    </ul>

    </details>

    <details>

    <summary>Seminarfach</summary>

    <ul>

    <li><a href="meineDaten/Seminarfach/Bewertungskriterien%20nach%20Alles%20mit%20Methode.docx" target="_blank">Bewertungskriterien nach Alles mit Methode</a></li>

    <li><a href="meineDaten/Seminarfach/Beispielgutachten.docx" target="_blank">Beispielgutachten.docx</a></li>

    <li><a href="meineDaten/Seminarfach/Anlage%20Versicherung%20selbststaendige%20Erarbeitung.docx" target="_blank">Versicherung selbstständige Erarbeitung</a></li>

    <li><a href="meineDaten/Seminarfach/Anleitung%20zum%20Erstellen%20von%20Word-Dokumenten.pdf" target="_blank">Anleitung zum Erstellen von Word-Dokumenten</a></li>

    </ul>

    </details>

    <details>

    <summary>EVA</summary>

    <ul>

    <li><a href="meineDaten/EVA/Leitfaden%20zur%20gelungenen%20PowerPointPraesentation.pdf" target="_blank">Leitfaden zur gelungenen PowerPointPraesentation</a></li>

    <li><a href="meineDaten/EVA/Tutorial%20PowerPoint%20EVA.pdf" target="_blank">Tutorial PowerPoint EVA</a></li>

    </ul>

    </details>

    <details>

    <summary>SEK I</summary>

    <details>

    <summary class="subsummary">Haupt und Realschule KC und Thementabellen</summary>

    <ul>

    <li><a href="meineDaten/SekI/kc_hs_nws_07_nib.pdf" target="_blank">kc_hs_nws_07_nib.</a></li>

    <li><a href="meineDaten/SekI/kc_rs_nws_07_nib.pdf" target="_blank">kc_rs_nws_07_nib</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%205%20und%206%20HS%20und%20RS.pdf" target="_blank">Themen Jahrgang 5 und 6 HS und RS</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%207%20und%208%20HS%20und%20RS.pdf" target="_blank"> Themen Jahrgang 7 und 8 HS und RS</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%209%20und%2010%20HS%20und%20RS.pdf" target="_blank"> Themen Jahrgang 9 und 10 HS und RS</a></li>

    </ul>

    </details>

    <details>

    <summary class="subsummary">Gymnasium KC und Thementabellen</summary>

    <ul>

    <li><a href="meineDaten/SekI/kc_gym_nws_07_nib.pdf" target="_blank"> kc_gym_nws_07_nib.pdf</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%205%20und%206%20Gy.pdf" target="_blank">Themen Jahrgang 5 und 6</a> </li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%207%20und%208%20Gy.pdf" target="_blank">Themen Jahrgang 7 und 8</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%209%20und%2010%20Gy.pdf" target="_blank">Themen Jahrgang 9 und 10</a></li>

    </ul>

    </details>

    <details>

    <summary class="subsummary">Integrierte Klassen Thementabellen</summary>

    <ul>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%205%20und%206%20int.pdf" target="_blank">Themen 5 und 6 integriert</a></li>

    <li><a href="meineDaten/SekI/KC%20nach%20Themen%20Jahrgang%207%20und%208%20HS,%20RS%20und%20Gy.pdf" target="_blank">Themen Jahrgang 7 integriert (und 8)</a></li>

    </ul>

    </details>

    <details>

    <summary class="subsummary">Jahresarbeitsplan und Kompetenzpläne</summary>

    <ul>

    <li><a href="meineDaten/SekI/Jahresarbeitsplan%20Biologie%20GSS%202014.pdf" target="_blank">Jahresarbeitsplan Biologie GSS 2014</a></li>

    <li><a href="meineDaten/SekI/Kompetenzplan%20Biologie%20H_R%20Jg.%208_2013-14.pdf" target="_blank">Kompetenzplan Biologie H_R Jg. 8_2013-14</a></li>

    <li><a href="meineDaten/SekI/Kompetenzplan%20Biologie%20H_R%20Jg.%209_2013-14.pdf" target="_blank">Kompetenzplan Biologie H_R Jg. 9_2013-14</a></li>

    <li><a href="meineDaten/SekI/Kompetenzplan%20Biologie%20H_R%20Jg.%2010_2013-14.pdf" target="_blank">Kompetenzplan Biologie H_R Jg. 10_2013-14</a></li>

    </ul>

    </details>

    </details>

    </div>



    </div>


    <?php include ("php/incFooter.php"); ?>

    </body>


    -----------------------------------------------------------------------------------------------------
    Und das Stylesheet:

    /*Standardwerte für verschiedene Browsern zurücksetzen */

    *{

    padding: 0;

    margin: 0;

    }


    /*Hier Header mit Bild etc sowie footer*/

    p.titel {

    font-family:Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

    font-size:1em;

    padding:1.35em 0 0 0;

    text-align:center;

    margin-top: 0;

    }

    @media screen and (max-width: 32em) {

    p.titel {

    font-size: 0.75em;; /* für Handy Hochformat */

    }

    }

    #imgFrog {

    float:right;

    width: 150px;

    height: 66px;

    margin: 0;

    }


    body {

    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

    font-size:18px;

    background-color:white;

    -webkit-animation: bugfix infinite 1s; /*Fix für ios/Android*/

    }


    @-webkit-keyframes bugfix { /*Fix für ios/Android*/

    from {padding:0;}

    to {padding:0;}

    }


    header {

    background-color:#003300;

    color:white;

    height:auto; /*damit der Text auch sichtbar ist, wenn der Header zu kurz ist*/

    min-height:66px; /*66px ist die Logo-Höhe */

    }


    #footer {

    background-color:#003300;

    color:white;

    text-align:center;

    margin-top: 10px;

    height:2em;

    width: 100%;

    height: auto;

    padding: 2px;

    }

    /*Ende Header und Footer*/


    /*Standard-Elemente*/

    h1 {

    font-size:2.5em;

    font-weight: bold;

    margin-bottom:1.5em;

    text-align:center;

    color:#172C14;

    padding-left: 10px;

    }


    h2 {

    font-size:2em;

    font-weight: bold;

    margin-top:1.5em;

    margin-bottom:1em;

    color:#172C14;

    padding-left: 10px;

    }


    h3 {

    font-size:1.8em;

    font-weight: bold;

    margin-top:1em;

    margin-bottom:0.5em;

    color:#172C14;

    padding-left: 10px;

    }


    h4 {

    font-size:1.6em;

    font-weight: bold;

    margin-top:1em;

    margin-bottom:0.5em;

    color:#172C14;

    padding-left: 10px;

    }


    h5 {

    font-size:1.4em;

    font-weight: bold;

    margin-top:0.5em;

    color:#172C14;

    padding-left: 10px;

    }


    h6 {

    font-size:1.2em;

    font-weight: bold;

    margin-top:0.5em;

    color:#172C14;

    padding-left: 10px;

    }


    ul {

    padding-left: 2em;

    margin-bottom: 0.5em;

    }


    p {

    margin-bottom: 1em;

    margin-top: 1em;

    padding: 0 10px 0 3px;

    }


    a {

    font-size: 1em;

    padding-left: 10px;

    }

    /*Ende Standard-Elemente*/


    /*Tabellen*/

    table {

    width:100%;

    padding: 2.5em;

    margin-bottom: 2.5em;

    }


    caption {

    font-size: 1.5em;

    box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%);

    padding: 0.2em 0.2em 0.2em 2em;

    width: auto;

    margin-left: 0;

    position: relative;

    }


    td {

    font-style:italic;

    text-align: left;

    width:auto;

    padding:0.5em;

    }


    td:empty {

    box-shadow: none;

    }

    /*Tabelle Ende*/


    /*Summary Detail*/

    details {

    padding: 5px;

    background-color: #f6f7f8;

    width: 97%;

    }

    summary {

    margin-left: 10px;

    padding-left: 5px;

    background: #003300;

    color: #FFFFFF;

    border: solid #FFFFFF 1px;

    cursor: pointer;

    width: 98%;

    }

    .subsummary {

    background: #006600 !important; /*WARUM GEHT DAS NICHT???????????*/

    }

    details ul {

    list-style: none;

    margin-bottom: 1em;

    }


    details ul li{

    margin-bottom: 0.5em;

    }


    /*ENDE Summary Detail*/

  • Oh f.....


    man sollte das Stylesheet schon auf den Server kopieren...<X


    dann bleibt nur die Frage: Erbt <details> <details> <ul>

    die Anweisungen im Stylesheet von <details> <ul> ????


    Und danke für die Hilfe Lupus und McMurphy, ich hätte wahrscheinlich noch ewig den Fehler gesucht bevor ich drauf gekommen wäre, dass ich scheinbar was anderes vergessen habe (da dass ja im Bsp. bei Dir geklappt hat musste der Fehler ja woanders liegen...)


    LG Ogli

  • Kleiner hinweiß

    Deine ganzen margin und padding Werte dieeine 0 haben kannst du eigentlich raus löschen.

    Weil ganz am anfang hast du ja das stehen

    *{

    margin:0;

    padding:0;

    }

    Das sollte eigentlich bei allen Elementen gelten,ich wüßte zumindest keine ausnahme Regel.


    Im footer hast du 2X height stehen.

    Aber ansonsten Funktioniert doch alles

  • Basti :

    danke, habe ich gemacht (bis auf das margin-top bei p.titel, da er sonst von p das margin geerbt hat...)

    Das mit dem Footer hatte ich glatt übersehen. Die meisten anderen Nuller waren Relikte, die hatten alle mal einen anderen Wert. Ist aber so viel aufgeräumter.


    Übrigens meine Website ist biogli.de wenn jemand gucken will was ich da fabriziere. Werde es mal in meine Signatur aufnehmen.

  • Übrigens meine Website ist biogli.de wenn jemand gucken will was ich da fabriziere.

    Von jeder Seite ist der HTML-Code kaputt. Sieh' dir mal an, was im Browser ankommt.


    Und du weißt, dass Crosspostings nicht besonders beliebt sind?

  • crossposting heißt in 2 verschiedenen Foren zu Fragen?

    Hatte mich erst beim anderen angemeldet und dann hier. Wollte mal schauen, welches Forum mir besser gefällt. War mir nicht klar, dass das nicht gerne gesehen wird.


    Bei mir im Browser sieht alles normal aus. Was genau meinst Du?

  • Ja crossposting wird nicht gerne gsehen weil.

    Wenn du hier eine Frage stellst und wo anders auch.

    Die Leute in diesen Forum sitzen zu hause am Rechner und versuchen für dein Problem eine Lösung zu finden,du aber im anderen Forum schon eine Lösung bekommen hast,und uns das nicht mitteilen tust.

    So sitzen die Leute zu hause rum und Rätseln weiter an dein Problem.

    Man muß bedenken,die Leute die dir helfen wollen nutzen ihre Zeit für dich,und wenn es dann um sonst wahr,weil du wo anders schon eine Lösung bekommen hast ,wäre das unfähr.

    In anderen Forums wird das Thema sofort gespärt wenn man mit Crossposting aufgefallen ist.

    Hier ist das nicht so der fall ,vor allem wenn man dann noch nett und fähr ist .


    Denke demnächst einfach dran.Ich kann dir aber sagen das du hier im diesen Forum bestimmt eine Antwort innerhalb 12 Stunden bekommen wirst.

    Meistens auch mit Lösung oder Vorschläge.


    Aber Herzlich willkommen im Forum:P

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Bei mir im Browser sieht alles normal aus. Was genau meinst Du?

    Seite aufrufen und dann im Browser den Seitenquelltext anzeigen lassen. Im Firefox wird dir dabei sogar angezeigt (Text in rot), was nicht stimmt, zumindest teilweise. Hier zum Beispiel hast du auf jeder Seite diesen groben Fehler:

    HTML
    1. <!doctype html>
    2. <head>
    3. <meta charset="utf-8">
    4. <title>Home of biogli.de</title>
    5. </head>
    6. <body>
    7. <!doctype html>
    8. <html lang="de">
    9. <head>

    Da sind aber auch noch andere Fehler drin, teste deine Seiten auf https://validator.w3.org/

    Dass alles richtig angezeigt wird, hast du nur der Fehlertolereanz der Browser zu verdanken.

  • Danke m.scatello,


    das lag daran, dass ich mein Menü u.a. includiere und da den Head auch drin hatte. Habe den Head jetzt ausgelagert.

    Firefox ist ja super hilfreich mit den roten Markierungen. Das ist klasse. Die Seite ist jetzt zumindest "Firefox-clean", das mit dem Validator probiere ich auch noch aus...

    :thumbup:

    Update: auch der Validator zeigt keine Fehler mehr (Außer, dass ich keine Überschrift H1 und H2 verwende sondern die größte H3 ist).

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von ogli () aus folgendem Grund: Update: