Barre de recherche

[LilyFlow]

Bonjour,

J'ai un probléme avec ma barre de recherche qui se retrouve sur la bannière quand on a un petit écran.



Y a t'il moins de la déplacer pour quelle passe sous la bannière ??

Merci d'avance pour votre aide

[Arlem]

Bonjour,

Essayez en ajoutant ceci dans les CSS personnalisés :

Code:

#search-box {
top : 170 px !important;
}

[LilyFlow]

Bonjour [b]Arlem[b]

Le code à l'air de marcher mais du coup, il est trop bas.

J'ai modifier la valeur de top mais il remonte pas !!

Une solution ??

A+

[Arlem]

Vérifiez votre code vous avez écrit deux fois "px".

[LilyFlow]

Vérifiez votre code vous avez écrit deux fois "px".

NON

Code:

        #search-box {
        top : 100 px !important;
        }

[Arlem]

Peace. C'est pas moi qui le dit c'est la navigateur :

Postez votre CSS personnalisé qu'on voit d'où vient l'erreur.

[LilyFlow]

Code:

/* CSS PAR SOS-FORUM.COM */

/* General */
#wrap {width: 80%; margin-top: 250px;  -webkit-box-shadow: 0px 0px 12px #000000; -moz-box-shadow: 0px 0px 12px #000000; box-shadow: 0px 0px 12px #000000; padding: 10px; border: 6px solid #ffffff; }
body { padding: 0px; margin: 0px; }
* { -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; }

/* Navbar */
.navbar { background-color: transparent; margin: 0px; padding: 0px; width: auto!important; }
.navbar ul{border-bottom:none; width: auto!important;}
ul.navlinks {  background-color: #008ced; background-image: url('http://i67.servimg.com/u/f67/11/27/24/66/blue15.png'); background-repeat: repeat-x; background-position: top left; position: fixed; top: 0px; left: 0px; z-index: 50; width: auto!important; border-right: 4px solid #ffffff;  border-bottom: 4px solid #ffffff; -webkit-box-shadow: 0px 0px 12px #000000; -moz-box-shadow: 0px 0px 12px #000000; box-shadow: 0px 0px 12px #000000; -moz-border-radius: 0px 0px 10px 0px; -webkit-border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px; -khtml-border-radius: 0px 0px 10px 0px; padding: 2px; }

/* Menu Links */
.mainmenu { -moz-border-radius: 10px 2px 10px 2px; -webkit-border-radius: 10px 2px 10px 2px; border-radius: 10px 2px 10px 2px; -khtml-border-radius: 10px 2px 10px 2px; border: 2px solid #ffffff; padding: 5px; background-color: #E0F4FF; -webkit-box-shadow: 0px 0px 4px #000000; -moz-box-shadow: 0px 0px 4px #000000; box-shadow: 0px 0px 4px #000000; display: block; margin: 6px; }
.mainmenu:hover { background-color: #FAE3BB; -moz-transform: rotate(24deg);  transform: rotate(24deg); }
.mainmenu:focus { background-color: #FABBBB; -moz-transform: rotate(12deg);  transform: rotate(12deg); }

/* Round  */
#wrap { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -khtml-border-radius:20px; }
div, table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; }

/* Header, Modules, Forums & Messages  */
.forabg, .forumbg, .post, .module { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff;  }
.forabg, .forumbg, .module { background-color: #008ced; background-image: url('http://i67.servimg.com/u/f67/11/27/24/66/blue15.png'); background-repeat: repeat-x; background-position: top left;  }
.module .inner {background-color: #ffffff; padding: 2px!important;}
.module {padding: 5px!important;}
.module .h3 {text-align: center;}

/* Profiles  */
.postprofile { background: #B8DDF2; padding: 4px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; border:none; }

/* Borders  */
ul.topiclist dd, ul.forums dd, li.row:hover dd  { border-left: none; }

/* Searchbox  */
#search-box { position: absolute; top : 24px; right: 12%;  -webkit-box-shadow: 0px 0px 6px #000000; -moz-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000;}
#search-box input#keywords { -moz-border-radius: 8px 0px 0px 8px; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px;}
#search-box input.button2 { -moz-border-radius: 0px 8px 8px 0px; -webkit-border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px; border-left: none; }

/* Admin Text */
.introduction { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff; color: #ffffff;  background-color: #008ced; background-image: url('http://i67.servimg.com/u/f67/11/27/24/66/blue15.png'); background-repeat: repeat-x; background-position: top left; }
.introduction .h3 {color: #ffffff; border-color: #ffffff; padding-left: 10px; background: transparent url('http://i67.servimg.com/u/f67/11/27/24/66/i_up_a11.gif')  left no-repeat;}

/* Header */
.headerbar {position: absolute; top: 0px; left: 0px;  width: 99%; background: transparent url('http://i67.servimg.com/u/f67/11/27/24/66/previe16.png') scroll top center no-repeat; height: 250px;}


/* Profils */
.postprofile a img { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff;  -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; background: #E8E8E8;  }

.postprofile a img:hover { -webkit-box-shadow: 0px 0px 6px #044E8F; -moz-box-shadow: 0px 0px 6px #044E8F; box-shadow: 0px 0px 6px #044E8F; }


/* En Ligne*/
.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online.png");
    background-position: right top;
    background-repeat: no-repeat;
}


/* Début - Styles pour la colorisation des codes */
       
        .str { color: #080; }
        .kwd { color: #008; }
        .com { color: #800; }
        .typ { color: #606; }
        .lit { color: #066; }
        .pun { color: #660; }
        .pln { color: #000; }
        .tag { color: #008; }
        .atn { color: #606; }
        .atv { color: #080; }
        .dec { color: #606; }
        pre.prettyprint { padding: 2px; }
        ol.linenums { margin-top: 0; margin-bottom: 0 }
        li.L0,
        li.L1,
        li.L2,
        li.L3,
        li.L5,
        li.L6,
        li.L7,
        li.L8 { list-style-type: none }
        li.L1,
        li.L3,
        li.L5,
        li.L7,
        li.L9 { background: #eee }
        @media print {
          .str { color: #060; }
          .kwd { color: #006; font-weight: bold; }
          .com { color: #600; font-style: italic; }
          .typ { color: #404; font-weight: bold; }
          .lit { color: #044; }
          .pun { color: #440; }
          .pln { color: #000; }
          .tag { color: #006; font-weight: bold; }
          .atn { color: #404; }
          .atv { color: #060; }
        }
       
/* Fin - Styles pour la colorisation des codes */

/* Couleur nom Membres*/
        a.gensmall {
        /* text-transform: uppercase;*/
        color : #1E90FF;
        /* font-size : 15px; */
        }



        #search-box {
        top : 100 px !important;
        }


Question peut être stupide mais, il ne faut pas mettre une valeur horizontale (droite ou gauche) ??

[Arlem]

Vous avez déjà des propriétés CSS pour la search-box ici :

Code:

/* Searchbox  */
#search-box { position: absolute; top : 24px; right: 12%;  -webkit-box-shadow: 0px 0px 6px #000000; -moz-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000;}

Modifiez la valeur de top à cet endroit là et supprimez le code que je vous ai fait mettre avant.

[LilyFlow]

Merci beaucoup

Nikel