Pb alignement <img/><span> (code crade inside)

Pb alignement <img/><span> (code crade inside) - HTML/CSS - Programmation

Marsh Posté le 24-08-2005 à 23:20:05    

Biiijjjooouuurrr (ou bonsoir)
 
Je suis sur un "truc" là, il faut aligner un span et une image (en fait, un span et une image représente un p'tite icone)
 
On utilise un span, car pour faire un changement de couleur, etc, c'est plus simple. Et l'image est utilisé car dans l'appli avant, c'était une image.
 
 
Grosso modo, ça donne ça :  
http://img289.imageshack.us/img289/1664/pb1hz.th.gif
 
Et comme on peu le voir, il y a un joli décalage, assez "pas beau" entre un span(rouge) et une image (verte) (ce qui génère un blanc en haut et en bas de chaque case, que je veux pas non plus : bref, j'ai deux elements par case, qui doivent recouvrir toute la case)
 
grosso modo, le code, ça donne ça (y'a pi être des balises qui sont parti lors du Ctrl+C/Ctrl+V):  

Code :
  1. <table id='planning' cellpadding='0' cellspacing='0'>
  2. <tr>
  3. <td></td>
  4. <td>1</td>
  5. <td>1</td>
  6. <td>1</td>
  7. <td>1</td>
  8. <td>1</td>
  9. <td>1</td>
  10. <td>1</td>
  11. <td>1</td>
  12. <td>11</td>
  13. <td>11</td>
  14. <td>11</td>
  15. </tr>
  16. <tr>
  17. <th>blabalablabl</th>
  18. <td nowrap><span ></span><span ></span></td>
  19. <td nowrap><span ></span><span ></span></td>
  20. <td nowrap><span'></span><span></span></td>
  21. <td nowrap><img src='test.gif'  /><span></span></td>
  22. <td nowrap><span></span><img src='test.gif'/></td>
  23. <td nowrap><img src='test.gif'/><img src='test.gif'/></td>
  24. </tr>
  25. <tr>
  26. </table>

 
 
et op, un p'tit bout de code css

Code :
  1. <style>
  2. table {
  3. border:1px solid blue;
  4. border-collapse: collapse;
  5. }
  6. td {
  7. border: 1px solid green;
  8. width: 20px;
  9. }
  10. tr {
  11. height: 20px;
  12. }
  13. img {
  14. width: 10px;
  15. height: 20px;
  16. }
  17. span {
  18. width: 10px;
  19. background-color: red;
  20. height: 20px;
  21. }
  22. </style>


Alors, oui, y'a du code crade, mais là, j'suis désespéré. Et j'suis près a accepter toutes les bidouilles (bon, sauf si c'est du n'importe quoi genre mettre un tableau dans chaque <td>...oui, j'ai déjà essayé  :whistle: )


Message édité par zapan666 le 24-08-2005 à 23:21:18

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 24-08-2005 à 23:20:05   

Reply

Marsh Posté le 24-08-2005 à 23:30:51    

tu style le TD directement au lieu de te faire chier à foutre un span
 
sinon ton span tu le transforme en type block, puisqu'un type inline ne peut avoir de dimensions, sauf les éléments inline de type remplacé et non remplacés comme les textarea, input....
 
donc la solution :  
 
<td><img></td>
ou
<td><span><img></span></td> ce que je trouve bizarre alors que tu peux style le TD directement <td class="truc">
 
et en CSS tu rajoute display:block à ton span
 
m'enfin j'ai po du saisier exactement ce que tu veux faire.
 
Hummmm M. zapan666 je suis supris que vous posiez une question aussi bizarre. Mais le HFR Help Service reste à votre écoute

Reply

Marsh Posté le 24-08-2005 à 23:54:22    

gatsusat a écrit :

ou
<td><span><img></span></td> ce que je trouve bizarre alors que tu peux style le TD directement <td class="truc">


ça, c'est pas bête du tout, j'vais essayé demain.
 
Pour style le td : pas possible (cf voir plus loin) car il y a une représentation en 1/2 journée.
J'aurais bien mis des colspan=2 sur les entetes et mettre 2 fois plus de td sur chaque ligne (et pouvoir style directement les tds) mais le risque est que la page JSP deviennent pire que Butagaz, comme usine à gaz...

gatsusat a écrit :


m'enfin j'ai po du saisier exactement ce que tu veux faire.


alllooorrrsss, comment dire...
 
C'est une sorte de calendrier, découpé en demi journée.
Donc il y a une différence entre le matin, et l'après midi
(c'est pour ça que j'ai deux span a la suite : un pour l'après midi, et et un pour le matin, ils peuvent avoir une couleur différentes, mais ce n'est pas visible sur l'image fourni)
Par contre,  il ne doit y avoir de blanc autour.
 
L'utilisation des images, c'est pour être compatible avec ce qui existe déjà dans l'appli (c'est un Intranet)
 
bref, c'est problématique
 
 
Edit :
http://img375.imageshack.us/img375/2310/pb22gr.th.png
 
 
exemple plus ou moins concret :  
1 ligne, c'est type top : (j'ai mis que des span, donc pas de pb)  
on peut voir des demis journées (case avec du bleu et du rouge : 1/2 journée est différente de l'autre)
 
Par contre, la 2nd ligne couille a cause des images (et c'est dommage  :( )
 
- oui, je sais, question bizare, utilisation, bizare, tout ça...mais c'est binetôt vendredi, hein ;) -


Message édité par zapan666 le 24-08-2005 à 23:59:38

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 24-08-2005 à 23:59:00    

ben la solution :  
enfin il y en a plusieurs des solutions lol
 
celle que je vois le mieux :  
transformer les span en display block pour faire fonctionner les width et autres dimensions
puis un float:left du premier span de la chose.
 
donc le mieux serait de faire ceci :  
<span class="matin rouge"></span><span class="aprem truc">
 
et en CSS  
span.matin {float:left}
span.rouge {action concernant le rouge}
etc...
 
 
tu as saisis ?
 
en gros tes span sont en inline, et un élément inline ne peut etre redimensionné

Reply

Marsh Posté le 25-08-2005 à 00:05:54    

gatsusat a écrit :

donc le mieux serait de faire ceci :  
<span class="matin rouge"></span><span class="aprem truc">
 
et en CSS  
span.matin {float:left}
span.rouge {action concernant le rouge}
etc...


le problème ici, est que si y'a une p'tite couille sur les colonnes, genre si elle est un poil trop petite, le bloc suivant le span, qui est en float left, passe à la ligne  :( (et faut pas qu'il passe à la ligne)
 
J'ai déjà chercher le pourquoi du comment, mais j'ai eux un problème bizarre, si je me souviens bien.
C'était bien aligner, mais j'ai un blanc de 1pixel de trop (colonne trop large)
J'enleve ce pixel sur la largeur de la colonne, et là, c'est le drame, le span passe a la ligne
Et oui, chez IE, 10 + 10 != 20 j'ai l'impression...
 
 
(le pire, c'est que ça marchais avant, j'ai "alegé" (un peu beaucoup) le code en utilisant les CSS, et là, le drame, l'affichage voir)


Message édité par zapan666 le 25-08-2005 à 00:06:21

---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 25-08-2005 à 00:10:16    

solution crade et tendancieuse de ma part :  
 
<table>
<tr>
<th colspan="2"></th>
</tr><tr>
<td>Matin</td><td>aprem</td>
</tr>
</table>
 
en gros une journée équivaut à 2 cellules
et pour les journées complète tu met une seule celulle avec un colspan="2"
 
ce sont des données tabulaires, donc on s'en tamponne un peu de la methode CSS ou autre utilisée, moi j'aurais fait comme ça, c'est plus simple je trouve

Reply

Marsh Posté le 25-08-2005 à 00:11:10    

Sinon pour éviter à ton SPAN d'aller à la ligne, tu fous un overflow:hidden sur ton TD, et hop magie magie et vos idées ont du génie [pub inside :o]


Message édité par gatsusat le 25-08-2005 à 00:11:30
Reply

Marsh Posté le 25-08-2005 à 00:20:12    

gatsusat a écrit :

Sinon pour éviter à ton SPAN d'aller à la ligne, tu fous un overflow:hidden sur ton TD, et hop magie magie et vos idées ont du génie [pub inside :o]


bordel, mais c'est pas con ça. j'essaye de suite  :D


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 25-08-2005 à 00:41:51    

Alors 2 span deux suite, ça marche nickel, alors par contre, avec les images, le comportement est dingue : pour que 2imgs soit l'une après l'autre, je dois étendre les colonnes (30px à la place de 20, spa du tout normale pour des imgs de 10px de large...), et du coup, j'ai des blancs  :(
 
 
bref, c'est n'importe quoi...
 
(j'ai mis le padding et margin à 0 sur les imgs, entre un span et une <img /> j'ai aucun espace, ni retour à la ligne ou autre)
 
 
 
 
j'en ai marre  :cry: pourquoi c'est si dure de faire un truc si simple  


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 25-08-2005 à 01:31:29    

suicide toi

Reply

Marsh Posté le 25-08-2005 à 01:31:29   

Reply

Marsh Posté le 25-08-2005 à 10:07:55    


Comme ça marche avec des span, et pas avec des images, j'ai viré les images...Et j'ai stylé les span en mettant les images en fond  :sol:  
 
ça marche du tonerre de dieu, c'est carement plus évolutif, car plus tard, quand y'aura plus d'image, ils n'auront plus qu'a virer les background-image.
 
Et en améliorant le truc, il y a moyen de faire un générateur automatique de style, donc ça alege la page et tout et tout.  
 
 :sol: Yeah  :sol: J'ai pouvoir partir en vacances tranquil


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 25-08-2005 à 10:43:07    

C'est ça que tu veux au final... :lol:
 
http://img381.imageshack.us/img381/6110/toff1yp.th.jpg

Reply

Marsh Posté le 25-08-2005 à 11:05:43    


 
vi sauf qu'on a beaucoup plus d'info & les demi journées sont indépendantes.
Bref, c'est la même chose, mais en plus complexe car tout est quasi customisable via des paramètres


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 25-08-2005 à 11:07:26    

/me vient d'avoir une idée farfelue
 
pour tes demi journées xTof, ya une technique à la con
tu colles Deux span l'un sur l'autre, l'un a une couleur de fond complète
et celui pardessus l'autre a une image en fond, dont une partie de l'image est transparente. lol

Reply

Marsh Posté le 25-08-2005 à 11:07:40    

Ben je vais pas te montrer la suite alors...
 
Bonne chance...

Reply

Marsh Posté le 25-08-2005 à 11:16:50    

ben ton truc xtof_83, ca se fait hyper rapidement en y collant des images lol. pas besoin de me montrer

Reply

Marsh Posté le 25-08-2005 à 11:56:46    

Mais eux... :kaola:


Message édité par xtof_83 le 25-08-2005 à 11:57:06
Reply

Sujets relatifs:

Leave a Replay

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