Fritz: Advenskalender

Hallo,

ich weiß, ich bin ein wenig spät dran für einen Adventskalender aber vielleicht bekomme ich es heute Abend noch hin.

Meine Idee war folgende

<section id="weihnachten2016">
   <h2>Adventskalender</h2>

   <span>1</span>
                    
</section>

Und die <span> 24 mal kopieren und vielleicht mit Flex-Box nebeneinander und untereinander anordnen? Immer 4 pro Zeile

Oder sollte ich lieber ein <div> oder gar eine <ul><li> nehmen?

UPDATE: Meine Vorschlag

<section id="weihnachten2016">
   <h2>Adventskalender</h2>

   <ul>
     <?php 
      $i = 1;
       while ($i <= 24)
      {
       ?>
       <li><a href="#"><?php echo $i; ?></a></li>
      <?php 
       $i++;
      }
?>                 
</section>
#weihnachten2016 ul li {
    width: 4em;
}

#weihnachten2016 ul {
    display: flex;
    flex-wrap: wrap;
}
  1. @@@

    Und die <span> 24 mal kopieren und vielleicht mit Flex-Box nebeneinander und untereinander anordnen? Immer 4 pro Zeile

    Ne. Wieviele * pro Zeile bestimmst nicht Du sondern die Breite des Ausgabegerätes bestimmt das. Du kannst Dich jedoch auf ein semantisch passendes Element festlegen für das, was da jeden Tag angeklickt werden soll.

    1. Äh, ich hab ja vielleicht keine Ahnung, aber das hier

      <p id="17" onclick="query(17)" class="linksbild" style="cursor:pointer;width:101px;height:101px;border-style:dotted"> 
      <img src="/advent/17.gif" alt="Tag 17"> </p>
      

      ist semantisch passend und vorbildliches HTML?!

      Rolf

      1. Äh, ich hab ja vielleicht keine Ahnung, aber das hier

        <p id="17" onclick="query(17)" class="linksbild" style="cursor:pointer;width:101px;height:101px;border-style:dotted"> 
        <img src="/advent/17.gif" alt="Tag 17"> </p>
        

        ist semantisch passend und vorbildliches HTML?!

        Hab ich nie behauptet ;)

        1. Äh, ich hab ja vielleicht keine Ahnung, aber das hier

          <p id="17" onclick="query(17)" class="linksbild" style="cursor:pointer;width:101px;height:101px;border-style:dotted"> 
          <img src="/advent/17.gif" alt="Tag 17"> </p>
          

          ist semantisch passend und vorbildliches HTML?!

          Hab ich nie behauptet ;)

          Der Adventskalender wird mittlerweile fleißig requestet ;)

          Wo sind eigentlich Eure Adventskalender mit semantisch passenden und vorbildlichem HTML!?

          1. Tach!

            Wo sind eigentlich Eure Adventskalender mit semantisch passenden und vorbildlichem HTML!?

            Wir propagieren ganzjährig semantisch passendes und vorbildliches HTML.

            dedlfix.

            1. @@dedlfix

              Wo sind eigentlich Eure Adventskalender mit semantisch passenden und vorbildlichem HTML!?

              Wir propagieren ganzjährig semantisch passendes und vorbildliches HTML.

              Das habe ich doch gerade erst irgendwo gelesen. Ach, hier ha’m wa’s ja.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      2. @@Rolf b

        <p id="17" onclick="query(17)" class="linksbild" style="cursor:pointer;width:101px;height:101px;border-style:dotted"> 
        <img src="/advent/17.gif" alt="Tag 17"> </p>
        

        ist semantisch passend und vorbildliches HTML?!

        Vor allem ist das unbenutzbar[1]. 💩

        Semantisch passendes und vorbildliches CSS hätte das sichtbar gemacht:

        [onclick]:not(a):not(button):not(input):not([tabindex="0"]) { outline: 0.5em solid red !important }
        

        Die Registrierung von click-Events macht nur für solche Elemente Sinn, die auch per Tastatur ansteuerbar sind: Links, Buttons, Eingabefelder, Elemente mit tabindex="0".

        LLAP 🖖

        --
        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe

        1. im Sinne von: nur in Ausnahmefällen benutzbar ↩︎

    2. @@pl

      Ne. Wieviele * pro Zeile bestimmst nicht Du sondern die Breite des Ausgabegerätes bestimmt das.

      Ja, aber. Etwas mitbestimmen sollte man da schon. 24 an der Zahl sind prädestiniert dafür, das 1, 2, 3, 4, 6 oder 8 * pro Zeile angezeigt werden; nicht aber 5 oder 7.

      LLAP 🖖

      --
      „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. Ja gut. Aber geht das ohne JavaScript?

        1. Hallo Rolf b,

          Ja gut. Aber geht das ohne JavaScript?

          Ja, Media Queries existieren.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. Ok, dann muss ich aber im CSS exakt wissen, wie groß meine Bilder sind, um den Container um sie herum passend in der Breite zu dimensionieren. Oder wie macht man das?

            1. @@Rolf b

              Ok, dann muss ich aber im CSS exakt wissen, wie groß meine Bilder sind, um den Container um sie herum passend in der Breite zu dimensionieren.

              Nein, du musst wissen, wie breit deine (Listen-)Elemente mindestens und höchstens sein sollen.

              Bilder machst du 100% (der Breite ihres Containers) breit.

              LLAP 🖖

              --
              „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  2. @@Fritz

    Oder sollte ich lieber ein <div> oder gar eine <ul><li> nehmen?

    Eine Auflistung von Tagen ist eine Liste, ja.

    <section id="weihnachten2016">
       <h2>Adventskalender</h2>
    
       <ul>
         <?php 
          $i = 1;
           while ($i <= 24)
          {
           ?>
           <li><a href="#"><?php echo $i; ?></a></li>
          <?php 
           $i++;
          }
    ?>                 
    </section>
    

    Die Unschönheit dieses Codes hatte ich schon mal mit Dem Martin diskutiert.

    Verwende die alternative Schreibweise.

    Willst du die Türchen tatsächlich von 1 bis 24 geordnet ausgeben? Oder doch unsortiert? Dazu erstellst du dir einfach ein Array …

    <?php
      $doors = range(1, 24);
      shuffle($doors);
    ?><ul>
    <?php foreach ($doors as $door): ?>
        <li><a href="door<?php echo $door; ?>"><?php echo $door; ?></a></li>
    <?php endforeach; ?>
      </ul>
    

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  3. @@Fritz

          $i = 1;
           while ($i <= 24)
          {
           // … [tu was]
           $i++;
          }
    

    Man kann jede For-Schleife als While-Schleife schreiben und jede While-Schleife als For-Schleife. Nur ist das nicht besonders sinnvoll.

    Die verschiedenen Schleifenarten existieren für verschiedene Anwendungsfälle. Und die Auswahl der jeweils passenden Schleifenart macht den Code besser lesbar.

    Hier ist die For-Schleife angebracht.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe