Création de boutons css3

Réduire
X
Réduire
 
  • Page sur 1
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent template Suivant
  • #1

    [Problème] Création de boutons css3

    Bonjour,

    J'ai crée des boutons tout beau tout en code ;-)
    mais il y un petit blème! ils ne marchent pas comme je veux.
    En effet, Ce qu'il y a de très étrange c'est que le .plop fonctionne sous tout les navagateurs sauf bien entendu notre très cher et tendre IE8 mais les autres boutons ne marchent pas sous firefox!!!! j'ai tout essayé et je ne comprends vraiment. Cela marché très bien avant que je ne rajoute le code pour safari et chrome!!!

    Voici l'adresse : http://ratoun.com/
    J'ai donc dans mon css rajouté ceux-ci :

    Code:
    [COLOR="#0000FF"]<style type="text/css">
.plop {
       text-decoration: blink;
	   background-color: #CCC;
		background: -moz-linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%)	);
		background: -webkit-linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%)	);
		background: linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%)	);
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
		
}
.plop a:link,a:visited{
       text-decoration: blink;
	   background-color: #CCC;
		background: -moz-linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%));
		background: -webkit-linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%)	);
		background: linear-gradient(top,hsl(330, 100%, 71%),hsl(350, 72%, 50%)	);
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;		
}

