28173 sujets

CSS et mise en forme, CSS3

[Résolu]Input transparent

Bonjour a tous,

Désolé si mon message n'est pas conforme a la charte, mais c'est mon 1er post sur ce forum.

Voila débutant en xhtml j'ai un petit souci sur des champs input text que je n'arrive pas a passer en transparent sous FF ni opera juste sous IE.

Voila mon code :


* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana, Arial, sans-serif;
  background: url(../pix/fond.jpg);
}

fieldset {border: 0 none;}

img {border: 0 none;}

div#global {
  margin: auto;
  width: 954px;
}

div#menu {
  width: 230px;
  float: left;
}

div#content {
  width: 724px;
  float: left;
  background: #daedbf;
}

div#content div#header_home {
  height: 100px;
  background: url(../pix/fond_header_home.gif) repeat-y;
}

div#content div#header_home form input {
  border: 1px solid #5c8940;
  font-size: 11px;.
  background: transparent;
}

div#content div#header_home form label {
  font-size: 11px;
  color: #fff;
  margin-right: 5px;
}

div#content div#header_home legend {
  margin: 3px 0 3px 0;
}

div#content div#header_home form.espace_client {
  float: left;
  width: 299px;
  padding-right: 10px;
  text-align: right;
}

div#content div#header_home form.news {
  float: left;
  width: 197px;
  padding-right: 10px;
  text-align: right;
}

div#content div#header_home form.recherche {
  float: left;
  width: 198px;
  padding-right: 10px;
  text-align: right;
}

div#footer ul li {
  display: inline;
  float: right;
}

div#footer ul li a {
  color: #000;
  text-decoration: none;
  font-size: 10px;
  margin-left: 10px;
}


et le html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Debardo</title>
<script src="c.flashobject.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/commun.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" />
</head>

<body>
  <div id="global">
    <div id="menu">
      <img src="swf/menu.gif" alt="" />
    </div>
    <div id="content">
      <div id="header_home">
          <form method="post" action="" class="espace_client">
            <fieldset>
              <legend align="right"><img src="pix/header/espace_client.gif" alt="Espace Client" /></legend>
                <p><label for="login">Login</label><input type="text" value="" id="login" /></p>
                <p><label for="pass">Mot de passe</label><input type="text" id="pass" /></p>
            </fieldset>
          </form>
          <form method="post" action="" class="news">
            <fieldset>
              <legend align="right" ><img src="pix/header/newsletter.gif" alt="Newsletter" /></legend>
                <p><label for="news">Entrer votre adresse e-mail</label><br /><input type="text" id="news" /></p>
            </fieldset>
          </form>
          <form method="post" action="" class="recherche">
            <fieldset>
              <legend align="right"><img src="pix/header/recherche.gif" alt="Recherche" /></legend>
                <p><label for="age">Classe d'âge</label><input type="text" id="age" /></p>
                <p><label for="prix">Prix</label><input type="text" id="prix" /></p>
                <p><label for="keywords">Mots-clés</label><input type="text" id="keywords" /></p>
            </fieldset>
          </form>          
      </div>
      <div id="tetiere"></div>
        <div class="encard">
          <div id="actu">
            <h2>Actualité et Evévenement</h2>
              <h3>Les céréales du petit-dej</h3>
                <p>Plaisir ou santé, les céréales matinales sont beaucoup plus intérressante sur le plan nutritionnel - et bien plus variées - en version bio</p>
                <p><a href="#"><img src="pix/home/savoir_plus.gif" class="plus" alt="En savoir plus" /></a></p>
          </div>
          <div id="nouveaute">
            <h2>Nouveauté</h2>
              <h3>Huile de Jojoba</h3>
                <p>Plaisir ou santé, les céréales matinales sont beaucoup plus intéressantes</p>
                <p><a href="#"><img src="pix/home/savoir_plus.gif" class="plus" alt="En savoir plus" /></a></p>
          </div>
          <div id="promo">
            <h2>Promotions</h2>
              <h3>Bardo'Zym Amandes</h3>
                <p>Plaisir ou santé, les céréales matinales sont beaucoup plus intéressantes</p>
                <p><a href="#"><img src="pix/home/savoir_plus.gif" class="plus" alt="En savoir plus" /></a></p>
          </div>
          <div id="recette">
            <h2>La Recette du mois</h2>
              <h3>Brochettes de tofu et de légumes variés</h3>
                <p><a href="#"><img src="pix/home/recette.gif" class="plus" alt="Lire la recette" /></a></p>
          </div>
        </div>
      </div>
      <div id="footer">
        <ul>
          <li><a href="">Revendeurs</a></li>
          <li><a href="">Plan du site</a></li>
          <li><a href="">Infos Livraison</a></li>
          <li><a href="">Partenaires</a></li>
          <li><a href="">CGV</a></li>
          <li><a href="">Nous contacter</a></li>
        </ul>
      </div>
  </div>
</body>
</html>


Je ne trouve toujours pas la solution et je ne peux pas vous montrer le rendu n'ayant pas encore l'hergement Smiley sweatdrop je sais ca va pas vous arranger...

Mais vous avez une idée, ou même des critique sur ma facon de coder toutes remarques est bonne à prendre

Merci d'avance
Modifié par tonini (12 Jun 2007 - 10:23)
div#content div#header_home form input {
  border: 1px solid #5c8940;
  font-size: 11px;.
  background: transparent;
}

Ca ne sera jamais transparent réellement, c'est pour dire que tu ne met pas de couleur de fond voila tout.
Ben moi j'arrive à avoir un input à fond transparent, via un background: transparent, avec :
- Firefox (1-2) ;
- Internet Explorer (6-7) ;
- Opera (9).

Par contre, ça ne sera pas possible avec Safari, et peut-être pas non plus avec Konqueror.
De plus, je n'ai testé qu'avec un input de type "text". À voir pour le reste.

Quoi qu'il en soit, il faut garder à l'esprit que les éléments de formulaire sont stylés par chaque navigateur à sa sauce. On ne peut pas être assuré du rendu, dès lors que l'on s'éloigne du rendu par défaut.
Merci du test, je l'ai fait aussi de mon coté et effectivement ca passe sur ces 3 navigateurs. Il doit donc y avoir un truc dans mon code qui les génent, je vais fouiller.
Merci.
Modérateur
bonsoir , 

  font-size: 11px;.


si le point après le point virgule figure effectivement dans le fichier css , peut-être alors y-a-t'il là l'explication... quelque soit la valeur attribuer a la règle css suivante elle risque de ne pas être appliqué par les navigateurs respectueux , autrement IE ne bronchera pas sur ce coup la (comme l'underscore par exemple ).
A noël je demande une nouvelle paire d'yeux ou alors un cerveau effectivement avec le point en moins ca fonctionne nettement mieux.

Merci gcyrillus de ton oeil aguerri
tonini a écrit :
A noël je demande une nouvelle paire d'yeux ou alors un cerveau

Tu peux aussi demander un validateur CSS pour repérer ce genre de faute de syntaxe.

Mais, miracle !, c'est déjà Noël, et tu peux déjà profiter de ce magnifique validateur CSS aux jantes chromées :
http://jigsaw.w3.org/css-validator/

La validation, c'est un réflexe à prendre. Smiley cligne
Sujet clos
Aller à