7
votes

Créez un horaire hebdomadaire à l'aide de CSS / HTML

J'essaie de créer un calendrier hebdomadaire de classes pour un studio de yoga. J'ai créé une version statique à l'aide d'une table que vous pouvez voir à:

http://www.studioleisure.com/classes.php < / grève>

Remarque: ^^ Cette page Web contient maintenant la version HTML finie créée à l'aide des réponses à cette question.

J'ai un problème avec des classes qui commencent à 15 minutes après l'heure ou à celles qui durent plus d'une heure et il se déplace assez difficile pour créer le PHP pour cette version.

Je me demandais simplement si quelqu'un avait des idées pour créer un qui aurait un aspect similaire, mais qu'il soit plus facile de coder le PHP.


10 commentaires

Qu'est-ce que "le PHP" est censé faire exactement?


Je veux que les données du calendrier proviennent d'une base de données


Semble bon comment c'est pour le moment.


@Max Quel aspect de l'opération êtes-vous coincé? Le look de la page statique peut sûrement être atteint par un script PHP également


Je supposerais qu'il est plus difficile d'obtenir le travail HTML / CSS dans ce cas?


Je ne suis pas vraiment coincé que c'est juste que je pensais qu'il peut y avoir une meilleure façon de le faire. Je vais aussi ajouter beaucoup plus de lignes pour soutenir 15 minutes du passé.


Je pense que cette question pourrait être un peu vague pour débordement de pile: p


Qu'avez-vous si loin dans la voie du code PHP?


Rien de vraiment, je me demandais simplement si quelqu'un pouvait penser d'une manière différente qui peut être plus facile à coder. Si vous pouvez penser à un PHP utile pour cela, je l'apprécierais!


Si j'étais vous, je frotterais le PHP sur le calendrier


3 Réponses :


1
votes

Nice Markup. Mais vous avez raison - faites cela avec une fine granularité entraînera un monstre d'une table (et le code d'accompagnement pour la générer). C'est faisable, mais il y a un moyen plus facile, bien que ce ne soit pas si propre:

Créez la table comme vous le feriez habituellement, mais faites-la vide. Toutefois, définissez des largeurs / hauteurs fixes pour chaque ligne et colonne. Utilisez ensuite un positionnement absolu pour placer les entrées de calendrier sur le dessus de la table . PRESTO - Il a l'air de la même chose, mais vous pouvez placer les entrées avec des précisions mineures si vous le souhaitez.

L'inconvénient de ceci est que la copie-pâte ne fonctionnera pas (très bien) sur cette bête, et je n'ai aucune idée de ce qu'elle fera pour le référencement et l'accessibilité. Probablement rien de bon. Donc, si ces deux sont importants pour vous, vous devrez recourir à des travaux de contournement (bien que je pense qu'il existe des moyens d'utiliser le schéma et avoir un bon référencement / accessibilité).

ajouté: Oh, et je viens de réaliser que vous devrez également surveiller des textes débordants. Les cellules de table se développeraient automatiquement, mais absolument positionnées ne le feront pas.

ajouté 2: hé, voici une idée: utilisez un positionnement relatif pour déplacer un peu les entrées. Au lieu d'écrire le texte directement dans les cellules, écrivez-les à l'intérieur d'une portée, puis de la positionner relativement, il se déplace pour les 15 minutes nécessaires. Encore une fois, ces appels pour des largeurs fixes et des hauteurs de cellules, et le débordement sera un problème, mais le référencement / l'accessibilité ne sera pas blessé et une pâte de copie fonctionnera comme prévu.


2 commentaires

Ahh bien tu as travaillé ma vague question! C'est parfait. Je suis plus préoccupé par l'obtention de quelque chose qui fonctionne que SEO pour le moment.


Cela ressemble également à une bonne idée. Je vais deffo essayer toutes les méthodes que vous avez pensées. Vous êtes si utile. Stack Overflow Rocks!



8
votes

Je perdrais la table et n'utilisez que des colonnes. Ensuite, je placerais les classes avec CSS ( Position: absolu code>) et calculez la valeur code> haut code> en fonction de leur heure de début et de la "hauteur" en fonction de leur longueur. Les lignes horizontales pourraient être obtenues à l'aide d'une image de fond répétée. Les étiquettes de gauche pourraient être placées de la même manière que vous placeriez les classes.

HTML pourrait ressembler à ceci: P>

<ul>
 <!-- Monday: -->
 <li>
  <strong>Monday</strong>
  <ul class="classes">
   <li style="top:200px; height:100px;">
    <span>10:30 - 11:45</span>
    Class title
   </li>
   <li>
    <!-- More classes here... -->
   </li>
  </ul>
 </li>
 <li>
  <!-- Other days here... -->
 </li>
</ul>
<ul class="labels">
 <li style="top:180px">10:00</li>
 <!-- More labels here... -->
</ul>


3 commentaires

Oh merci d'avoir passé le temps écrit tout ça! Je vais donner aux deux réponses un essai, merci!


Le vôtre semble avoir un meilleur référencement afin que je vais aller pour le vôtre en premier! :)


S'il vous plaît prouver que je vous trompe, mais je pense que vous vous tuerez d'essayer d'atteindre cet effet sur les navigateurs à l'aide de tables;) - Bonne chance!



0
votes

SUIVEMENT est un modèle de planification horaire hebdomadaire que j'ai créé.

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111


0 commentaires