[CSS/HTML] Similaire sous IE & Mozilla ? Mission Impossible ?

Similaire sous IE & Mozilla ? Mission Impossible ? [CSS/HTML] - HTML/CSS - Programmation

Marsh Posté le 14-07-2005 à 13:08:58    

Bonjour,
 
hier j'ai eut l'idée un peu farfelu d'un nouveau design que j'aurais aimé utilisé pour mon site web perso, ce serait quelques chose se basant sur des trucs comme ca:
 
http://aimless.free.fr/design.PNG
 
J'ai essayé de le codé, en passant par 36000 manières ... mais j'ai pas réussi a ce que le dessin passe aussi bien sous IE que sous Firefox ...
 
Quand IE fonctionne *bien* (ironique ?), sous Firefox ca fait un picasso, et quand inversement.
 
Alors vu que j'ai pas envie d'imprimer ce que génére l'un de ces 2 logiciels quand ils déconnent pour le revendre au Louvre, serait-il possible que je trouve un peu d'aide ici ?
 
Donc au final j'ai essayé plusieurs manières:
- Tableau : le tout est dans un tableau avec border collapse, les cases de la diagonale 'occupé' ont un border de 1px noire et dans la case de gauche ont retrouve une div avec un border de 1px blanche et un background-color de la couleur désiré ( orange, vert, etc... ), idem pour celle de droite, et pour le milieu, ben background-color: white, et stou ( pour l'instant ).
 
Bien entendu ca marche pas, et sur les 2 :p
 
- Tableau SE : là même chose mais on remplace les div dans les cases par des images ( avec un background-image )
 
Ca marche bien sur l'un ( firefox je crois ) mais pas sur l'autre ...
 
Sinon les tableaux ca puxx tout ca tout ca donc:
- Vive les CSS : 3 div dans une grosse div, toutes les 3 avec border 1px black, la première et la troisieme ont un background-image et la seconde ( celle du milieu ) un background-color white. Pour la position, j'utilise de l'absolute ...
 
Si vous m'avez suivi jusqu'ici ( ouah :ouch: ), vous avec peut être une idée du pourquoi du comment que ca marche pas :'( ?
 
PS: je vais poster le code correspondant à chaque méthode, ce sera ptet plus explicite ...

Reply

Marsh Posté le 14-07-2005 à 13:08:58   

Reply

Marsh Posté le 14-07-2005 à 13:23:25    

Verifie le lien vers l'image ... il ne fonctionne pas !

Reply

Marsh Posté le 14-07-2005 à 13:27:39    

afbilou a écrit :

Verifie le lien vers l'image ... il ne fonctionne pas !


 
exact :jap:
 
EDIT: réparé


Message édité par quickman le 14-07-2005 à 13:30:17
Reply

Marsh Posté le 14-07-2005 à 13:50:24    

Sous Firefox, le coin supérieur gauche d'une div est considéré sans la bordure, contrairement à IE, y a t-il moyen de faire pensser les 2 à l'identiques ?
 
J'ai fait le code pour la version "Tableau", ca passerait presque ...
 

Code :
  1. <body>
  2. <!-- Logo -->
  3. <table id="tLogo">
  4.  <tr>
  5.   <td class="pixG"><div class="pixG_2"></div></td>
  6.   <td></td>
  7.   <td></td>
  8.  </tr>
  9.  <tr>
  10.   <td></td>
  11.   <td class="pixC"></td>
  12.   <td></td>
  13.  </tr>
  14.  <tr>
  15.   <td></td>
  16.   <td></td>
  17.   <td class="pixP"><div class="pixP_2"></div></td>
  18.  </tr>
  19. </table>
  20. </body>


 

Code :
  1. body {
  2. background-color: #EEEEEE;
  3. }
  5. #tLogo {
  6. position: absolute;
  7. top: 15px;
  8. left: 15px;
  9. border-collapse: collapse;
  10. border: none;
  11. }
  13. .pixG {
  14. border: 1px solid Black;
  15. padding: 0px;
  16. }
  18. .pixC {
  19. border: 1px solid Black;
  20. width: 120px;
  21. height: 30px;
  22. background-color: White;
  23. }
  25. .pixP {
  26. border: 1px solid Black;
  27. padding: 0px;
  28. }
  30. .pixG_2 {
  31. width: 10px;
  32. height: 10px;
  33. border: 1px solid white;
  34. padding: 0px;
  35. background-color: #FFA500;
  36. }
  38. .pixP_2 {
  39. width: 4px;
  40. height: 4px;
  41. border: 1px solid white;
  42. padding: 0px;
  43. background-color: #FFA500;
  44. }


 
EDIT: le rendu
1/ Firefox ( ca passe ) 2/ IE ( ca casse )
http://aimless.free.fr/test_1.PNG


Message édité par quickman le 14-07-2005 à 14:00:36
Reply

Marsh Posté le 14-07-2005 à 13:53:49    

le hack de la mort qui tue
border-width:4px;
width:200px;
_width:196px;
 
ou un truc du genre.

Reply

Marsh Posté le 14-07-2005 à 13:54:47    

Malheureux, une mise en page en tableau sur HFR, ça va saigner.  [:amandine75011]

Reply

Marsh Posté le 14-07-2005 à 13:59:57    

The-Shadow a écrit :

Malheureux, une mise en page en tableau sur HFR, ça va saigner.  [:amandine75011]


 
Si tu regardes bien j'ai aussi essayé avec des div mais j'y suis pas arrivé :'(  
Mais si j'y arriverais, ce serait vraiment super ...

