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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Bug affichage cadre aux coins arrondis

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Bug affichage cadre aux coins arrondis

n°617777
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 13:46:14  profilanswer
 

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
mood
Publicité
Posté le 21-01-2004 à 13:46:14  profilanswer
 

n°617781
gizmo
Posté le 21-01-2004 à 13:48:52  profilanswer
 

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

n°617793
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 13:56:41  profilanswer
 

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
n°617837
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 14:23:12  profilanswer
 

help :(

n°617856
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 14:31:33  profilanswer
 

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é!  --
n°617879
gizmo
Posté le 21-01-2004 à 14:44:49  profilanswer
 

essaye en mettant une DTD strict et pas une transitional.

n°617899
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:01:36  profilanswer
 

gizmo a écrit :

essaye en mettant une DTD strict et pas une transitional.

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

n°617903
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:03:33  profilanswer
 

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 ?

n°617928
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 15:11:56  profilanswer
 

1024x768
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
n°617946
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:21:35  profilanswer
 

gilou a écrit :

1024x768
A+,

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

mood
Publicité
Posté le 21-01-2004 à 15:21:35  profilanswer
 

n°617954
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 15:26:48  profilanswer
 

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é!  --
n°617960
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:28:58  profilanswer
 

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

n°617972
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 15:34:11  profilanswer
 

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é!  --
n°617980
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:36:30  profilanswer
 

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 ?

n°617982
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 15:38:54  profilanswer
 

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é!  --
n°617984
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 15:41:31  profilanswer
 

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 :/

n°618016
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 15:50:35  profilanswer
 

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é!  --
n°618045
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 16:10:35  profilanswer
 

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 :/

n°618067
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 16:19:36  profilanswer
 

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é!  --
n°618082
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 16:23:19  profilanswer
 

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é!  --
n°618121
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 16:33:42  profilanswer
 

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

n°618140
gizmo
Posté le 21-01-2004 à 16:38:23  profilanswer
 

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

n°618147
gilou
Modérateur
Modzilla
Posté le 21-01-2004 à 16:40:18  profilanswer
 

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é!  --
n°618170
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 16:50:42  profilanswer
 

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 ?

n°618177
_gero_
2eme Effet Kiss Cool ©
Posté le 21-01-2004 à 16:54:31  profilanswer
 

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

n°624978
killer ins​tinct
Bouge pas j'arrive ma louloute
Posté le 29-01-2004 à 15:26:04  profilanswer
 

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/
n°624984
gizmo
Posté le 29-01-2004 à 15:30:13  profilanswer
 

non, cela n'existe pas.

n°625038
killer ins​tinct
Bouge pas j'arrive ma louloute
Posté le 29-01-2004 à 16:05:55  profilanswer
 

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/
mood
Publicité
Posté le   profilanswer
 


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

  [CSS] Bug affichage cadre aux coins arrondis

 

Sujets relatifs
Problème d'affichage d'une variable[CSS] Centrer du texte uniquement dans la troisième colonne du tableau
[CSS] Afficher sa bannière/logo sans qu'elle soit Bloqué[CSS] avoir deux Div de la meme hauteur
[SH] Contenu variable different de l'affichage[CSS] Switcher feuille de style
[ASP+SQL SERVER] Affichage de la structure d'une BDD (Résolu)affichage de texte japonais chinois russe ...
Problemes avec les Styles CSS sous Dreamweaver 2004[CSS] probleme avec un filter.alpha
Plus de sujets relatifs à : [CSS] Bug affichage cadre aux coins arrondis


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