Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2220 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1183813
zapan666
Tout est relatif
Posté le 24-08-2005 à 23:20:05  profilanswer
 

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 !
mood
Publicité
Posté le 24-08-2005 à 23:20:05  profilanswer
 

n°1183817
gatsusat
Posté le 24-08-2005 à 23:30:51  profilanswer
 

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

n°1183830
zapan666
Tout est relatif
Posté le 24-08-2005 à 23:54:22  profilanswer
 

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 !
n°1183837
gatsusat
Posté le 24-08-2005 à 23:59:00  profilanswer
 

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é

n°1183841
zapan666
Tout est relatif
Posté le 25-08-2005 à 00:05:54  profilanswer
 

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 !
n°1183842
gatsusat
Posté le 25-08-2005 à 00:10:16  profilanswer
 

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

n°1183844
gatsusat
Posté le 25-08-2005 à 00:11:10  profilanswer
 

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
n°1183847
zapan666
Tout est relatif
Posté le 25-08-2005 à 00:20:12  profilanswer
 

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 !
n°1183852
zapan666
Tout est relatif
Posté le 25-08-2005 à 00:41:51  profilanswer
 

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 !
n°1183855
gatsusat
Posté le 25-08-2005 à 01:31:29  profilanswer
 

suicide toi

mood
Publicité
Posté le 25-08-2005 à 01:31:29  profilanswer
 

n°1183952
zapan666
Tout est relatif
Posté le 25-08-2005 à 10:07:55  profilanswer
 


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 !
n°1183977
xtof_83
Freeride Spirit
Posté le 25-08-2005 à 10:43:07  profilanswer
 

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

n°1184007
zapan666
Tout est relatif
Posté le 25-08-2005 à 11:05:43  profilanswer
 


 
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 !
n°1184015
gatsusat
Posté le 25-08-2005 à 11:07:26  profilanswer
 

/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

n°1184018
xtof_83
Freeride Spirit
Posté le 25-08-2005 à 11:07:40  profilanswer
 

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

n°1184032
gatsusat
Posté le 25-08-2005 à 11:16:50  profilanswer
 

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

n°1184084
xtof_83
Freeride Spirit
Posté le 25-08-2005 à 11:56:46  profilanswer
 

Mais eux... :kaola:


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Besoin d'un code pour inclure un header (compliqué)LECTEUR CODE BARRE
code vba dans vb6localisation d'enregistrement dans une base avec le code VB ?
Code VB, Fichier -> variable (tableau)Positionnement <SPAN> en CSS via JavaScript
Recherche d'un code : Texte défilant verticalement de façon non sacadé[perl] récupéré le code source de plusieurs pages
QDLC : Comptez vos lignes de codeComment dupliquer un code ?
Plus de sujets relatifs à : Pb alignement <img/><span> (code crade inside)


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR