chemist

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

6 پست در این موضوع قرار دارد

با سلام؛

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

به اشتراک گذاری این پست


لینک به پست

 

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

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

به اشتراک گذاری این پست


لینک به پست

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

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

با تشکر

0

به اشتراک گذاری این پست


لینک به پست
 * {
	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

به اشتراک گذاری این پست


لینک به پست

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

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

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

ویرایش شده در توسط chemist
0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری