chemist 3 ارسال شده در اردیبهشت 95 گزارش بازنشر ارسال شده در اردیبهشت 95 (ویرایش شده) با سلام؛ من یک کد CSS برای دکمه دانلود دارم، که وقتی به اون لینک میدم کل قالب سایتم به هم میریزه! ظاهراً با کدهای سی اس اس اصلی قالبم تداخل داره. هم قسمت CSS و هم قسمت HTML رو اینجا قرار میدم تا یکی از دوستان برنامه نویس کدها رو به نحوی ویرایش کنند که امکان تداخلشون صفر باشه. با کلاس و آیدی های اجق وجق و ... البته این توضیحات رو از اینترنت یاد گرفتم. نمی تونم عملیش کنم! ممنون میشم یکی از برنامه نویس های انجمن این کار رو برام انجام بدن. کد CSS: * { padding: 0; margin: 0; } #header { height: 25px; text-align: center; font: 12px/25px 'B Yekan', tahoma, arial; background: #eee; } .button { width: 200px; margin: 150px auto; } .button a { display: block; height: 50px; width: 200px; /*TYPE*/ color: white; font: 17px/50px 'B Yekan', tahoma, arial; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px 'B Yekan', tahoma, arial; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } /*HOVER*/ .button:hover .bottom { margin: -10px 0 0 10px; direction:rtl; } .button:hover .top { margin: -80px 0 0 10px; line-height: 35px; direction:rtl; } /*ACTIVE*/ .button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button:active .bottom { margin: -20px 0 0 10px; } .button:active .top { margin: -70px 0 0 10px; } کد HTML: <div class="button"> <a href="#">دانـلــود فایل</a> <p class="top">رمز: www.url.ir</p> <p class="bottom">28 کیلوبایت</p> </div> این کد رو هم در هدر سایت قرار میدم: <link rel="stylesheet" media="screen" href="http://url.ir/demo/codex/dl-button/style.css" /> با تشکر ویرایش شده اردیبهشت 95 توسط chemist نقل قول لینک به ارسال
Alireza Xn 1644 ارسال شده در اردیبهشت 95 گزارش بازنشر ارسال شده در اردیبهشت 95 (ویرایش شده) سلام ، فکر میکنم این یک کد آماده باشه شما همینطوری متصل کردید به قالبتون خوب معلومه دچار مشکل میشید ... باید اول کلاس بندی کنید و تگ ها رو مرتب کنید الان مشکل این کدهایی که قرار دادید فقط المان * و تگ p هستش که توی استایل به صورت آزاد صدا زده شده و هیچ کلاس مادری نداره اینطوری باعث میشه کل تگ های p داخل قالب سایت استایل مورد نظرو بگیرن ... پس باید کلاس اصلی که button هستش رو اولش اضافه کنید به این شکل .button p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px 'B Yekan', tahoma, arial; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } ویرایش شده اردیبهشت 95 توسط Alireza Xn 1 نقل قول لینک به ارسال
chemist 3 ارسال شده در اردیبهشت 95 مالک گزارش بازنشر ارسال شده در اردیبهشت 95 ممنون از Alireza Xn عزیز؛ میشه لطف بفرمائید فایل نهایی رو بذارین. چون من خیلی مبتدی هستم و نمیدونم چیکار باید بکنم؟ واقعاً لطف بزرگی می کنین اگه تمام کارهایی که باید انجام بدم رو بفرمائید. با تشکر نقل قول لینک به ارسال
Alireza Xn 1644 ارسال شده در اردیبهشت 95 گزارش بازنشر ارسال شده در اردیبهشت 95 * { padding: 0; margin: 0; } #header { height: 25px; text-align: center; font: 12px/25px 'B Yekan', tahoma, arial; background: #eee; } .button { width: 200px; margin: 150px auto; } .button a { display: block; height: 50px; width: 200px; /*TYPE*/ color: white; font: 17px/50px 'B Yekan', tahoma, arial; text-decoration: none; text-align: center; text-transform: uppercase; /*GRADIENT*/ background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button a, p { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2); box-shadow: 2px 2px 8px rgba(0,0,0,0.2); } .button p { background: #222; display: block; height: 40px; width: 180px; margin: -50px 0 0 10px; /*TYPE*/ text-align: center; font: 12px/45px 'B Yekan', tahoma, arial; color: #fff; /*POSITION*/ position: absolute; z-index: -1; /*TRANSITION*/ -webkit-transition: margin 0.5s ease; -moz-transition: margin 0.5s ease; -o-transition: margin 0.5s ease; -ms-transition: margin 0.5s ease; transition: margin 0.5s ease; } /*HOVER*/ .button:hover .bottom { margin: -10px 0 0 10px; direction:rtl; } .button:hover .top { margin: -80px 0 0 10px; line-height: 35px; direction:rtl; } /*ACTIVE*/ .button a:active { background: #00b7ea; /* Old browsers */ background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */ background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */ } .button:active .bottom { margin: -20px 0 0 10px; } .button:active .top { margin: -70px 0 0 10px; } 1 نقل قول لینک به ارسال
chemist 3 ارسال شده در اردیبهشت 95 مالک گزارش بازنشر ارسال شده در اردیبهشت 95 (ویرایش شده) از Alireza Xn عزیز سپاسگذارم، لطف کردین و وقت گذاشتین. وضعیت به حادی قبل نیست ولی باز با بعضی قسمتهای قالب تداخل داره و استایل دکمه دانلود هم به درستی نمایش داده نمی شود. این هم پیش نمایش سایت ارائه دهنده کد: http://blog-theme.ir/demo/codex/dl-button/ ویرایش شده اردیبهشت 95 توسط chemist نقل قول لینک به ارسال
Alireza Xn 1644 ارسال شده در اردیبهشت 95 گزارش بازنشر ارسال شده در اردیبهشت 95 خوب این یک کد خالیه شما خودتون باید پویا سازیش کنید تا با قالب یکی بشه از اونجایی که آشنایی توی CSS و HTML ندارید بهتره یک آدرس آنلاین قرار بدید تا بررسی بشه نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .