Div in einen Li element einbauen - Seite 2

cloned · #11 (**permalink**) 08.11.2016, 16:21

warum rückst du immer so nach und nach mit deinen Infos raus? Merkst du nicht selber wie du es anderen schwer machst dir so zu helfen?

MrMurphy · #12 (**permalink**) 08.11.2016, 16:32

Hallo

Ich weiß leider nicht mehr weiter.

Gruss

MrMurphy

dazzle89 · #13 (**permalink**) 08.11.2016, 16:41

Zitat:

Zitat von agalva

Hi, So eine Lösungsansatz sieht sehr sehr gut aus, aber wenn ich die seite aufs Mobile Ansicht resize, werden alle texten ganz unten angezeigt, ich würde sie gern unten von den jeweiligen "labels anzuzeigen".... ist das überhaupt möglich?

Genau das ist doch der Fall. Montag ist unter Montag, Dienstag unter Dienstag, Mittwoch unter Mittwoch usw.

Meinst du die Desktop-Ansicht? Und möchtest dass jeder Text unter seinem jeweligen Label sitzt? In der Demo beginnen ja alle Texte auf der gleichen Stelle.

Wenn es das ist, was du meinst, musst du eine Verschachtelung verwenden, wie ich sie dir vorgeschlagen habe.

MrMurphy · #14 (**permalink**) 08.11.2016, 19:31

Hallo

Ich habe mein Beispiel mal erweitert um auch Alternativen aufzuzeigen.

Nachfolgend der gesamte Quelltext, da ich meinen Testserver regelmäßig aufräume:

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Texte einblenden 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Icon-Font - font-family: 'FontAwesome';*/
   @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css);

   /*Überschriften - font-family: 'Roboto Slab', Serif;*/
   @import 'https://fonts.googleapis.com/css?family=Roboto+Slab';

   /*Fließtext - font-family: 'Roboto', Sans-Serif";*/
   @import 'https://fonts.googleapis.com/css?family=Roboto';

   /*Zahlen* - font-family: 'Merriweather';*/
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         /*box-sizing: border-box;*/
         min-width: 0;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         padding: 0 0.25rem 0.5rem 0.25rem;
         border-top: 0.01px solid transparent;
         margin: 0;
      }
   }

   /*Schriften 01*/
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0.25rem 0 0.25rem;
      }
      p, li, dl, dt, address {
         font-family: 'Roboto', '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: 'Roboto', '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);
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
   }

   /*Flexbox für IE*/
         /*-ms-flex-preferred-size: calc(50% - 1rem);*/
   /*Vorlage für das gesamte CSS*/
   @media all {
   }
   /*Vorlage zum Kopieren für Media Queries - Mobile first*/
   @media only screen and (min-width: 0px) {
   }
   /*Vorlage zum Kopieren für Media Queries - Desktop first*/
   @media only screen and (max-width: 0px) {
   }

   </style>
</head>
<body>
   <header>
      <h1>Texte einblenden</h1>
   </header>
   <nav>
   </nav>
   <main>

      <h2>Weisheiten von Muhammad Ali</h2>

      <h2>Vorbemerkung</h2>

      <p>Ich selbst halte grundsätzlich nichts davon Texte zunächst zu verstecken. Das ist eine Barriere und damit benutzerunfreundlich. Außer beim Rätseln oder zum Lernen.</p>

      <p>Als Alternative bevorzuge ich sogenannte cards (Karten). So kommt der Besucher nur durch Scrollen an alle Informationen, die dann auch nicht wieder verschwinden.</p>

      <p>Ob beim Laden der Webseite bereits eine Information geöffnet werden soll, und welche, kann im HTML-Quelltext über das Attribut checked bestimmt werden.</p>

      <p>Alle drei Möglichkeiten funktionieren gut bei den üblichen Bildschirm- und Fenstergrößen.</p>

      <h3>Lösung mit radio</h3>

      <p>Es kann nur eine Information gleichzeitig geöffnet sein:</p>

      <article class="ech01">

         <div>
            <label for="ech011">Montag</label>
            <label for="ech012">Dienstag</label>
            <label for="ech013">Mittwoch</label>
            <label for="ech014">Donnerstag</label>
            <label for="ech015">Freitag</label>
            <label for="ech016">Samstag</label>
            <label for="ech017">Sonntag</label>
         </div>

         <div>
            <input id="ech011" type="radio" name="ech01" checked>
            <input id="ech012" type="radio" name="ech01">
            <input id="ech013" type="radio" name="ech01">
            <input id="ech014" type="radio" name="ech01">
            <input id="ech015" type="radio" name="ech01">
            <input id="ech016" type="radio" name="ech01">
            <input id="ech017" type="radio" name="ech01">

            <label for="ech011">Montag</label>
            <section>
               <h3>Montag</h3>
               <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            </section>

            <label for="ech012">Dienstag</label>
            <section>
               <h3>Dienstag</h3>
               <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
            </section>

            <label for="ech013">Mittwoch</label>
            <section>
               <h3>Mittwoch</h3>
               <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            </section>

            <label for="ech014">Donnerstag</label>
            <section>
               <h3>Donnerstag</h3>
               <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
            </section>

            <label for="ech015">Freitag</label>
            <section>
               <h3>Freitag</h3>
               <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
            </section>

            <label for="ech016">Samstag</label>
            <section>
               <h3>Samstag</h3>
               <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
            </section>

            <label for="ech017">Sonntag</label>
            <section>
               <h3>Sonntag</h3>
               <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            </section>

         </div>

      </article>

      <h3>Lösung mit checkbox</h3>

      <p>Die Lösung gefällt mir gut zum Lernen. Was gewusst wurde bleibt offen. Was nicht gewußt wurde wird wieder geschlossen und kann in den Folgedurchgängen gezielt abgefragt werden.</p>

      <p>Die einzelnen Informationen können unabhängig voneinander geöffnet und geschlossen werden:</p>

      <article class="ech02">

         <div>
            <label for="ech021">Montag</label>
            <label for="ech022">Dienstag</label>
            <label for="ech023">Mittwoch</label>
            <label for="ech024">Donnerstag</label>
            <label for="ech025">Freitag</label>
            <label for="ech026">Samstag</label>
            <label for="ech027">Sonntag</label>
         </div>

         <div>
            <input id="ech021" type="checkbox" name="ech02" checked>
            <input id="ech022" type="checkbox" name="ech02">
            <input id="ech023" type="checkbox" name="ech02">
            <input id="ech024" type="checkbox" name="ech02">
            <input id="ech025" type="checkbox" name="ech02">
            <input id="ech026" type="checkbox" name="ech02">
            <input id="ech027" type="checkbox" name="ech02">

            <label for="ech021">Montag</label>
            <section>
               <h3>Montag</h3>
               <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
            </section>

            <label for="ech022">Dienstag</label>
            <section>
               <h3>Dienstag</h3>
               <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
            </section>

            <label for="ech023">Mittwoch</label>
            <section>
               <h3>Mittwoch</h3>
               <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
            </section>

            <label for="ech024">Donnerstag</label>
            <section>
               <h3>Donnerstag</h3>
               <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
            </section>

            <label for="ech025">Freitag</label>
            <section>
               <h3>Freitag</h3>
               <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
            </section>

            <label for="ech026">Samstag</label>
            <section>
               <h3>Samstag</h3>
               <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
            </section>

            <label for="ech027">Sonntag</label>
            <section>
               <h3>Sonntag</h3>
               <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
            </section>

         </div>

      </article>

      <h3>Cards</h3>

      <article class="cards">

         <section>
            <h3>Montag</h3>
            <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
         </section>

         <section>
            <h3>Dienstag</h3>
            <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
         </section>

         <section>
            <h3>Mittwoch</h3>
            <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
         </section>

         <section>
            <h3>Donnerstag</h3>
            <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
         </section>

         <section>
            <h3>Freitag</h3>
            <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
         </section>

         <section>
            <h3>Samstag</h3>
            <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
         </section>

         <section>
            <h3>Sonntag</h3>
            <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
         </section>

      </article>

   </main>
   <footer>
      <p>Originaldiskussion: <a href="http://xhtmlforum.de/73062-div-einen-li-element-einbauen.html">http://xhtmlforum.de/</a></p>
   </footer>
</body>
</html>

Gruss

MrMurphy

cloned · #15 (**permalink**) 09.11.2016, 08:51

Zitat:

Zitat von dazzle89

Genau das ist doch der Fall. Montag ist unter Montag, Dienstag unter Dienstag, Mittwoch unter Mittwoch usw.

Das ist auch die neue Version wo das bereits berücksichtigt ist. In der "alten" war das niht so, dieser Teil scheint auch schon zu passen. Es gibt jetzt jedoch weitere Anforderungen die bis jetzt verschwiegen wurden, weshalb es etwas (=sehr) mühsam ist, ihm zu helfen.

agalva · #16 (**permalink**) 09.11.2016, 10:50

Sorry ich habe es nicht aktualisiert gehabt, jetzt habe ich es gesehen.

ich habe versucht eine image einzubauen unter jeden label, die images und labels werden aber dann senkrecht angezeigt, kann man das irgendwie ändern?
gruss

MrMurphy · #17 (**permalink**) 09.11.2016, 11:13

Hallo

Wahrscheinlich ja - wenn wir überhaupt erst mal verstehen was du willst.

In meinem Beispiel werden zum Beispiel section-Elemente (Container) geöffnet und geschlossen, die mit so ziemlich allen HTML-Elementen gefüllt und deren Inhalt mit CSS gestaltet und angeordnet werden kann.

Ein paar reale Daten von dir wären für eine konkrete Hilfe wahrscheinlich hilfreich.

Gruss

MrMurphy

cloned · #18 (**permalink**) 09.11.2016, 11:14

Zitat:

Zitat von agalva

kann man das irgendwie ändern?

Ja, mit einfachem CSS. Was funktioniert denn da genau nicht, was hast du denn alles probiert? Oder soll das ein "Macht mal alles für mich" werden?

agalva · #19 (**permalink**) 24.11.2016, 12:45

Also das mit dem Checkboxes ist genial, funktioniert richtig gut, habe versucht es zu verschachteln geht aber irgendwie nicht, beim mobile version funktioniert es aber besser, ich versuche es heute abend die Beispiele auf meinen Webserver hochzuladen, vllt kann mich jemand weiterhelfen.
Vielen Dank schon im Voraus!

agalva · #20 (**permalink**) 24.11.2016, 16:16

so ich habe die webseite hochgeladen

example

vielleicht kann sich jemand der Code anschauen und mich hinweisen was ich falsch mache....

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Element in gefloatetem Div unten auf gleicher Höhe ausrichten	mimii	CSS	8	07.11.2016 10:41
Kann Text nicht mittig in Listen Element (li) und Div ausrichten..	Nargaroth	CSS	1	06.09.2013 18:58
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Liste im IE	StarSt0rm	CSS	3	22.08.2007 20:04
Die maximale breite wird nicht erkannt	notebook20000	CSS	9	22.06.2006 20:14