zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Div in einen Li element einbauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 08.11.2016, 16:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.558
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

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?
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 08.11.2016, 16:32
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Ich weiß leider nicht mehr weiter.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 08.11.2016, 16:41
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 479
dazzle89 wird schon bald berühmt werden
Standard

Zitat:
Zitat von agalva Beitrag anzeigen
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.
Mit Zitat antworten
  #14 (permalink)  
Alt 08.11.2016, 19:31
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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

Geändert von MrMurphy (08.11.2016 um 19:35 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 09.11.2016, 08:51
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.558
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von dazzle89 Beitrag anzeigen
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.
Mit Zitat antworten
  #16 (permalink)  
Alt 09.11.2016, 10:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #17 (permalink)  
Alt 09.11.2016, 11:13
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #18 (permalink)  
Alt 09.11.2016, 11:14
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.558
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von agalva Beitrag anzeigen
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?
Mit Zitat antworten
  #19 (permalink)  
Alt 24.11.2016, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 24.11.2016, 16:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

so ich habe die webseite hochgeladen

example

vielleicht kann sich jemand der Code anschauen und mich hinweisen was ich falsch mache....
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:53 Uhr.