28172 sujets

CSS et mise en forme, CSS3

Mise en forme tableau via CSS

Pour commencer , enchanté , je suis tout nouveau sur le forum Si je vous demande aujourd'hui de l'aide c'est afin de finir mon projet de bac , je dois monter un site internet qui à pour vocations de permettre à un client de réserver sa place de parking avant d'arriver au centre commercial . Nous avons quasiment presque tout fini mais il nous manque un élément essentiel .

Notre service propose 3 services , La matinée , l'aprem ou toute la journée . En fonction du choix de la date et de l'heure que le client fait ainsi que de la formule du client , nous avons programmé le fait quae dans la page suivante , le site nous renvoi sous forme de liens cliquables , la liste des places disponibles .

Je désire classé les places ( Dispo et indispo ) dans une sorte de table , pour reproduire la forme d'un parking . Mon professseur m'a donné une piste en me disant de créer une classe " PlaceDispo" et " PlaceIndispo" dans le css et d'ensuite créer l'image à afficher sous forme d'un rectangle de couleur verte pour les dispos et gris pour les indispo au format jpeg .

Hélas je ne vois pas du tout comment faire et j'aimerai si possible que l'on me donne des pistes ou bien des conseils .

Merci à tous pour votre aide Smiley smile
Administrateur
Bonjour et bienvenue, Smiley smile

la question porte-t-elle sur la mise en forme elle-même (à quoi doit-elle ressembler graphiquement ou quels éléments doivent y figurer ?) ou sur la création d'un rectangle avec plusieurs couleurs possibles ?

Tu peux utiliser un tableau HTML (table, tr, td) si les données à afficher sont tabulaires (indice fréquent : s'il y a des entêtes de colonnes à gauche et/ou en haut, c'est un tableau hop pour eux ce sera l'élément th).
Pour ce qui est de créer des rectangles, ça peut être une couleur de fond s'il y a du texte au-dessus ou bien une bordure qui fait la taille de l'élément, entre autres méthodes. Attention à ne pas apporter une information à l'utilisateur que par la couleur, ce n'est pas accessible (aux personnes qui ne perçoivent pas la couleur). Un non-voyant peut très bien utiliser ce site de réservation de place de parking même s'il ne conduit pas ; il y a 2 à 7 places dans une voiture Smiley cligne Et 1 homme sur 10 ne fait pas la différence entre le rouge et le vert, entre autres non-perception de couleurs.
Modifié par Felipe (15 Apr 2015 - 14:59)
Merci de votre réponse aussi rapide Smiley smile

Alors je m'explique . En fonction du choix de l'heure et de la date dans un formulaire de réservation , la page suivante ( si aucunes réservation n'est faite pour ce créneaux ) affiche sous forme de liens cliquables les places disponibles et seulement le nom des places indisponibles ( 1 à 20 ) .

J'aimerai faire ceci :
http://www.noelshack.com/2015-16-1429127493-place-op.png

Avec vert comme dispo et gris comme indispo .

Voici la page concernée : http://pastebin.com/2fNzMiEL

Voici le CSS qui contient toutes les classes du site : http://pastebin.com/4LLsNDva

J'ai fait les rectangles de base , le vert et le gris . Je voudrais donc placer les liens cliquables ( 1 à 20 ) sur ces fameux rectangles . Et organiser mes rectangles tel un parking ( comme sur l'image ) .

Sauf que je ne vois pas du tout comment faire , je ne sais pas par où attaquer le problème Smiley ohwell


Merci de vos réponses Smiley biggrin
Modifié par fokusse (16 Apr 2015 - 00:55)
Bonjour,
il faut gérer les disponibilités dans une base de données, donc une table des places avec la disponibilité, et avant affichage du tableau, interroger la base, et pour chaque place afficher le numéro, le lien vers la résa de la place si dispo, et lui affecter la class "dispo" ou "indispo"

Il y a une gestion des places dans une base de données ou autre prévue ?
Dans la base de données nous avons deux tables : " Place" Qui contient le numéro de la place et "Résa" qui elle contient l'id de la résa le numéro de la place , la date de la réservation , la formule ainsi que les infos du clients .

Je pense déja avoir réglé le problème de l'affichage des cadres en fonction de la disponibilité à l'aide de classes : Dispo et indispo .

Le problème est que je n'arrive pas à organiser comme je le souhaite les résultats de mes requêtes SQL .

Je rappel , comme ceci : http://www.noelshack.com/2015-16-1429127493-place-op.png
( Au moins l'alignement des cadres , tampis pour les "places" de parking .
Modifié par fokusse (16 Apr 2015 - 12:17)
Bonjour,

pour la mise en forme de tes tableaux, tu peut faire quelque chose de ce genre eventuellement. http://codepen.io/gc-nomade/pen/KwOYQY
La mise en forme se base sur l'attribut title, si tu cible aussi de vieux navigateurs il te faut alors te baser sur de simples class.
Modifié par gc-nomade (16 Apr 2015 - 14:14)
La présentation est exactement comme je le souhaite ! Merci beaucoup ! Smiley smile

On doit présenter notre projet au lycée , C'est la version de IE livrée avec windows 7 je crois bien .

Je suis un novice en codage et je ne sais pas comment intégrer ta présentation à mon code car il me semble que sa marcherais si c'était des liens que j'aurais créer moi même . Mais là c'est le résultat de la requête qui s'affiche sous forme de lien et donc je ne vois pas comment faire la même présentation que toi Smiley ohwell
Modifié par fokusse (16 Apr 2015 - 19:19)
tu peut reprendre le CSS et renommer les class en dispo/pasdispo et intégrer dans ta boucle un comptage ( via un modulo %)de façon a insérer <tr></tr> pour passer d'une ligne à l'autre et mettre un <td> à la place/ou autour de <p> par exemple.

Ne pas oublier d'encapsuler ça dans un <table> et éventuellement voir faire un flush pour actualiser le <caption> si tu souhaite t'en servir.

Peut-etre vaut-il d'ouvrir un nouveau thread dans le forum http://forum.alsacreations.com/list-20-Dnveloppementwebcnitnserveur.html pour reprendre ta boucle si tu ne t'en sort pas.

<edit>w7 avec IE qui je crois fait partis des mise a jour par défaut, a priori, IE11 devrait-être dispo.
Pour la partie CSS , cela dépendra surtout du HTML que ta boucle va produire.
A vous les forums Smiley smile </edit>

cordialement,
Modifié par gc-nomade (16 Apr 2015 - 20:48)
Bonjour , désolé de ne pas avoir donné de nouvelles mais je n'étais pas chez moi et je ne disposais pas d'accès à internet .
Pendant ce temps j'ai cherché un peu avec les pistes que vous m'aviez donné mais je n'ai pas du tout avancé .
Pouvez vous m'éclairer un peu sur cette histoire de "modulo" car j'avoue ne pas avoir compris leur intéret .
J'ai poster là où vous m'aviez dit , une personne m'as dit de génèrer le HTML sur le serveur par code PHP qui exploite la table , mais celà à l'air assez complexe . Il n'y à vraiment pas moyen d'incorporer le css que vous m'aviez fait avec celui qui gère mes pages ?

Merci d'avance pour vos réponses Smiley lol
bonjour,

comment génère tu le HTML qui affiche tes places de parking ?
J'imagine, peut-être à tord, que tu extrait le nombre de place et leur état (réservé/libre) à partir d'une base de données à l'aide d'une boucle en php, c'est pourquoi je te propose de modifier cette boucle, pour la partie html generé et l'usage du modulo pour créer tes <tr> toute les quatre place et une table toutes les 8 places, en admettant que ton parking est composée de blocs de 8 places en vis à vis.

++
Sujet clos
Aller à