Antwort an „MrMurphy“ verfassen

SELF-Forum

Div verstecken

MrMurphy

Ich hatte bereits vor längerer Zeit mal ein Beispiel erstellt. Informationen stehen im Quelltext.

Ich muss den Quelltext auf zwei Beiträge verteilen:


<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text Aus- und Einblenden CSS</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      @media all {
      * {
         /*box-sizing: border-box;*/
      }
      html {
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }
   /*Schriften*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 150%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Sans-Serif';
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      a {
         color: blue;
         text-decoration: none;
         outline: none;
         margin: 0;
      }
      figcaption {
         font-family: 'Sans-Serif';
         font-size: 0.9rem;
         margin: 0;
      }
   }
   /*Eigener Checkbox Hack (ech01)*/
   @media all {
      .ech01 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech01 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech01>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech01 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech01>div:nth-of-type(2) label {
         display: none;
      }
      .ech01 label:checked {
         background-color: red;
      }
      .ech01 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech01 section {
         display: none;
      }
      .ech01 #ech011:checked ~ section:nth-of-type(1),
      .ech01 #ech012:checked ~ section:nth-of-type(2),
      .ech01 #ech013:checked ~ section:nth-of-type(3),
      .ech01 #ech014:checked ~ section:nth-of-type(4),
      .ech01 #ech015:checked ~ section:nth-of-type(5),
      .ech01 #ech016:checked ~ section:nth-of-type(6),
      .ech01 #ech017:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech01>div:nth-of-type(1) {
         display: none;
      }
      .ech01 label {
      }
      .ech01>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Eigener Checkbox Hack (ech02)*/
   @media all {
      .ech02 {
         padding: 1rem;
         border: 2px solid gray;
         border-radius: 0.5rem;
         margin: 1rem 0 0 0;
      }
      .ech02 div {
         padding: 0.5rem;
         border: 2px solid silver;
      }
      .ech02>div:nth-of-type(1) {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }
      .ech02 label {
         background-color: gold;
         text-align: center;
         cursor: pointer;
         padding: 0.3rem 0.5rem;
         border: 2px solid transparent;
         border-radius: 0.4rem;
      }
      .ech02>div:nth-of-type(2) label {
         display: none;
      }
      .ech02 label:checked {
         background-color: red;
      }
      .ech02 input {
         position: absolute;
         left: -20000px;
         top: auto;
         width: 1px;
         height: 1px;
      }
      .ech02 section {
         display: none;
      }
      .ech02 #ech021:checked ~ section:nth-of-type(1),
      .ech02 #ech022:checked ~ section:nth-of-type(2),
      .ech02 #ech023:checked ~ section:nth-of-type(3),
      .ech02 #ech024:checked ~ section:nth-of-type(4),
      .ech02 #ech025:checked ~ section:nth-of-type(5),
      .ech02 #ech026:checked ~ section:nth-of-type(6),
      .ech02 #ech027:checked ~ section:nth-of-type(7) {
         display: block;
      }
   }
   @media only screen and (max-width: 1000px) {
      .ech02>div:nth-of-type(1) {
         display: none;
      }
      .ech02 label {
      }
      .ech02>div:nth-of-type(2) label {
         display: block;
         margin: 0.5rem 0rem 0 0rem;
      }
   }
   /*Cards*/
   @media all {
      .cards {
         padding: 0 0.5rem 1rem 0.5rem;
         border: 2px solid gray;
         border-radius: 0.4rem;
         margin: 0.5rem 0 0 0;
         display: flex;
         flex-wrap: wrap;
      }
      .cards section {
         box-shadow: 5px 5px 5px silver;
         padding: 0 0.5rem 1rem 0.5rem;
         border: 1px solid gray;
         border-radius: 0.4rem;
         margin: 1rem 0.5rem 0 0.5rem;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: calc(25% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 1200px) {
      .cards section {
         flex-basis: calc(33.33% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 900px) {
      .cards section {
         flex-basis: calc(50% - 1rem - 2px - 1rem);
      }
   }
   @media only screen and (max-width: 650px) {
      .cards section {
         flex-basis: calc(100% - 1rem - 2px - 1rem);
      }
   }

   </style>
</head>
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen