رفتن به مطلب

استایل جستجو


پست های پیشنهاد شده

با سلام و خسته نباشید

من میخوام توی منوی سایتم ، سمت چپش ( www.waha.ir ) یه جستجو قرار بدم مث سایت http://www.dbstheme.com/ که هم بازشو هست و توی منو قرار گرفته

آیا امکانش هست !؟ میشه لطفا راهنمایی بفرمایید!

لینک به ارسال


<div class="search-form">
<form>
<input type="text" class="stext" name="s" value="جستجو" onclick="if(this.value == 'جستجو') { this.value = '' }" onblur="if(this.value == '') { this.value = 'جستجو' }" />
<input type="submit" class="ssubmit" value="بیاب !" />
</form>
</div>


.top-bar .search-form {
float: left;
height: 50px;
text-align: center;
padding: 0 10px;
margin-top: 2px;
}
.top-bar .search-form form {
height: 35px;
background: #EEE;
margin-top: 5px;
-moz-box-shadow: inset 0px 0px 2px #AAA;
-webkit-box-shadow: inset 0px 0px 2px #AAA;
box-shadow: inset 0px 0px 2px #AAA;
padding-right: 10px;
padding-left: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transitionp: all 0.4s ease;
transition: all 0.4s ease;
}
.top-bar .search-form form:hover {
background: #FFF;
color: #333;
-moz-box-shadow: inset 0px 0px 4px #AAA;
-webkit-box-shadow: inset 0px 0px 4px #AAA;
box-shadow: inset 0px 0px 4px #AAA;
}
.top-bar .search-form .stext {
width: 40px;
height: 35px;
line-height: 35px;
font: 13px 'DBS-BYekan', B Yekan, Tahoma, Tahoma;
background: none;
border: none;
color: #222;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.top-bar .search-form .stext:focus {
width: 150px;
}
.top-bar .search-form .ssubmit {
width: 18px;
height: 30px;
font-size: 0;
background: url(../img/search.png) left 2px no-repeat;
border: none;
margin-right: 3px;
cursor: pointer;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0.5;
}
.top-bar .search-form .ssubmit:hover {
opacity: 0.8;
}

لینک به ارسال

تشکر از پاسختون ،

فقط من تازه کارم زیاد سر در نمیارم !

فایل دوم که دادید برای استایل هست و تو style.css جاش هست ، کدهای اول هم فک کنم باید تو header بزارم ، من این کارو کردم ولی یه جستجو معمولی بود ، تازه توی منو هم قرار نگرفت !

میشه لطفا بیشتر راهنمایی بفرمایید ممنون

لینک به ارسال

این استایل را بذارید :


.search-form {
float: left;
height: 50px;
text-align: center;
padding: 0 10px;
margin-top: 2px;
}
.search-form form {
height: 35px;
background: #EEE;
margin-top: 5px;
-moz-box-shadow: inset 0px 0px 2px #AAA;
-webkit-box-shadow: inset 0px 0px 2px #AAA;
box-shadow: inset 0px 0px 2px #AAA;
padding-right: 10px;
padding-left: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transitionp: all 0.4s ease;
transition: all 0.4s ease;
}
.search-form form:hover {
background: #FFF;
color: #333;
-moz-box-shadow: inset 0px 0px 4px #AAA;
-webkit-box-shadow: inset 0px 0px 4px #AAA;
box-shadow: inset 0px 0px 4px #AAA;
}
search-form .stext {
width: 40px;
height: 35px;
line-height: 35px;
font: 13px 'DBS-BYekan', B Yekan, Tahoma, Tahoma;
background: none;
border: none;
color: #222;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.search-form .stext:focus {
width: 150px;
}
.search-form .ssubmit {
width: 18px;
height: 30px;
font-size: 0;
background: url(../img/search.png) left 2px no-repeat;
border: none;
margin-right: 3px;
cursor: pointer;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0.5;
}
.search-form .ssubmit:hover {
opacity: 0.8;
}

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...