.plop a:hover{
       text-decoration: none;
	   background-color: #CCC;
		background: -moz-linear-gradient(top, hsl(350, 72%, 50%),hsl(330, 100%, 71%));
		background: -webkit-linear-gradient(top,hsl (350, 72%, 50%), hsl (330, 100%, 71%));
		background: linear-gradient(top,hsl(top,hsl (350, 72%, 50%), hsl (330, 100%, 71%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
		-moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

</style>

<style type="text/css">

.store {
		background: -moz-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: -webkit-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
		
}

.store a:link,a:visited{
	   background: -moz-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: -webkit-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
		
}

.store a:hover{
		background: -moz-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: -webkit-linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		background: linear-gradient(top,hsl(132, 100%, 50%),hsl(130, 91%, 41%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
		-moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

</style>

<style type="text/css">

.ratoun{
		background: -moz-linear-gradient(top,hsl(184, 100%, 51%),#156fb6));
		background:-webkit-linear-gradient(top,hsl(184, 100%, 51%),#156fb6));
		background:linear-gradient(top,hsl(184, 100%, 51%),#156fb6));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

.ratoun a:link,a:visited {
		background: -moz-linear-gradient(top,hsl(184, 100%, 51%),#156fb6));
		background:-webkit-linear-gradient(top,hsl(184, 100%, 51%),#156fb6) );
		background:linear-gradient(top,hsl(184, 100%, 51%),#156fb6) );
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

.ratoun a:hover{
	background: -moz-linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
		background:-webkit-linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
		background:linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
		
}

</style>

<style type="text/css">

.brochure {
		background: -moz-linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%));
		background: -webkit-linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%)) ;
		background: linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

.brochure a:link,a:visited {
		background: -moz-linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%));
		background: -webkit-linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%)) ;
		background: linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;

}

.brochure a:hover {
		background: -moz-linear-gradient(top, hsl(280, 61%, 50%) , hsl(288, 100%, 70%)) ;
		background: -webkit-linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%)) ;
		background: linear-gradient(top, hsl(288, 100%, 70%),hsl(280, 61%, 50%)) ;
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 4px 13px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;

}


</style>

<style type="text/css">

.newsletter {
		background: -moz-linear-gradient(top,hsl(0, 0%, 90%),hsl(0, 0%, 70%)) ;
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 3px 9px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

.newsletter a:link,a:visited {
		background: -moz-linear-gradient(top,hsl(0, 0%, 90%),hsl(0, 0%, 70%)) ;
		background: -webkit-linear-gradient(top,hsl(0, 0%, 90%),hsl(0, 0%, 70%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 3px 9px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

.newsletter a:hover {
		background: -moz-linear-gradient(top,hsl(0, 0%, 70%),hsl(0, 0%, 90%)) ;
		background: -webkit-linear-gradient(top,hsl(0, 0%, 90%),hsl(0, 0%, 70%));
		border:1px solid hsl(0, 0%, 60%);
		color: hsl(0, 0%, 10%);
		padding: 3px 9px;
	   border-radius: 6px 6px 6px 6px;
	   -moz-border-radius: 6px 6px 6px 6px;
		-webkit-border-radius:6px 6px 6px 6px;
}

</style>
    et dans mon module "contenu personnalisé"
    j'ai donc ceux-ci :
    Code:
    [COLOR="#0000FF"]<table style="width: 965px;" border="0" align="center">
<tbody>
<tr>
<td style="text-align: center; width: 20px;"> </td>
<td style="text-align: center; width: 110px;">
<div class="store"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Le store">le store</a></span></div>
</td>
<td style="text-align: center;">
<div class="ratoun"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Ratoun numérique">ratoun numérique</a></span></div>
</td>
<td style="text-align: center;">
<div class="brochure"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Brochures 2012">télécharger notre brochure</a></span></div>
</td>
<td style="text-align: center; width: 140px;"> </td>
<td style="text-align: center;">
<div class="plop"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="promotions 2012">promotions 2012</a></span></div>
</td>
</tr>
</tbody>
</table>[/COLOR]
    Si seulement quelqu'un pouvait trouver mon erreur que je ne trouve pas depuis des jours!
    Merci

    Cordialement,
    Edith
    Dernière édition par zepelin57 à 17/09/2012, 14h30 Raison: Merci d'utiliser les fonctions de l'éditeur pour une meilleure lisibilité.
    Tags: Aucun
  • #2
    Re : Création de boutons css3

    Bonjour,

    Mise en page dans un tableau et CSS3, quel curieux mariage !

    Avez-vous essayer le code en dehors d'une structure table ?

    Ce n'est peut-être pas ça, mais ça vaut le coup d'essayer.
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire

    • #3
      Re : Création de boutons css3

      Cest que je suis plus webdesigne que webmaster
      Envoyé par lomart Voir le message
      Avez-vous essayer le code en dehors d'une structure table ?
      Comment cela se présente en dehors d'une structure table?

      Merci pour votre réponse!
      Cordialement,
      Edith Bonamy

      Commentaire

      • #4
        Re : Création de boutons css3

        Bonsoir,


        Simplement en supprimant toutes les références au tableau

        Code:
        [COLOR=#0000FF]<div class="store"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Le store">le store</a></span></div> 
<div class="ratoun"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Ratoun numérique">ratoun numérique</a></span></div> 
<div class="brochure"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="Brochures 2012">télécharger notre brochure</a></span></div> 
<div class="plop"><span style="font-size: medium;"><a href="http://ratoun-numerique.fr/" target="_blank" title="promotions 2012">promotions 2012</a></span></div> [/COLOR]
        Dans un premier temps, cela suffit pour le test
        Dans un deuxième temps, si l'essai est concluant, il faudra définir des propriétés de positionnement pour les classes impliquées.
        Il va falloir que le webdesigner apprenne des rudiments de HTML / CSS

        Pour info, les premières alertes sur le danger de la mise en page dans des tables date de 2003. Cela ne nous rajeunit pas
        Les problèmes de la mise en page par tableaux | Openweb.eu.org
        http://openweb.eu.org/articles/problemes_tableaux
        Pourquoi éviter les tableaux pour faire de la mise en page. Introduction Originellement prévus dans le but de mettre en forme des (…)
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire

        • #5
          Re : Création de boutons css3

          Salut,
          euh, le pb n'a rien à voir avec l'interaction entre une table (HTML) et des CSS, même 3.
          Le pb est lié à l'utilisation et le mélange de formats de couleurs dans les gradients.

          Piqure de rappel :
          les formats de couleur les + utilisés sur le web sont HEX et RGB, parfois HSL (hue, saturation, lightness) ou HSB (hue, saturation, brightness), avec l'apparition des gradients CSS3.

          cf : http://gradients.glrzad.com/

          @hartclip
          Apres test des spécifications CSS des gradients que tu indiques, à mon avis, les rendus des navigateurs sont trop variables pour que tu puisses t'appuyer sur les specs HSL que tu utilises.
          D'autant plus que tu mélanges les formats.
          Ici, par exemple :
          .ratoun a:hover{
          background: -moz-linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
          background:-webkit-linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
          background:linear-gradient(top,#156fb6, hsl(184, 100%, 51%)) ;
          border:1px solid hsl(0, 0%, 60%);
          color: hsl(0, 0%, 10%);
          padding: 4px 13px;
          border-radius: 6px 6px 6px 6px;
          -moz-border-radius: 6px 6px 6px 6px;
          -webkit-border-radius:6px 6px 6px 6px;
          }

          Ou tu refais tes gradients, ou tu corriges tes CSS avec un autre format.

          QQ gradients generators :
          Ultimate CSS Gradient Generator from ColorZilla
          http://www.colorzilla.com/gradient-editor/
          A powerful Photoshop-like CSS gradient editor


          http://gradients.glrzad.com/


          ou :
          CSS3 Linear Gradient Buttons Generator

          http://dryicons.com/demos/css3-linear-gradient-buttons-generator/


          PS : tu peux encapsuler toutes tes specs CSS dans dans la même déclaration:
          <style type="text/css">
          /*les specs css*/
          </style>
          Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

          Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

          Commentaire

          • #6
            Re : Création de boutons css3

            Bien vu ghazal, le coup du mélange des méthodes pour définir les couleurs.
            Il faut préférer la méthode classique #RRVVBB

            Autre point auquel faire attention. Toujours terminer par la règle classique après les variantes par navigateur.
            Exemple, dans la déclaration ci-dessous, border-radius doit être en dernier

            border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius:6px 6px 6px 6px;

            Tout cela, ne remet pas en cause que le fait d'utiliser des tables est un risque non négligeable de problèmes !
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire

            • #7
              Re : Création de boutons css3

              merci merci merci infiniment!
              je n'avais pas vu vos nombreuses réponses je vais essayer tout ça rapidement ;-D

              Commentaire

              Précédent template Suivant

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire
              Hébergeur Web PlanetHoster
              Travaille ...
              X