Reply

Marsh Posté le 14-07-2005 à 14:20:16    

Je ne sais pas si j'ai bien compris ton soucis, mais ça, ça n'irais pas (fait pas gaffe aux couleurs et aux dimensions, j'ai pris un peu n'importe quoi).
http://cristalo.online.fr/forums/testdiv.html

Reply

Marsh Posté le 14-07-2005 à 14:25:37    

The-Shadow a écrit :

Je ne sais pas si j'ai bien compris ton soucis, mais ça, ça n'irais pas (fait pas gaffe aux couleurs et aux dimensions, j'ai pris un peu n'importe quoi).
http://cristalo.online.fr/forums/testdiv.html


 
pas tout a fait en fait :/
 
Je me suis re-essayé au 'tout CSS' ( enfin presque )
 
Sous firefox, ca fonctionne nikel, ... sous IE vous l'auriez deviné sans moi, ca merde, ... On dirait qu'il ne tient pas compte du height de mes div :??:
 

Code :
  1. <body>
  2. <div id="main">
  3. <!-- Logo -->
  4. <div id="mLogo">
  5.  <div class="pixG">&nbsp;</div>
  6.  <div class="pixC">&nbsp;</div>
  7.  <div class="pixP">&nbsp;</div>
  8. </div>
  9. </div>
  10. </body>


 

Code :
  1. body {
  2. background-color: #EEEEEE;
  3. }
  5. #main {
  6. margin-left: auto;
  7. margin-right: auto;
  8. width: 600px;
  9. }
  11. #mLogo {
  12. position: relative;
  13. top: 15px;
  14. left: 15px;
  15. width: 150px;
  16. height: 50px;
  17. }
  19. .pixG {
  20. display:block;
  21. position: absolute;
  22. top: 0px;
  23. left: 0px;
  24. height: 10px;
  25. width: 10px;
  26. background-image: url(../pixG.gif);
  27. border: 1px solid Black;
  28. }
  30. .pixP {
  31. display:block;
  32. position: absolute;
  33. bottom: 0px;
  34. right: 0px;
  35. width: 5px;
  36. height: 5px;
  37. background-image: url(../pixP.gif);
  38. border: 1px solid Black;
  39. }
  41. .pixC {
  42. display:block;
  43. position: absolute;
  44. top: 11px;
  45. left: 11px;
  46. bottom: 6px;
  47. right: 6px;
  48. background-color: White;
  49. border: 1px solid Black;
  50. }


 
Pour mieux voir le problème, vous pourrez trouver les pages ici:
 
http://aimless-network.com/Aimless-Network/css/
http://aimless-network.com/Aimless-Network/tableau/


Message édité par quickman le 14-07-2005 à 14:28:07
Reply

Marsh Posté le 14-07-2005 à 14:32:01    

IE ne peut pas faire des blocs plus petit que la hauteur de la ligne.
Rajoute un line-height:2px dans les petits blocs.
quand à pixC, dans ta CSS, je ne vois pas de largeur définie, donc, c'est normal que sous IE il ne s'aggrandisse pas.

Reply

Marsh Posté le 14-07-2005 à 14:32:01   

Reply

Marsh Posté le 14-07-2005 à 14:36:50    

The-Shadow a écrit :

IE ne peut pas faire des blocs plus petit que la hauteur de la ligne.
Rajoute un line-height:2px dans les petits blocs.
quand à pixC, dans ta CSS, je ne vois pas de largeur définie, donc, c'est normal que sous IE il ne s'aggrandisse pas.


 
Je t'aime :love: Merci !
 
Bon ben, topic résolu jusqu'à la prochaine vague ...

Reply

Marsh Posté le 14-07-2005 à 18:21:21    

quickman a écrit :

Sous firefox, ca fonctionne nikel, ... sous IE vous l'auriez deviné sans moi, ca merde, ... On dirait qu'il ne tient pas compte du height de mes div :??:
 

Code :
  1. <body>
  2. <div id="main">
  3. <!-- Logo -->
  4. <div id="mLogo">
  5.  <div class="pixG">&nbsp;</div>
  6.  <div class="pixC">&nbsp;</div>
  7.  <div class="pixP">&nbsp;</div>
  8. </div>
  9. </div>
  10. </body>



 
PS, Parenthèse et précision : &nbsp; sert à mettre une espace insécable. Ca sert pas à faire un truc vide ;)

Reply

Marsh Posté le 14-07-2005 à 18:21:59    

Ensuite, ce que tu veux faire ne doit pas être fait avec des <div> comme ça. Du moins si tes carrés ne sont que purement décoratif, et qu'ils ne servent à rien d'autre...

Reply

Marsh Posté le 14-07-2005 à 18:24:30    

FlorentG a écrit :

PS, Parenthèse et précision : &nbsp; sert à mettre une espace insécable. Ca sert pas à faire un truc vide ;)


Mais faut reconnaitre que quand on développe un site, certains div n'apparaissent pas sous IE si on ne les remplis pas un minimum. ;)
Si le div est vide, tu préfèrerais peut-être un <img src="images/imagegiftransparentepourempliretpasalourdirlecode.gif" alt="image gif transparente" />  [:amandine75011]

Reply

Marsh Posté le 14-07-2005 à 18:26:09    

Si le <div> n'apparaît pas, c'est qu'on ne lui a pas donné une dimension :o

Reply

Sujets relatifs:

Leave a Replay

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