Propriétés des div avec des valeurs différentes

Bonjour à vous,
Voila, j'ai un petit pb avec mon css.
En effet, je dois établir un emploi du temps qu'avec des div jusque la pas de soucis.
Je vous ai mis l'image de l'emploi du temps que je dois faire.
Pour cela j'ai créé 3 div :
une div 'edt' qui englobe le tout
une div 'journée' qui représente une journée
une div 'activité' qui représente chaque activité de la journée.
Comme vous pouvez le remarquer, la div activité ne possède pas toujours le même format et n'est pas à la meme place.
Mon problème c'est que je n'arrive pas à trouver un moyen efficace afin d'établir cet emploi du temps.
Notre professeur nous a donné des directives bien précises.
Pour chaque activité on la div class='activité' avec un id différent pour chaque activité.
Je vous laisse imaginer la taille du css...
Je vous donne un exemple :
voici le positionnement au sein du lundi groupe 3, de 8h a 10h :
#act_12345 {
left : 0%; //la div commence à 0% de la div journée
right : 80%; //la div se termine à 80% de la fin de la div journée
top : 50%; //la div commence a 50% du haut de la div journée
bottom : 25%; // et se termine à 25% du bas de la div journée
}

Merci d'avance pour votre aide précieuse !
Cliquez pour voir l'image plus grande

Modifié par paul1187 (03 May 2010 - 16:23)

Bonjour,

Personnellement, je commencerais par expliquer à ton prof qu'un tableau serait plus approprié ici... Mais l'exercice peut être un bon entrainement.

Avant de te donner une solution, on va déjà regarde ce que tu as fait (et qui est faux ^^; ) :

#act_12345 {
left : 0%; //la div commence à 0% de la div journée
right : 80%; //la div se termine à 80% de la fin de la div journée
top : 50%; //la div commence a 50% du haut de la div journée
bottom : 25%; // et se termine à 25% du bas de la div journée
}

Premièrement, j'espère que tes activités ont un positionnement relatif ou absolu (par rapport à la journée), sinon aucune chance que cela fonctionne. Ensuite, en positionnement relatif, absolu ou fixe, il ne faut préciser que deux coordonées : en x et en y. Il faut donc choisir entre top et bottom, puis entre left et right. Dans ton cas, le CSS devrait être :

#act_12345 {
potision: absolute;
left: 0%; 
width: 20%; 
top: 50%; 
height: 25%;
}

Pour ton problème, je ne sais pas si tu as le droit d'utiliser PHP ou non. Dans le cas d'un utilisation de PHP, tu pourrais générer ta feuille de style (ou une portion de celle-ci) en fonction du contenu de la page.

Si tu ne peux/veux pas utiliser PHP, il reste la solution d'inscrire les styles en ligne dans les éléments (div ou p) qui représentent les actvités.

Tu peux également, à l'aide de classes multiples prévoir tous tes cas de figure :

<p class="h0 d2h g3">...</p>

Pour heure de début : 0 ; durée deux heures ; groupe 3 qui se retraduirait en CSS :

p{
potision: absolute;
height: 25%;
}
.h0{
  left: 0%;
}
.d2h{
width: 20%; 
}
.g3{
top: 50%; 
}

À toi de voir donc.