رفتن به مطلب

جلوگیری از تداخل CSS


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

با سلام؛

من یک کد 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" />

 

با تشکر

ویرایش شده توسط chemist
لینک به ارسال

 

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

باید اول کلاس بندی کنید و تگ ها رو مرتب کنید الان مشکل این کدهایی که قرار دادید فقط المان * و تگ 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;
}

 

 

ویرایش شده توسط Alireza Xn
لینک به ارسال

ممنون از Alireza Xn عزیز؛

میشه لطف بفرمائید فایل نهایی رو بذارین. چون من خیلی مبتدی هستم و نمیدونم چیکار باید بکنم؟ واقعاً لطف بزرگی می کنین اگه تمام کارهایی که باید انجام بدم رو بفرمائید.

با تشکر

لینک به ارسال
 * {
	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;
}           

 

لینک به ارسال

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

این هم پیش نمایش سایت ارائه دهنده کد:

http://blog-theme.ir/demo/codex/dl-button/

ویرایش شده توسط chemist
لینک به ارسال

خوب این یک کد خالیه شما خودتون باید پویا سازیش کنید تا با قالب یکی بشه

از اونجایی که آشنایی توی CSS و HTML ندارید بهتره یک آدرس آنلاین قرار بدید تا بررسی بشه 

لینک به ارسال

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

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

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

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

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

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

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

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

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