ساخت button به کمک CSS

[imanfakhar 26231]

عکس را که با تگ img بگذارید دیگه

<img src="http://site.com/folder/img.png">

برای اینکه کلیدی با تصویر داشته باشید می تونید از input با تایپ image استفاده کنید

<input type="image" src="http://site.com/folder/image.png">

[تازه وارد 165]

یعنی الان در Style.Css کد به این شکل میشه ؟

.image input{
background:url(images/Button.png) center left no-repeat;
}

که یه id به نام image واسه عکسمون تعریف بشه

و در ابزارک متن به این شکل ؟

<input type="image" src="http://site.com/folder gharar giri aks/Button.png">

که همون id به نام image در ابزارک فراخوانی بشه .

درسته یا خیر ؟

[تازه وارد 165]

عکس را که با تگ img بگذارید دیگه

<img src="http://site.com/folder/img.png">

برای اینکه کلیدی با تصویر داشته باشید می تونید از input با تایپ image استفاده کنید

<input type="image" src="http://site.com/folder/image.png">

جناب فخار اگه منظور شما از دادن کدهای بالا اینه که عکس رو از طریق ابزارک متن و بدون آدرس دهی در Style.Css در سایدبار نشون بدم ، بله کدی که دادید عمل میکنه ( البته این کار از طریق کدهایی که ویرایشگر Html وردپرس هم میده عملیه ) ، ولی قبلا هم عرض کردم که بنده میخوام آدرس دهی از طریق Style.Css انجام بشه که وقتی کسی رو عکس کلیک راست میکنه نتونه عکس رو ذخیره کنه چون خودتونم میدونید که وقتی در Style.Css آدرس عکس تعریف بشه و از Style.Css عکس در سایت فراخوانی بشه با کلیک راست قابل ذخیره نیست و از طریق کدها باید ذخیره کنه و این مد نظرمه .

ویرایش شده خرداد 93 توسط تازه وارد

[SM-Mahdavi 5427]

آدرس دهی از طریق css فقط و فقط با background امکان پذیره

[تازه وارد 165]

خوب خدا خیرتون بده ، منم همینو میگم دیگه .

شما ظاهرا منظورمو کامل متوجه شدید .

یه لطفی کنید کدی که یه کلاس در Style.Css مشخص کنه و بشه در اون کلاس ، عکس رو آدرس دهی کرد و بعد یه کدی که کلاس تعریف شده در Style.Css رو به ابزارک متن وردپرس بشناسونه و در سایدبار عکس رو فراخوانی و نشون بده بزارید اینجا ، تا تمام مشکلات حل بشه به امید خدا .

از اول همینو داشتم میگفتم . خداروشکر که شما کامل متوجه شدید عرض بنده رو .

[imanfakhar 26231]

.img:before {
content:url('http://site.com/folder/image.png')
}

[kasra 4929]

کد html که تو ابزارک میخواید بزارید :

<div class="post">
محتوا
</div>

کد css :

.post {
background: url('images/bg.png') no-repeat;
width:100px;
height:20px;
float:right
}

[تازه وارد 165]

.img:before {
content:url('http://site.com/folder/image.png')
}

آقای فخار الان این کد رو باید در استایل بزارم دیگه درسته ؟ ( چون به صورت Class تعریف کردید )

اگه درسته چه کدی رو باید در ابزارک واسه فراخوانی عکس مد نظرم بزارم ؟

اگه شمام منظورمو به طور کامل متوجه شدید ، لطف کنید بگید دقیق چیکار کنم که این تاپیک پی در پی بالا نیاد .

یه دنیا ممنون .

ویرایش شده خرداد 93 توسط تازه وارد

[تازه وارد 165]

تا جایی که متوجه شدم شما فقط میخواید داخل ابزارک متن عکس فراخوانی کنید.

اگه اینطوره که باید از این استفاده کنید

جلوی src آدرس یا لینک عکستون رو قرار بدید

<img alt="" src="" width="" hight="" style="" />

بله میخوام از طریق ابزارک متن ، یه عکس رو فراخوانی کنم اما با شرایط زیر :

1- اون عکس در Style.Css آدرس دهی بشه که قابل ذخیره کردن به صورت راست کلیک نباشه .

2- در ابزارک کدی تعریف بشه که هم عکس آدرس دهی شده در Style.Css رو فراخوانی کنه و هم به عکس خاصیت لینک دهی بده که با کلیک روی عکس ، کاربر به صفحه ای مشخص بره .

حالا فکر میکنم واسه رسیدن به این خواسته ، دو تا کد نیازه ( یک کد واسه Style.Css ، و یک کد واسه ابزارک )

درست میگم ؟

ویرایش شده خرداد 93 توسط تازه وارد

[تازه وارد 165]

والا اولی که راست کلیک نخوره . بنده نمیدونم . اونیم که بخواد ذخیره کنه چند جور راه داره فقط که راست کلیک نیست. بشخصه از اینجور سایتها خوشم نمیاد

اما مورد دوم خیر درست نمیگید

به این صورت باید قابلیت لینک بدید

<a href="" title="">
<img alt="" src="" width="" hight="" style="" />
</a>

میدونم که میشه از طریق کد با بازرسی عنصر ، عکسهارو به راحتی برداشت ولی منظور بنده برداشتن عکس نیست ، منظور اینه که وقتی عکس از طریق Css آدرس دهی بشه خیلی بهتره و بنده همینو میخوام . حالا چه از نظر راست کلیک و چه از نظرای دیگه .

اصلا یکی که کامل متوجه عرض بنده شد بگه کاری که مد نظرمه امکان پذیره و میشه با کد به همچین چیزی رسید ؟

منظورم رسیدن به این دو مورده :

1- اون عکس در Style.Css آدرس دهی بشه که قابل ذخیره کردن به صورت راست کلیک نباشه .

2- در ابزارک کدی تعریف بشه که هم عکس آدرس دهی شده در Style.Css رو فراخوانی کنه و هم به عکس خاصیت لینک دهی بده که با کلیک روی عکس ، کاربر به صفحه ای مشخص بره .

ویرایش شده خرداد 93 توسط تازه وارد

[تازه وارد 165]

کد html که تو ابزارک میخواید بزارید :

<div class="post">
محتوا
</div>

کد css :

.post {
background: url('images/bg.png') no-repeat;
width:100px;
height:20px;
float:right
}

این کد جناب Kasra خیلی به نیاز بنده نزدیک شد و دقیقا همون چیزیه که میخوام ، ولی متأسفانه به دو دلیل نتونستم ازش استفاده کنم .

1- خاصیت

float:right;

در این کد عمل نمیکرد و به هر شکل که مقداردهی کردم ( مثل Center و ... ) هیچ تغییری نمیکرد .

2- اینکه در کد مربوط به ابزارک ، لینکی به عکس آدرس دهی شده در Css تعلق نگرفته بود که وقتی کاربر روی عکس کلیک کنه به صفحه ای مشخص بره .

این دو مورد اگه حل بشه ، به امید خدا مشکل بنده هم به طور کامل رفع میشه .

امیدوارم کسی راه حلشو بدونه .

[kasra 4929]

این کد جناب Kasra خیلی به نیاز بنده نزدیک شد و دقیقا همون چیزیه که میخوام ، ولی متأسفانه به دو دلیل نتونستم ازش استفاده کنم .

1- خاصیت

float:right;

در این کد عمل نمیکرد و به هر شکل که مقداردهی کردم ( مثل Center و ... ) هیچ تغییری نمیکرد .

2- اینکه در کد مربوط به ابزارک ، لینکی به عکس آدرس دهی شده در Css تعلق نگرفته بود که وقتی کاربر روی عکس کلیک کنه به صفحه ای مشخص بره .

این دو مورد اگه حل بشه ، به امید خدا مشکل بنده هم به طور کامل رفع میشه .

امیدوارم کسی راه حلشو بدونه .

خب به جای div از a استفاده کنید به این صورت :

<a class="post" href="adres">
محتوا
</a>

[imanfakhar 26231]

آقای فخار الان این کد رو باید در استایل بزارم دیگه درسته ؟ ( چون به صورت Class تعریف کردید )

اگه درسته چه کدی رو باید در ابزارک واسه فراخوانی عکس مد نظرم بزارم ؟

اگه شمام منظورمو به طور کامل متوجه شدید ، لطف کنید بگید دقیق چیکار کنم که این تاپیک پی در پی بالا نیاد .

یه دنیا ممنون .

<div class="img"> </div>

[تازه وارد 165]

خب به جای div از a استفاده کنید به این صورت :

<a class="post" href="adres">
محتوا
</a>

به همین شکلی که گفتید گذاشتم ولی اینبار حتی عکس رو هم نشون نداد .

[تازه وارد 165]

خدا رو شکر بعد از تست گرفتن حالتهای مختلف ، با تغییر مقدار طول و عرض به مقدار دقیق عکس ، مشکل نمایش ندادن عکس برطرف شد و خاصیت لینک پذیری هم گرفت .

فقط یه سؤال و مشکل میمونه .

سؤال :

در کدهای مربوط به ابزارک ، واسه لینک دار کردن عکس ، اگه آدرس رو به این شکل بنویسم :

www.site.com/test

به صفحه ی 404 منتقل میشه و باید واسه آدرس دهی فقط قسمت آخر آدرس نوشته بشه ، بدون دامین ، یعنی به این شکل :

test

تا بدون مشکل بره به صفحه ی مد نظر و خطا نده .

حالا سؤالم اینجاست که این طبیعیه ؟

و مشکل :

الان یه مشکل عجیب دارم و اون اینکه اگه واسه خاصیت float ، مقدار right و left بدم به درستی عمل میکنه ولی وقتی مقدار center میدم کل عکس رو ناپدید میکنه !!!

[imanfakhar 26231]

نشانی را باید

http://www.site.com/test

بنویسید

خاصیت float مقدار center نداره اگر می خواهید وسط قرار بگیره مقدار float را برابر none بگذارید و در محل نمایش کدها را در داخل تگ center بگذارید مثل

<center>
کدهای نمایش
</center>

[تازه وارد 165]

نشانی را باید

http://www.site.com/test

بنویسید

با این راهنمایی که کردید ، مشکل آدرس دهی رفع شد .

خاصیت float مقدار center نداره اگر می خواهید وسط قرار بگیره مقدار float را برابر none بگذارید و در محل نمایش کدها را در داخل تگ center بگذارید مثل

<center>
کدهای نمایش
</center>

این کار رو کردم و در ابزارک خاصیت Center که گفتید رو اضافه کردم ولی متأسفانه دوباره عکس ناپدید شد !!!

[تازه وارد 165]

ظاهرا واسه مورد بالا راه حلی پیدا نشد .

خداروشکر 99% مشکل بنده به لطف خدا و به راهنمایی شما عزیزان حل شد و این 1% باقی مونده هم اهمیت چندانی نداره و نهایتا از خواص right و left استفاده میکنم .

به هر حال وظیفه ی خودم دونستم ، از تمامی کسانی که از ابتدای این تاپیک تا انتها بنده رو راهنمایی کردن مجددا تشکر کنم .

کاربران محترم :

hamid_khaleghi

Earth

SM-Mahdavi

imanfakhar

jakob

kasra

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

خدا خیرتون بده .

[imanfakhar 26231]

استایل را اینطوری بگذارید

a.post {
display:block;
width:100px;
height:50px;
float:none;
clear:both;
margin-left:auto;
margin-right:auto;
background:url('picture.png') black no-repeat scroll center center;
background-size:100px 50px;
}

[تازه وارد 165]

با این کدی که دادید ، همون 1% مشکل هم رفع شد . بسیار ممنون .

فقط black اضافی بود که حذفش کردم .

موفق باشید و یا علی .