[CSS] Bug affichage cadre aux coins arrondis

Bug affichage cadre aux coins arrondis [CSS] - HTML/CSS - Programmation

Marsh Posté le 21-01-2004 à 13:46:14    

Bonjour,
 
J'essaie d'implementer avec l'aide d'un css trouvé sur le site http://www.alsacreations.com/articles/tutocss2/ , un cadre aux coins arrondis sans tableaux, le probleme c'est que j ai un bug d'affichage dans les grosses resolutions  :
 
Voici le bug:
 
http://pupute.free.fr/test/bug.jpg
 
Sauriez vous comment resoudre le pb ? :(
 
Merci


Message édité par _gero_ le 21-01-2004 à 13:47:26
Reply

Marsh Posté le 21-01-2004 à 13:46:14   

Reply

Marsh Posté le 21-01-2004 à 13:48:52    

juste pour être sur. tu as bien mis un Doctype et pas de prologue xml?

Reply

Marsh Posté le 21-01-2004 à 13:56:41    

J'ai ca dans le CSS :
 

Code :
  1. <style type="text/css">
  2. .cadre {
  3. width: 75%;
  4. }
  5. .haut {
  6. height: 50px;
  7. background-image:url(haut.gif);
  8. }
  9. .hautd {
  10. height: 50px;
  11. width: 30px;
  12. background-image:url(hautd.gif);
  13. float: right;
  14. }
  15. .bas {
  16. height: 50px;
  17. background-image:url(bas.gif);
  18. }
  19. .basd {
  20. height: 50px;
  21. width: 30px;
  22. background-image:url(basd.gif);
  23. float: right;
  24. }
  25. .centre {
  26. background-image:url(gauche.gif);
  27. background-repeat: repeat-y;
  28. }
  29. .contenu {
  30. background-image:url(droite.gif);
  31. background-repeat: repeat-y;
  32. background-position: right;
  33. padding: 0 10px 0 10px;
  34. }
  35. p {
  36. margin: 0;
  37. padding: 0;
  38. }
  39. .titre {
  40. margin-left: 20px;
  41. }
  42. </style>


 

Le code de ma page :

 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <div class="cadre">
  11.    <div class="haut">
  12.       <div class="hautd">
  13.       </div>
  14.      
  15.    </div>
  16.    <div class="centre">
  17.       <div class="contenu"><p>bla bla</p><p>bla bla</p>
  18.       </div>
  19.    </div>
  20.    <div class="bas">
  21.       <div class="basd">
  22.       </div>
  23.    </div>
  24. </div>
  25. ttt
  26. </body>
  27. </html>


Message édité par _gero_ le 21-01-2004 à 13:57:43
Reply

Marsh Posté le 21-01-2004 à 14:23:12    

help :(

Reply

Marsh Posté le 21-01-2004 à 14:31:33    

Tests sous windows:
Je viens d'essayer ton code sous IE et ca marche impec. (j'ai du aller chercher les 6 gifs sur le site)
Ca marche encore mieux (reaffichage plus smooth quand je resize) sous firebird.
Ca marche tres bien sous Netscape aussi.
A+,
 


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 14:44:49    

essaye en mettant une DTD strict et pas une transitional.

Reply

Marsh Posté le 21-01-2004 à 15:01:36    

gizmo a écrit :

essaye en mettant une DTD strict et pas une transitional.

Je debute, désolé, je n'ai pas compris :/

Reply

Marsh Posté le 21-01-2004 à 15:03:33    

gilou a écrit :

Tests sous windows:
Je viens d'essayer ton code sous IE et ca marche impec. (j'ai du aller chercher les 6 gifs sur le site)
Ca marche encore mieux (reaffichage plus smooth quand je resize) sous firebird.
Ca marche tres bien sous Netscape aussi.
A+,
 
 

Gilou, en quelle resolution es tu ?

Reply

Marsh Posté le 21-01-2004 à 15:11:56    

1024x768
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 15:21:35    

gilou a écrit :

1024x768
A+,

C est donc pour ca, si tu passes en superieure, tu auras le bug sous i.e :/

Reply

Marsh Posté le 21-01-2004 à 15:21:35   

Reply

Marsh Posté le 21-01-2004 à 15:26:48    

Non: je viens de tester en 1280x1024 a l'instant et ca marche sans pb.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 15:28:58    

gilou a écrit :

Non: je viens de tester en 1280x1024 a l'instant et ca marche sans pb.
A+,

et tu l'affichage du cadre sur environ 75% de la page ?
 
Qu est ce que tu as mis dans le css ? et dans la page htm ? stp

Reply

Marsh Posté le 21-01-2004 à 15:34:11    

Oui oui, et ca marchait.
Le css, c'est le tien (ton 2e post), avec un cut-paste. Plus les 6 gifs que j'ai ete chercher sur le site que tu as file au depart.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 15:36:30    

gilou a écrit :

Oui oui, et ca marchait.
Le css, c'est le tien (ton 2e post), avec un cut-paste. Plus les 6 gifs que j'ai ete chercher sur le site que tu as file au depart.
A+,

et si tu cliques sur le lien que j ai mis, as tu le probleme ? en resolution superieure a 1024 ?

Reply

Marsh Posté le 21-01-2004 à 15:38:54    

J'ai pas pu tester de resolution superieure a 1280x1024, car mon ecran n'accepte pas plus.
Mais a cette resolution, le lien que tu files est OK.
Le seul bug (toute resolution) est provoque par l'image contenant le mot titre quand la largeur est reduite a trop petit en largeur.
A+,


Message édité par gilou le 21-01-2004 à 15:43:33

---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 15:41:31    

gilou a écrit :

J'ai pas pu tester de resolution superieure a 1280x1024, car mon ecran n'accepte pas plus.
A+,

merci :'( , je comprends pas pkoi ca merdouille chez moi :/

Reply

Marsh Posté le 21-01-2004 à 15:50:35    

Tu as
1) la derniere version de windows avec les derniers patchs?
2) pareil IE
3) pareil DirectX
4) les derniers drivers pour ta carte graphique (?? le dernier bios aussi a tout hasard??)
 
Tu as le meme bug avec netscape? Firebird?
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 16:10:35    

gilou a écrit :

Tu as
1) la derniere version de windows avec les derniers patchs?
2) pareil IE
3) pareil DirectX
4) les derniers drivers pour ta carte graphique (?? le dernier bios aussi a tout hasard??)
 
Tu as le meme bug avec netscape? Firebird?
A+,
 


 
Oui je suis a jour partout, en fait moi ca marche bien si je mets l'integralité de ce code dans le head de ma page htm :
 

Code :
  1. <style type="text/css">
  2. .cadre {
  3. width: 75%;
  4. }
  5. .haut {
  6. height: 50px;
  7. background-image:url(haut.gif);
  8. }
  9. .hautd {
  10. height: 50px;
  11. width: 30px;
  12. background-image:url(hautd.gif);
  13. float: right;
  14. }
  15. .bas {
  16. height: 50px;
  17. background-image:url(bas.gif);
  18. }
  19. .basd {
  20. height: 50px;
  21. width: 30px;
  22. background-image:url(basd.gif);
  23. float: right;
  24. }
  25. .centre {
  26. background-image:url(gauche.gif);
  27. background-repeat: repeat-y;
  28. }
  29. .contenu {
  30. background-image:url(droite.gif);
  31. background-color:#6D1772;
  32. background-repeat: repeat-y;
  33. background-position: right;
  34. padding: 0 10px 0 10px;
  35. }
  36. p {
  37. margin: 0;
  38. padding: 0;
  39. }
  40. .titre {
  41. margin-left: 20px;
  42. }
  43. .style1 {color: #FFCCFF}
  44. </style>


 
Je m explique pas pkoi :/

Reply

Marsh Posté le 21-01-2004 à 16:19:36    

Ah si je viens de le reproduire, a partir de http://pupute.free.fr/test/style.htm puis en local, en etendant l'affichage a toute la largeur de l'ecran, en 1280x1024.
Clairement, il est en train d'inserer a nouveau les images haut.gif et bas.gif avant les images hautd.gif et basd.gif (chez moi, le truc en plus est clairement une instance de ces images.)
 
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 16:23:19    

Pareil avec Netscape et Firebird. Mais faut vraiment agrandir a toute la largeur de l'ecran pour constater le pb.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 16:33:42    

gilou a écrit :

Ah si je viens de le reproduire, a partir de http://pupute.free.fr/test/style.htm puis en local, en etendant l'affichage a toute la largeur de l'ecran, en 1280x1024.
Clairement, il est en train d'inserer a nouveau les images haut.gif et bas.gif avant les images hautd.gif et basd.gif (chez moi, le truc en plus est clairement une instance de ces images.)
 
A+,

bah voila, donc je suis plus tout seul, maintenant fo voir comment resoudre le probleme :D

Reply

Marsh Posté le 21-01-2004 à 16:38:23    

je regardeai ce soir chez moi si la solution n'a pas été trouvée d'ici là.

Reply

Marsh Posté le 21-01-2004 à 16:40:18    

Bon des elements de reponse a ce qui se passe:
tu as foutu un tag <style>...</style> dans la css, ce qui est une erreur. Un coup de coupier coller intempestif.
A cause de ce tag, le style .cadre n'est pas appliqué
(dans ta version ou tout est dans un meme fichier, le tag style est necessaire, et donc il y a pas d'erreur, et .cadre est appliqué).
Si tu veux avoir plus que 75% pour cadre, ca passe avec  
  .cadre {  
    width: 99.7%;  
  }  
(au dela le pb reapparait)
A+,


Message édité par gilou le 21-01-2004 à 16:45:10

---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 21-01-2004 à 16:50:42    

gilou a écrit :

Bon des elements de reponse a ce qui se passe:
tu as foutu un tag <style>...</style> dans la css, ce qui est une erreur. Un coup de coupier coller intempestif.
A cause de ce tag, le style .cadre n'est pas appliqué
(dans ta version ou tout est dans un meme fichier, le tag style est necessaire, et donc il y a pas d'erreur, et .cadre est appliqué).
Si tu veux avoir plus que 75% pour cadre, ca passe avec  
  .cadre {  
    width: 99.7%;  
  }  
(au dela le pb reapparait)
A+,

En fait 75% en terme d occupation de la page web par le cadre ca me plait bien, que dois je supprimer dans le css pour que le .cadre s applique et ne reproduise pas le probleme alors ?

Reply

Marsh Posté le 21-01-2004 à 16:54:31    

En supprimant juste la balise style dans le css ca marche :D
 
Merci Gilou de ton aide :)

Reply

Marsh Posté le 29-01-2004 à 15:26:04    

Bonjour @ tous,  
je profite de ce topic pour poser ma question :
 
je suis en train de coder un fichier stylesheet.css pour mon futur site et je m'inspire de ceux que l'on peut voir ici et la.
 
j'ai une question sur les coins arrondis pour les tableaux, en effet, j'ai code ceci pour un tableau :
 


#divmain  
 {
         margin:4px 4px 4px 162px;
         padding: 10px;
         border: 2px solid #ccc;
         background: #ffffff;
         -moz-border-radius: 8px;  
         border-radius: 8px;  
         height: 700;
         voice-family: "\"}\"";
         voice-family:inherit;
         height: 700;  
        }


 
mon probleme est que : -moz-border-radius: 8px; ne semble fonctionner qu'avec mozilla, existe-il un equivalent pour IE.
 
merci  :jap:


---------------
passez au SM vous ne le regretterez pas !! http://www.borischambon.com/  /// d3 : KILLER#2821 ///  site moard  : http://moard.ayzo.net/
Reply

Marsh Posté le 29-01-2004 à 15:30:13    

non, cela n'existe pas.

Reply

Marsh Posté le 29-01-2004 à 16:05:55    

gizmo a écrit :

non, cela n'existe pas.


 
merde.
 
merci quand meme  :jap:


---------------
passez au SM vous ne le regretterez pas !! http://www.borischambon.com/  /// d3 : KILLER#2821 ///  site moard  : http://moard.ayzo.net/
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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