Advenskalender

[Fritz]

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;
}

[pl]

@@@

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.

[Rolf b]

Ä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

[pl]

Ä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 ;)

[pl]

Ä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!?

[dedlfix]

Tach!

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

Wir propagieren ganzjährig semantisch passendes und vorbildliches HTML.

dedlfix.

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

---

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

[Gunnar Bittersmann]

@@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 🖖

[Rolf b]

Ja gut. Aber geht das ohne JavaScript?

[Matthias Apsel]

Hallo Rolf b,

Ja gut. Aber geht das ohne JavaScript?

Ja, Media Queries existieren.

Bis demnächst
Matthias

[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. Oder wie macht man das?

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖

[Gunnar Bittersmann]

@@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 🖖