Petit problème de CSS

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Petit problème de CSS

    Bonjour,

    Je suis en train d'utiliser le module recherche, j'aimerais positionner mon champ de recherche à un endroit bien précis de l'écran et pour ce faire j'utilise le CSS.

    Voici mon code généré à partir du fichier default.php du module de recherche:

    Code HTML:
    <div class="search">
    		<span class="searchlibelle"><label for="mod-search-searchword">Trouver un produit : </label></span><input name="searchword" id="mod-search-searchword" maxlength="20"  class="inputbox" type="text" size="70" value="Nombre d'année"  onblur="if (this.value=='') this.value='Nombre d'année';" onfocus="if (this.value=='Nombre d'année') this.value='';" /><input type="image" value="Valider" class="button" src="/Joomla_1.7.3-Stable-Full_Package_FRv2/" onclick="this.form.searchword.focus();"/>	<input type="hidden" name="task" value="search" />
    	<input type="hidden" name="option" value="com_search" />
    	<input type="hidden" name="Itemid" value="435" />
    
    </div>
    Et voici mon code css :

    Code:
    /*
    SEARCH
    */  
    div.search { position:absolute; overflow:hidden; margin:0 0 0 0; padding:0; text-align:left;   background:transparent; height:25px; top:125px; right:10px; }
    input.inputbox { border:1px solid #8d9297; height:23px; background:white; color:#7a8384; text-align:right; margin:0; padding:0 7px 0 0;font-family:Arial, Helvetica, sans-serif; font-size:13px; text-transform:uppercase; width:200px; }
    input.input_submit{ border:0; text-indent:-5000px; width:17px; height:19px; margin:0; padding:0; cursor:pointer; }
    Mon champ est par conséquent en haut à droite, mais sans avoir la possibilité de rentrer quoique ce soit dans le champ.

    En revanche, si j'enlève "position:absolute" du CSS, et que je le remplace par "position:relative" ça marche.

    Je ne suis pas sûr de comprendre le problème.

    Quelqu'un peut-il m'aider, svp ?
    Dernière édition par gilstandre à 24/01/2012, 14h45

  • #2
    Re : Petit problème de CSS

    Salut !
    Ton site est il en ligne ? Pour que nous puissions voir ça d'un peu plus près.
    Si non tu peux jouer avec la propriété CSS "margin" pour décaler le bloc de ton choix. Tu utilises Firebug sur Fixefox ?
    Attention toute fois à ce que le résultat soit toujours bon sur les différents navigateurs web...
    A+
    Site perso : www.soubira.com

    Commentaire


    • #3
      Re : Petit problème de CSS

      Mon site n'est pas encore en ligne. En revanche, j'ai trouvé mon erreur mais pas comprise :
      j'ai rajouté z-index dans mon css :
      div#search { position:absolute; overflow:hidden; margin:0 0 0 0; padding:0; text-align:left; background:transparent; height:25px; top:125px; right:10px; z-index:50;}

      Pourquoi sans z-index je ne peux rien saisir et pourquoi avec je peux saisir dans mon champ de recherche ?

      Commentaire


      • #4
        Re : Petit problème de CSS

        Bonsoir,

        Pourquoi sans z-index je ne peux rien saisir et pourquoi avec je peux saisir dans mon champ de recherche ?
        Il est probablement sous autre chose avec un indexe supérieur

        Faut penser à installer firebug four firefox ou un équivalent pour les autres navigateurs

        Cordialement,
        Joël

        Commentaire

        Annonce

        Réduire
        Aucune annonce pour le moment.

        Partenaire de l'association

        Réduire

        Hébergeur Web PlanetHoster
        Travaille ...
        X