راهنمایی در ادیت اسلایدر

[keyvan 87]

سلام

اسلایدری که در سایتم هست؛ 3 مشکل در اون میبینم

1-اسلایدر border نداره ،همین باعث شده که یک تصویر با پس زمینه سفید با بکگراوند قالب یکی میشه

2-بکگراوند سیاه رنگی که تیتر مطلب در اون قرار گرفته طوری هست که تصویر اسلایدر روی اون تأثیر میذاره، یعنی کاملا" تصویر تا حدودی از پشت اون بکگراوند پیداست.

3-تیتر سفید رنگ مطلب، میخوام وقتی موس روی اون میره،به رنگ قرمز تیتر مطالب سایت در بیاد

کد استایل رو پیوست کردم، ممنون میشم راهنمایی کنید

style-slider.css

[keyvan 87]

دوستان مشکل دوم رو حل کردم، ولی نتونستم مورد اول و سوم رو اصلاح کنم

[Farzad 3805]

یک div جدید بالای کل المان های html بسازید و border بدید

http://www.w3schools.com/css/css_border.asp

[keyvan 87]

ممنون فرزاد عزیز ولی چون وارد نیستم دقیق متوجه نشدم

[keyvan 87]

دوستان کسی نمی تونه راهنمایم کنه

[SM-Mahdavi 5427]

به این صورت می تونین به المان مربوطه border بدین:

.x{ border:2px solid #ccc; }

برای تغییر رنگ زمانی ماوس روی متن میره هم به صورت زیر می تونید عمل کنید:

h2{
color:#fff;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
}
h2:hover {
color:#f00;
transition:0.2s;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
}

[keyvan 87]

ممنون که پاسخ دادید، ولی الان این کدها رو کجای کد استایل اسلایدر بذارم؟

شما کد استایل اسلایدر رو مشاهده کردید؟

ویرایش شده دی 92 توسط keyvan

[SM-Mahdavi 5427]

نه من مثال زدم واستون. کدتون رو نگاه نکردم.

[keyvan 87]

خوب من الان بلد نیستم این رو چطور استفاده کنم.آقای فرزاد هم راهنمایی کردن ولی بلد نبودم!

[SM-Mahdavi 5427]

فایل رو براتون ادیت و پیوست کردم. چک کنید ببینید مشکلتون حل شده یا نه.

style-slider.css

[keyvan 87]

خیلی ممنونم.ولی الان یکی دو مشکل داره

بر اساس ویرایشی که شما انجام دادید، الان برای تیتر مطلب تغییر رنگ رو در همون کد قبلی اعمال کردم ولی فقط مونده border

از 5 تصویر دوم به بعد، تصاویر کوچک کامل در جای خودش قرار نمی گیره، و اینکه سمت راست اسلایدر border نداره، و یه خط کوچک اضافه هم می افته بین تصویر اصلی و تصویر کوچک

در عکسی که پیوست کردم مشخصه

البته اگر جسارت نباشه، روی این یکی borser رو انجام بدید بهتره

style-slider.css

ویرایش شده دی 92 توسط keyvan

[keyvan 87]

دوستان اگر لطف کنید ممنون میشم در رفع این مشکل کمکم کنید

در کدهای اسلایدر

وقتی border رو در اینجا قرار می دم، به طور کامل اسلایدر رو در بر نمی گیره و اینکه سمت راست اسلایدر border نداره، و یه خط کوچک اضافه هم می افته بین تصویر اصلی و تصویر کوچک

.lof-main-outer {
color:#fff;
	 border:2px solid #000;

در اینجا هم وقتی برای فاصله بین تصاویر کوچک به صورت افقی border میذارم از 5 تصویر دوم به بعد تصاویر کامل در جای خودشان قرار نمی گیرند.در تصویر پیوست هر دو رو مشخص کردم

ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:120px;
height:74px;
padding:0;
margin:0;
overflow:hidden;
border-bottom:1px solid #383838;
background:#fff;
text-align:center;

این هم کد استایل اسلایدر

.lof-main-outer a{

color:#fff;

}

.lof-main-outer {

color:#fff;

border:2px solid #000;

}

.lof-slidecontent{

position:relative;

overflow:hidden;

border:#F4F4F4 solid 1px;

width:444px;

height:214px;

margin: 0 auto;

direction:ltr;

}

.lof-slidecontent 8{

direction:ltr;

}

.lof-slidecontent .preload{

height:100%;

width:100%;

background:#FFF;

position:absolute;

top:0;

left:0;

z-index:100000;

color:#FFF;

text-align:center

}

.lof-slidecontent .preload div{

height:100%;

width:100%;

background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;

}

.lof-main-outer{

position:relative;

height:100%;

width:600px;

z-index:3px;

overflow:hidden;

}

/*******************************************************/

.lof-main-item-desc{

z-index:100px;

position:absolute;

top:0px;

left:0px;

width:267px;

background:url(../images/transparent_bg.png);

height:211px;

/* filter:0.7(opacity:60) */

}

.lof-main-item-desc p{

color:#FFF;

margin:0 8px;

padding:8px 0;

text-align:right;

direction:rtl;

}

/* main flash */

ul.lof-main-wapper{

/* margin-right:auto; */

overflow:hidden;

background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;

padding:0px;

margin:0;

height:300px;

width:600px;

position:absolute;

overflow:hidden;

}

ul.lof-main-wapper li{

overflow:hidden;

padding:0px;

margin:0px;

height:300px;

width:480px;

float:left;

position:relative;

}

.lof-opacity li{

position:absolute;

top:0;

left:0;

float:inherit;

}

ul.lof-main-wapper li img{

padding:0px;

width:480px;

float:left;

}

li-desc{

z-index:100px;

position:absolute;

top:150px;

left:50px;

width:400px;

background:url(../images/transparent_bg.png);

/* filter:0.7(opacity:60) */

}

li-desc p{

color:#FFF;

margin:0 8px;

padding:8px 0

}

li-desc h3 a{

color:#FFF;

margin:0;

font-size:140%;

padding:20px 8px 2px;

font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;

}

li-desc h3 a:hover{

color:#FF6;

text-decoration:underline;

}

/* item navigator */

ul.lof-navigator{

top:0;

padding:0;

margin:0;

position:absolute;

width:100%;

}

ul.lof-navigator li{

cursor:hand;

cursor:pointer;

list-style:none;

width:120px;

height:74px;

padding:0;

margin:0;

overflow:hidden;

background:#fff;

text-align:center;

}

.lof-navigator-outer{

position:absolute;

right:0;

top:0px;

z-index:100;

height:300px;

width:310px;

overflow:hidden;

color:#FFF

}

.lof-navigator li.active{

color:#FFF

}

.lof-navigator li:hover{

}

.lof-navigator li h3{

color:#FFF;

font-size:100%;

padding:15px 0 0 !important;

margin:0;

}

.lof-navigator li div{

background:url(../images/bg-navigation.png) repeat;

color:#FFF;

height:56px;

width:120px;

position:relative;

font-size:17px;

font-weight:normal;

padding:10px;

text-align:right;

}

.lof-navigator li.active div{

background:url(../images/bg-navigation.png) repeat;

color:#FFF;

height:56px;

font-size:17px;

font-weight:normal;

padding:10px;

text-align:right;

}

.lof-navigator li.active img{

border:##6C8E5C solid 1px;

}

.lof-navigator li.active h3{

color:#FFF;

}

.slider .slider-description {

background: #000000;

opacity:1;

color: #FFFFFF;

left: 0;

top:240px;

padding: 10px;

position: absolute;

width: 420px;

float:left;

text-align:right; direction:rtl;

}

.slider .slider-description a{

color: #FFFFFF;

}

.slider .slider-description a:hover {

color:#f85154;

}

.button-next {

background: url("../images/felesh.png") no-repeat scroll right center transparent;

right:230px;

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

filter: alpha(opacity=80);

}

.button-next:hover {

background: url("../images/felesh2.png") no-repeat scroll right center transparent;

}

.button-next, .button-previous {

color: #FFFFFF;

cursor: pointer;

display: block;

height: 28px;

position: absolute;

text-indent: -999px;

bottom: 10px;

width: 30px;

z-index: 140;

right:46px;

}

.button-previous {

bottom: 265px;

background: url("../images/felesh+.png") no-repeat scroll right center transparent;

-moz-opacity: 0.8;

-khtml-opacity: 0.8;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

filter: alpha(opacity=80);

}

.button-previous:hover {

background: url("../images/felesh2+.png") no-repeat scroll right center transparent;

}

ویرایش شده بهمن 92 توسط Morteza

[keyvan 87]

دوستان قصد اسپم ندارم، اگر برایتان مقدور هست، لطفا" راهنمایی کنید

[Morteza 34190]

دمو آنلاین داره؟

بنظر padding المان که اضافه هست