Problème CSS : Alignement et/ou width

Problème CSS : Alignement et/ou width - HTML/CSS - Programmation

Marsh Posté le 25-05-2011 à 14:14:44    

Bonjour,
 
Je me monte un ptit site perso pour gérer les dates de diffusions de mes séries et le suivi de ce que j'ai pu voir ou non.
Voici le site en question : http://buzzy.free.fr/test_cal.php
 
Dans la partie de droite, en cliquant sur le nom des séries, les saisons, puis les épisodes apparaissent.
Mon problème se trouve dans les tableaux d'épisodes.
Ca fait plusieurs semaines que je cherche comment réussir à aligner le tout correctement sans succès...
 
En prenant le cas de la saison 1 de Games of Thrones, vous remarquerez que la partie de droite peut contenir un icône ou une date.
J'ai tenté pas mal de choses, tout passer en div, tout passer en table avec des td/tr, ... mais j'ai toujours un soucis quelque part sur cette partie là.
 
Auriez vous une idée ?
Merci !
 
PS : je développe pour du Chrome, sans soucis de compatibilité puisque ce site est uniquement pour usage perso.
Donc pas sûr qu'il fonctionne très bien sous IE ou Firefox.

Reply

Marsh Posté le 25-05-2011 à 14:14:44   

Reply

Marsh Posté le 25-05-2011 à 16:07:39    

Finalement j'ai trouvé la source de mon problème.
Pour l'affichage des saisons et des épisodes, j'utilise une fonction jQuery (slideDown) qui modifie le style de l'élément à afficher en type block...
D'où mes problèmes vu que l'élément en question était un table.
J'ai pu le régler en l'encapsulant dans un div.
 
Me reste à régler mes problèmes d'overflow avec le nom des épisodes !

Reply

Marsh Posté le 06-06-2011 à 14:18:04    

Bon je remonte mon sujet, je suis une quiche en CSS...
Je n'arrive pas à gérer un text-overflow correctement.
Via ma page (http://buzzy.free.fr/test_cal.php), en cliquant sur la série hung puis la saison 1, j'ai tout mon tableau qui se décale et je n'arrive pas à savoir pourquoi...
Ca ne fonctionne ni sous IE ni sous Chrome.
 
La construction est la suivante :
 

Code :
  1. - div (tab_arrondi) : tableau des séries suivies
  2.   > div (tabarr_contenu) : contenu du tableau précédent
  3.     > div (liste_series)
  4.       > div (serie_saisons) : contient la saison (titre + épisodes)
  5.         > div (saison_episodes) : contient la liste des épisodes
  6.           > table
  7.             > tr (episode_entete)
  8.               > td (episode_titre) : titre
  9.               > td (episode_statut) : icone ou date


 
Pour la fin avec la table, j'ai également testé en conservant des divs et ça ne marchait pas non plus :/
 
Et voici le CSS correspondant :
 

Code :
  1. div.tab_arrondi {
  2.   background-color: #8EABD7;
  3.   margin-bottom: 10px;
  4.   border-top-left-radius: 10px;
  5.   border: solid 1px #8EABD7;
  6. }
  8. div.tabarr_contenu {
  9.   background: #fff;
  10.   padding: 3px;
  11. }
  13. .saison_episodes{
  14.   width: 100%;
  15.   border-spacing: 0;
  16.   border-collapse: collapse;
  17.   text-align: left;
  18.   font-size: 12px;
  19. }
  21. .serie_entete, .saison_entete, .episode_entete
  22. {
  23.   background: #FFFFFF;
  24.   width: 100%;
  25.   height: 18px;
  26. }
  28. .episode_titre {
  29.   padding: 0 0 0 10px;
  30.   text-overflow: ellipsis;
  31.   overflow: hidden;
  32.   white-space: nowrap;
  33.   width: 90%;
  34. }
  36. .episode_statut {
  37.   white-space: nowrap;
  38.   width: 18px;
  39.   text-align: right;
  40. }


 
Au cours de mes tests, j'ai pas mal touché à tout dans tous les sens.
Certaines lignes n'ont peut être plus lieues d'être ou n'ont pas de sens...
 
D'avance merci pour votre aide !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed