ورود

View Full Version : حرفه ای: چرا افکت border روز دایو قرار نمی گیره؟


r4hgozar
جمعه 18 بهمن 1392, 11:23 صبح
چرا نمی تونم افکت رو رو دایو خودم قرار بدم.

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

<div id="content-top-slider" class="effect2"></div>


#content-top-slider {
width: 584px;
height: 266px;
float: left;
margin-top: 45px;
margin-left: 31px;
position: relative;
position: relative;
}
.effect2 {
position: relative;
}
.effect2:before, .effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
mikrob
جمعه 18 بهمن 1392, 12:02 عصر
background-color: #666;

به content-top-slider# اضافه کن. امیدوارم مشکلت حل بشه!
r4hgozar
جمعه 18 بهمن 1392, 14:08 عصر
نمیشه. خودتون تست کنین کد رو
mikrob
جمعه 18 بهمن 1392, 15:11 عصر
دوست عزیز مشکلی نداره.
عینا خروجی کد شماست:
r4hgozar
جمعه 18 بهمن 1392, 16:33 عصر
درست دوست عزیز اما این کد رو نگاه بندازین. وقتی میبرمش داخل دایو های دیگه کار نمی کنه.

#wapper {
margin: auto;
width: 968px;
height: 2400px;
overflow: hidden;
}
#header {
width: 968px;
height: 223px;
float: left;
}
#header-imge {
width: 968px;
height: 223px;
float: left;
background-color: #0F0;
}
#content-top {
width: 968px;
height: 420px;
float: left;
background-color: #FFF;
}
#content-top-left {
width: 290px;
height: 261px;
float: left;
border: 2px solid #CCC;
margin-top: 45px;
margin-left: 35px;
}
#content-top-left-title {
width: 290px;
height: 26px;
background-color:#F00;
float: left;
}
#content-top-left-content {
width: 290px;
height: 234px;
float: left;
}
/**************** slider **************/
#slider {
width: 600px;
height: 300px;
margin-top: 45px;
margin-left: 31px;
float: left;
}
#content-top-slider {
width: 584px;
height: 266px;
position: relative;
background-color: #666;
}
.effect2 {
position: relative;
}
.effect2:before, .effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/**************** end slider **************/






<body>
<div id="wapper">
<!-- header -->
<div id="header">
<div id="header-imge"></div>
</div>

<div id="content-top">
<div id="content-top-left">
<div id="content-top-left-title"></div>
<div id="content-top-left-content"></div>
</div>
<div id="slider">
<div id="content-top-slider" class="effect2"></div>
</div>
</div>
</div>
</body>
Omid Jackson
جمعه 18 بهمن 1392, 17:48 عصر
بخاطر z-index هستش که نشون نمیده
شما -1 دادین، میره زیر همه ی دیو ها
بعد خیلی قاطی پاطی بود، به دیو که کلاس داده بودین بعد آی دی هم داده بودین، به هر کدوم یه شکل پوزیشن داده بودین، خواستم درست کنم ولی وقت زیاد میبره، روش فکر کنین تا یاد بگیرین
#content-top-slider {
position: relative;
}
.effect2 {
position: relative;
}