begin process at 2012 05 29 02:26:58
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Problème de compatibilité

 > 

Coins arrondis & CSS ... Pourquoi ça ne marche pas ?


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Coins arrondis & CSS ... Pourquoi ça ne marche pas ?

dimanche 8 octobre 2006 à 23:25:10 | Coins arrondis & CSS ... Pourquoi ça ne marche pas ?

LocalStone

Salut à tous !
Alors voilà ... Je suis en train de développer un site qui est normalement censé respecter les standards XHTML et tout ça. Et le problème qui se pose maintenant, c'est comment entourer de coins arrondis une balise inline ... J'ai pas trouvé grand chose sur le Net et donc j'ai un peu réfléchi. Et j'ai trouvé une solution qui fonctionne parfaitement sous Internet Explorer ... Mais pas sous Firefox ! Mais je ne comprends pas pourquoi ...
Alors, déjà, voilà le lien qui permet de voir ce que ça donne (ne marche donc que sous IE) ... Par contre, sous FF, bah essayez-donc ... Et vous allez voir ce que ça donne.
Donc voilà. Mon but ? Bah que ça marche aussi sous FF. Donc si quelqu'un à une idée ... Faut pas hésiter. Et même sans résoudre ce problème, si quelqu'un propose une autre solution pour entourer une balise inline ... Faut pas hésiter non plus !
Voilà voilà !
++ !
Localstone
dimanche 8 octobre 2006 à 23:31:31 | Re : Coins arrondis & CSS ... Pourquoi ça ne marche pas ?

LocalStone

J'suis un blaireau ... J'ai oublié de mettre le code ... Code que voilà !
<html>
   <head>
      <title>(...)</title>
      <style type="text/css">
         #box
         {
            font-family: Georgia;
            font-size: 11px;
            color: #FFFFFF;
            background-color: #000000;
         }
         #content
         {
            margin: 0px;
            padding: 10px;
         }
         #top
         {
            background: url('t.png') repeat-x center top transparent;
         }
         #bottom
         {
            background: url('b.png') repeat-x center bottom transparent;
         }
         #topright
         {
            background: url('tr.png') no-repeat right top transparent;
         }
         #bottomright
         {
            background: url('br.png') no-repeat right bottom transparent;
         }
         #topleft
         {
            background: url('tl.png') no-repeat left top transparent;
         }
         #bottomleft
         {
            background: url('bl.png') no-repeat left bottom transparent;
         }

      </style>
   </head>
   <body>
      <span id="box">
         <span id="top">
            <span id="bottom">
               <span id="topright">
                  <span id="bottomright">
                     <span id="topleft">
                        <span id="bottomleft">
                           <span id="content">Salut ! </span>
                        </span>
                     </span>
                  </span>
               </span>
            </span>
         </span>
      </span>
   </body>
</html>

Merci d'avance pour votre aide !
++ !
Localstone

lundi 9 octobre 2006 à 15:06:01 | Re : Coins arrondis & CSS ... Pourquoi ça ne marche pas ?

mouness

salut
sous Fire_Fox  je sait qu'il y a -moz-border-radius: qui est specifique a FF mais marche avec CSS3 ou IE7 normalement (pas sur pour IE7)
mais mois  pour les arrondi j'avait utiliser un code genre comme ca
(c'etait pour <td> et en meme temp je debute donc CSS javascript je connait pas trop) enfin bref voila le code :

/* Inset 3D Raised */

.raised

{

background: transparent;

width:100%;

margin:0 auto;

}

.raised h1, .raised p

{

margin:0 10px;

}

.raised h1

{

font-size:2em;

color:#fff;

letter-spacing:1px;

}

.raised p

{

padding-bottom:0.5em;

}

.raised .top, .raised .bottom

{

display:block;

background:transparent;

font-size:1px;

}

.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b

{

display:block;

overflow:hidden;

}

.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b

{

height:1px;

}

.raised .b2

{

background:#000D99;

border-left:1px solid #fff;

border-right:1px solid #eee;

}

.raised .b3

{

background:#000D99;

border-left:1px solid #fff;

border-right:1px solid #ddd;

}

.raised .b4

{

background:#000D99;

border-left:1px solid #fff;

border-right:1px solid #aaa;

}

.raised .b4b

{

background:#000D99;

border-left:1px solid #eee;

border-right:1px solid #999;

}

.raised .b3b

{

background:#000D99;

border-left:1px solid #ddd;

border-right:1px solid #999;

}

.raised .b2b

{

background:#000D99;

border-left:1px solid #aaa;

border-right:1px solid #999;

}

 

.raised .b1

{

margin:0 5px;

background:#fff;

}

.raised .b2, .raised .b2b

{

margin:0 3px;

border-width:0 2px;

}

.raised .b3, .raised .b3b

{

margin:0 2px;

}

.raised .b4, .raised .b4b

{

height:2px;

margin:0 1px;

}

.raised .b1b

{

margin:0 5px;

background:#999;

}

.raised .boxcontent

{

display:block;

background:#000D99;

border-left:1px solid #fff;

border-right:1px solid #999;

}
puis dans le html

<td>
         <div class="raised">
     <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
      <div class="boxcontent">
       <center><font color="white" face="Arial" size="2">ton texte ici</font></center>
      </div>
     <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
    </div>
     </td>
c'est un peu long mais bon ca marche normalement



Cette discussion est classée dans : voil, marche, css, arrondis, coins


Répondre à ce message

Sujets en rapport avec ce message

Le hover en css marche pas sous IE? [ par Monico9385 ] Bonjour tout le monde! j'ai créé un menu tout simple en css, ou quand on passe la souris au dessus d'un div ca change la couleur. Voila mon code css: Menu avec cotès arrondis | HTML - CSS | [ par darksam ] [b]Bonsoir,[/b] Comme le titre l'indique, j'aimerais créer un menu avec cotés arrondis ([i]HTML - CSS[/i]). J'ai visualiser beaucoup de sites Web qui feuille de style en Css et formulaires. Comment ça marche? exemples si possible.. merci. [ par maxpat ] Bonjour à tous, Travaillant sous Nvu, j'ai créé une feuille de style en Css. Comment faire un formulaire avec une feuille de style? Merci de bien vou faire fonctionner 2 scripte ensemble [ par nicosne ] Slt, J'ai trouver deux scriptes que je voudrais utiliser dans une page html. Je voudrais savoir comment faire pour qu'il fonctionne ensemble ( si je une fonction reporter qui ne marche pas ... il faut que le navigateur passe outre les erreurs [ par superbaloo78 ] Voila dans une page d'admin, j'ai un formulaire avec un champ text, je veux ouvrir une popup pour que l'utilisateur selectionne une entree dans une li texte et CSS [ par funghi ] salut !!!n'étant pas une grosse bete en css, j'ai une petite question à vous poser ....comment puis-je faire pour changer la couleur d'un lien textuel javascript et css [ par err747 ] je fais du javascript en débutant et je voudrais modifier les propriétés css de ma page de manière dynamique Je sais qu'il faut utiliser une commande Class CSS dans code javascript [ par micfont999 ] Salut à tous, voila j'ai un piti problème que je n'arrive pas à résoudre depuis ce matin..Peut être très simple mais pas pour moi :)En fait j'ai un cs help me please : CSS [ par calopsfr ] je souhaite créer un texte impossible à surligner dans une page avec la souris, permettant ainsi de sélectionner le texte situé autour de celui-ci et erreur fonction sous mozilla [ par chamallow ] Bonjour, alors voilà, j'ai une erreur que je n'arrive pas à corriger, et je ne comprend pas pourquoi.La fonction est :    function Sync_Picture(obj)  


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,499 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales